@govbr-ds/webcomponents 2.0.0-next.46 → 2.0.0-next.48

package/dist/components/br-tag.js.map

@@ -1 +1 @@
-{"version":3,"names":["tagCss","DENSITY_SMALL","DENSITY_MEDIUM","DENSITY_LARGE","SHAPE_CIRCLE","SHAPE_ROUNDED","SHAPE_DEFAULT","Tag","__stencil_proxyCustomElement","HTMLElement","constructor","this","label","iconName","name","multiple","selected","customId","tagId","color","density","shape","status","interaction","interactionSelect","disabled","selectedClassValue","handleClose","el","remove","handleChangeValueChecked","radioSelected","emit","handleChangeRadioValue","event","target","checked","handleInteractionChange","newValue","console","warn","handleInteractionSelectChange","componentWillLoad","connectedCallback","handleSelectedChange","getCssClassMap","count","icon","renderIcon","trim","h","renderLabel","renderCloseButton","type","emphasis","onClick","renderStatusLabel","class","handleCheckedChange","detail","render","mainTagContent","key","id","Host","style","display","alignItems","value","htmlFor"],"sources":["../../packages/webcomponents/src/components/tag/tag.scss?tag=br-tag&encapsulation=shadow","../../packages/webcomponents/src/components/tag/tag.tsx"],"sourcesContent":["@import \"~@govbr-ds/core/src/components/checkbox/checkbox\";\n@import \"~@govbr-ds/core/src/components/input/input\";\n@import \"~@govbr-ds/core/src/components/tag/tag\";\n\n:host {\n  display: inline-block;\n\n  .tag-position {\n    display: flex;\n    justify-content: space-around;\n    align-items: center;\n  }\n\n  .tag-spacing-status {\n    margin-left: var(--spacing-scale-half) !important;\n  }\n}\n\n.br-tag {\n  &:not(.icon) {\n    br-icon {\n      margin-right: var(--spacing-scale-base);\n    }\n  }\n}\n","import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} 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/tag?tab=designer).\n *\n * @slot default - Espaço de conteúdo do tag. Geralmente usado para incluir o rótulo ou um ícone.\n */\n\n// Constantes para valores fixos\nconst DENSITY_SMALL = 'small'\nconst DENSITY_MEDIUM = 'medium'\nconst DENSITY_LARGE = 'large'\n\nconst SHAPE_CIRCLE = 'circle'\nconst SHAPE_ROUNDED = 'rounded'\nconst SHAPE_DEFAULT = 'default'\n\n@Component({\n  tag: 'br-tag',\n  styleUrl: 'tag.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Tag {\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: HTMLBrTagElement\n\n  /** API de controle de formulário nativa */\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * A propriedade 'label' é uma string que representa o texto a ser exibido no componente.\n   * Ela é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente.\n   */\n  @Prop({ reflect: true }) readonly label: string = ''\n\n  /**\n   * A propriedade 'iconName' define o nome do ícone que será exibido ao lado do texto.\n   * O valor padrão é 'fa-solid:car', que corresponde a um ícone de carro da biblioteca Font Awesome.\n   */\n  @Prop({ reflect: true }) readonly iconName: string = ''\n\n  /**\n   * A propriedade 'name' é uma string que representa o nome do grupo da tag para seleção.\n   * Ela é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente.\n   */\n  @Prop({ reflect: true }) readonly name: string = ''\n\n  /**\n   * A tag permite seleção múltipla.\n   * */\n  @Prop({ reflect: true }) readonly multiple: boolean = false\n\n  /**\n   * A tag está selecionada.\n   * */\n  @Prop({ reflect: true, mutable: true }) selected: boolean = false\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-tag-${tagId++}`\n\n  /**\n   * A propriedade 'color' permite definir a cor do componente.\n   * Aceita valores como 'red', 'blue', entre outros, e é refletida no DOM.\n   */\n  @Prop({ reflect: true }) readonly color: string = ''\n\n  /**\n   * A propriedade 'density' permite definir a densidade do componente.\n   * Aceita valores como 'small', 'medium' e 'large', e é refletida no DOM.\n   */\n  @Prop({ reflect: true }) readonly density: 'small' | 'medium' | 'large' = DENSITY_SMALL\n\n  /**\n   * A propriedade 'shape' define o formato do componente.\n   * Valores possíveis:\n   * - 'circle': Componente com formato circular.\n   * - 'rounded': Componente com bordas arredondadas.\n   * - 'default': Componente com formato padrão.\n   */\n  @Prop({ reflect: true }) readonly shape: 'circle' | 'rounded' | 'default' = SHAPE_DEFAULT\n\n  /**\n   * Status deve ser exibido.\n   */\n  @Prop({ reflect: true }) readonly status: boolean = false\n\n  /**\n   * Interação deve ser habilitada.\n   */\n  @Prop({ reflect: true, mutable: true }) interaction: boolean = false\n\n  /**\n   * Interação de seleção deve ser habilitada.\n   * */\n  @Prop({ reflect: true }) interactionSelect: boolean = false\n\n  /**\n   * Tag deve estar desabilitado.\n   */\n  @Prop({ reflect: true }) readonly disabled: boolean = false\n\n  /**\n   * Tag está selecionada.\n   */\n  @State() selectedClassValue: boolean = false\n\n  /**\n   * Evento emitido quando a tag é selecionada.\n   */\n  @Event() radioSelected: EventEmitter<string>\n\n  @Watch('interaction')\n  handleInteractionChange(newValue: boolean) {\n    if (newValue && this.interactionSelect) {\n      console.warn(\n        \"Aviso: 'interaction' e 'interactionSelect' não podem ser usados ao mesmo tempo. Alterando o 'interaction' para 'false'.\"\n      )\n      this.interaction = false\n    }\n  }\n\n  @Watch('interactionSelect')\n  handleInteractionSelectChange(newValue: boolean) {\n    if (newValue && this.interaction) {\n      console.warn(\n        \"Aviso: 'interaction' e 'interactionSelect' não podem ser usados ao mesmo tempo. Alterando o 'interaction' para 'false'.\"\n      )\n      this.interaction = false\n    }\n  }\n\n  componentWillLoad() {\n    if (this.interaction && this.interactionSelect) {\n      console.warn(\n        \"Aviso: 'interaction' e 'interactionSelect' não podem ser usados ao mesmo tempo. Alterando o 'interaction' para 'false'.\"\n      )\n      this.interaction = false\n    }\n  }\n  connectedCallback() {\n    this.selectedClassValue = this.selected\n  }\n\n  @Watch('selected')\n  handleSelectedChange(newValue: boolean) {\n    this.selectedClassValue = newValue\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-tag': true,\n      interaction: this.interaction,\n      'interaction-select': this.interactionSelect,\n      selected: this.selectedClassValue,\n      [this.color]: !!this.color,\n      [DENSITY_SMALL]: this.density === DENSITY_SMALL,\n      [DENSITY_MEDIUM]: this.density === DENSITY_MEDIUM,\n      [DENSITY_LARGE]: this.density === DENSITY_LARGE,\n      count: this.shape === SHAPE_ROUNDED,\n      icon: this.shape === SHAPE_CIRCLE,\n      status: this.status,\n    }\n  }\n\n  private renderIcon() {\n    return this.iconName && this.iconName.trim() !== '' ? (\n      <br-icon icon-name={this.iconName} aria-hidden=\"true\" />\n    ) : null\n  }\n\n  private renderLabel() {\n    return this.shape !== SHAPE_CIRCLE && !this.status ? <span>{this.label}</span> : null\n  }\n\n  private renderCloseButton() {\n    if (!this.interaction) return null\n    return (\n      <br-button\n        type=\"button\"\n        shape=\"circle\"\n        emphasis=\"primary\"\n        aria-label=\"Fechar\"\n        onClick={this.handleClose}\n        disabled={this.disabled}\n      >\n        <br-icon icon-name=\"fa-solid:times\"></br-icon>\n      </br-button>\n    )\n  }\n\n  private renderStatusLabel() {\n    return this.status ? <span class=\"tag-spacing-status\">{this.label}</span> : null\n  }\n\n  private handleClose = () => {\n    this.el.remove()\n  }\n\n  private handleChangeValueChecked = () => {\n    if (!this.multiple) {\n      this.radioSelected.emit(this.name)\n    }\n    this.selected = !this.selected\n  }\n\n  private handleChangeRadioValue = (event: MouseEvent) => {\n    if (!this.multiple) {\n      this.radioSelected.emit(this.name)\n      this.selected = (event.target as HTMLInputElement).checked\n    }\n  }\n\n  @Listen('radioSelected', { target: 'document' })\n  handleCheckedChange(event: CustomEvent) {\n    if (event.detail === this.name && this.el !== event.target) {\n      this.selected = false\n    }\n  }\n\n  render() {\n    const mainTagContent = (\n      <span class={this.getCssClassMap()} id={this.customId}>\n        {this.renderIcon()}\n        {this.renderLabel()}\n        {this.renderCloseButton()}\n        <slot></slot>\n      </span>\n    )\n\n    return (\n      <Host>\n        {!this.status ? (\n          mainTagContent\n        ) : (\n          <div style={{ display: 'flex', alignItems: 'center' }}>\n            {mainTagContent}\n            {this.renderStatusLabel()}\n          </div>\n        )}\n\n        {this.interactionSelect && (\n          <span class={this.getCssClassMap()} id={this.customId}>\n            {this.multiple ? (\n              <input\n                id={this.label}\n                type=\"checkbox\"\n                name={this.name}\n                value={this.label}\n                checked={this.selected}\n                onClick={this.handleChangeValueChecked}\n                disabled={this.disabled}\n              />\n            ) : (\n              <input\n                id={this.label}\n                type=\"radio\"\n                name={this.name}\n                value={this.label}\n                checked={this.selected}\n                onClick={this.handleChangeRadioValue}\n                disabled={this.disabled}\n              />\n            )}\n            <label htmlFor={this.label}>\n              {this.renderIcon()}\n              <span>{this.label}</span>\n            </label>\n          </span>\n        )}\n      </Host>\n    )\n  }\n}\n\nlet tagId = 0\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["tagCss","DENSITY_SMALL","DENSITY_MEDIUM","DENSITY_LARGE","SHAPE_CIRCLE","SHAPE_ROUNDED","SHAPE_DEFAULT","Tag","__stencil_proxyCustomElement","HTMLElement","constructor","this","label","iconName","name","multiple","selected","customId","tagId","color","density","shape","status","interaction","interactionSelect","disabled","ariaLabel","ariaDescribedby","selectedClassValue","handleKeyDown","event","key","preventDefault","selectNextRadio","selectPreviousRadio","handleClose","el","remove","handleChangeValueChecked","radioSelected","emit","handleChangeRadioValue","target","checked","handleInputChange","handleInteractionChange","newValue","console","warn","handleInteractionSelectChange","handleSelectedChange","handleCheckedChange","detail","componentWillLoad","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","selectRadioByStep","step","radios","Array","from","document","querySelectorAll","currentIndex","indexOf","newIndex","length","selectRadioByIndex","index","nextRadio","input","shadowRoot","querySelector","focus","click","getCssClassMap","count","icon","getTagAttributes","id","role","getRole","getAriaLabel","getAriaDescribedBy","getAriaChecked","getAriaDisabled","hostTitle","getAttribute","hasContent","hasInternalLabel","trim","value","renderIcon","h","renderLabel","renderCloseButton","emphasis","onClick","renderStatusLabel","class","renderMainTagContent","renderStatusLayout","content","style","display","alignItems","renderInteractionSelectTag","type","htmlFor","render","mainContent","Host"],"sources":["../../packages/webcomponents/src/components/tag/tag.scss?tag=br-tag&encapsulation=shadow","../../packages/webcomponents/src/components/tag/tag.tsx"],"sourcesContent":["@import \"~@govbr-ds/core/src/components/checkbox/checkbox\";\n@import \"~@govbr-ds/core/src/components/input/input\";\n@import \"~@govbr-ds/core/src/components/tag/tag\";\n\n:host {\n  display: inline-block;\n  margin-right: var(--spacing-scale-half);\n\n  .tag-spacing-status {\n    margin-left: var(--spacing-scale-half) !important;\n  }\n}\n\n.br-tag {\n  &.interaction {\n    br-button {\n      margin-left: var(--spacing-scale-baseh);\n    }\n  }\n\n  &:not(.icon) {\n    br-icon {\n      margin-right: var(--spacing-scale-base);\n    }\n  }\n}\n","import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} 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/tag?tab=designer).\n *\n * @slot default - Espaço de conteúdo do tag. Geralmente usado para incluir o rótulo ou um ícone.\n */\n\n// Constantes para valores fixos\nconst DENSITY_SMALL = 'small'\nconst DENSITY_MEDIUM = 'medium'\nconst DENSITY_LARGE = 'large'\n\nconst SHAPE_CIRCLE = 'circle'\nconst SHAPE_ROUNDED = 'rounded'\nconst SHAPE_DEFAULT = 'default'\n\n@Component({\n  tag: 'br-tag',\n  styleUrl: 'tag.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Tag {\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: HTMLBrTagElement\n\n  /** API de controle de formulário nativa */\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * A propriedade 'label' é uma string que representa o texto a ser exibido no componente.\n   * Ela é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente.\n   */\n  @Prop({ reflect: true }) readonly label: string = ''\n\n  /**\n   * A propriedade 'iconName' define o nome do ícone que será exibido ao lado do texto.\n   * O valor padrão é 'fa-solid:car', que corresponde a um ícone de carro da biblioteca Font Awesome.\n   */\n  @Prop({ reflect: true }) readonly iconName: string = ''\n\n  /**\n   * A propriedade 'name' é uma string que representa o nome do grupo da tag para seleção.\n   * Ela é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente.\n   */\n  @Prop({ reflect: true }) readonly name: string = ''\n\n  /**\n   * A tag permite seleção múltipla.\n   * */\n  @Prop({ reflect: true }) readonly multiple: boolean = false\n\n  /**\n   * A tag está selecionada.\n   * */\n  @Prop({ reflect: true, mutable: true }) selected: boolean = false\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-tag-${tagId++}`\n\n  /**\n   * A propriedade 'color' permite definir a cor do componente.\n   * Aceita valores como 'red', 'blue', entre outros, e é refletida no DOM.\n   */\n  @Prop({ reflect: true }) readonly color: string = ''\n\n  /**\n   * A propriedade 'density' permite definir a densidade do componente.\n   * Aceita valores como 'small', 'medium' e 'large', e é refletida no DOM.\n   */\n  @Prop({ reflect: true }) readonly density: 'small' | 'medium' | 'large' = DENSITY_MEDIUM\n\n  /**\n   * A propriedade 'shape' define o formato do componente.\n   * Valores possíveis:\n   * - 'circle': Componente com formato circular.\n   * - 'rounded': Componente com bordas arredondadas.\n   * - 'default': Componente com formato padrão.\n   */\n  @Prop({ reflect: true }) readonly shape: 'circle' | 'rounded' | 'default' = SHAPE_DEFAULT\n\n  /**\n   * Transforma a tag em um indicador de status, com aparência circular.\n   * É flexível podendo ser utilizado com label ou apenas a superfície circular (informação é transmitida por meio de cores).\n   */\n  @Prop({ reflect: true }) readonly status: boolean = false\n\n  /**\n   * Interação deve ser habilitada.\n   */\n  @Prop({ reflect: true, mutable: true }) interaction: boolean = false\n\n  /**\n   * Interação de seleção deve ser habilitada.\n   * */\n  @Prop({ reflect: true }) interactionSelect: boolean = false\n\n  /**\n   * Tag deve estar desabilitado.\n   */\n  @Prop({ reflect: true }) readonly disabled: boolean = false\n\n  /**\n   * Rótulo personalizado para leitores de tela.\n   * Quando fornecido, substitui completamente o texto visível para usuários de leitores de tela.\n   * Útil quando o texto visível não é suficientemente descritivo (ex: ícones, abreviações).\n   */\n  @Prop({ reflect: true }) readonly ariaLabel: string = null\n\n  /**\n   * ID do elemento que fornece descrição adicional da tag.\n   * Referencia um elemento na página que contém informações complementares sobre a tag.\n   * A descrição é lida após o conteúdo principal, fornecendo contexto extra aos usuários de leitores de tela.\n   * Exemplo: aria-describedby=\"help-status\" onde existe <div id=\"help-status\">Aguardando aprovação</div>\n   */\n  @Prop({ reflect: true }) readonly ariaDescribedby: string = null\n\n  /**\n   * Tag está selecionada.\n   */\n  @State() selectedClassValue: boolean = false\n\n  /**\n   * Evento emitido quando a tag é selecionada.\n   */\n  @Event() radioSelected: EventEmitter<string>\n\n  @Watch('interaction')\n  handleInteractionChange(newValue: boolean) {\n    if (newValue && this.interactionSelect) {\n      console.warn(\n        \"Aviso: 'interaction' e 'interactionSelect' não podem ser usados ao mesmo tempo. Alterando o 'interaction' para 'false'.\"\n      )\n      this.interaction = false\n    }\n  }\n\n  @Watch('interactionSelect')\n  handleInteractionSelectChange(newValue: boolean) {\n    if (newValue && this.interaction) {\n      console.warn(\n        \"Aviso: 'interaction' e 'interactionSelect' não podem ser usados ao mesmo tempo. Alterando o 'interaction' para 'false'.\"\n      )\n      this.interaction = false\n    }\n  }\n\n  @Watch('selected')\n  handleSelectedChange(newValue: boolean) {\n    this.selectedClassValue = newValue\n  }\n\n  @Listen('radioSelected', { target: 'document' })\n  handleCheckedChange(event: CustomEvent) {\n    if (event.detail === this.name && this.el !== event.target) {\n      this.selected = false\n    }\n  }\n\n  componentWillLoad() {\n    if (this.interaction && this.interactionSelect) {\n      console.warn(\n        \"Aviso: 'interaction' e 'interactionSelect' não podem ser usados ao mesmo tempo. Alterando o 'interaction' para 'false'.\"\n      )\n      this.interaction = false\n    }\n  }\n  connectedCallback() {\n    this.selectedClassValue = this.selected\n    this.el.addEventListener('keydown', this.handleKeyDown)\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('keydown', this.handleKeyDown)\n  }\n  /**\n   * Permite navegação por teclado (setas) entre tags do tipo radio (seleção unica).\n   * Funciona apenas quando 'interactionSelect' é true e 'multiple' é false.\n   * Ignora tags desabilitadas.\n   * @param event - Evento de teclado\n   */\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (!this.interactionSelect || this.multiple || this.disabled) return\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault()\n      this.selectNextRadio()\n    } else if (event.key === 'ArrowLeft') {\n      event.preventDefault()\n      this.selectPreviousRadio()\n    }\n  }\n\n  private selectNextRadio() {\n    this.selectRadioByStep(1)\n  }\n\n  private selectPreviousRadio() {\n    this.selectRadioByStep(-1)\n  }\n\n  private selectRadioByStep(step: number) {\n    const radios = Array.from(\n      document.querySelectorAll(`br-tag[interaction-select][name=\"${this.name}\"]:not([disabled])`)\n    ) as HTMLElement[]\n    const currentIndex = radios.indexOf(this.el)\n    if (currentIndex === -1) return\n    const newIndex = (currentIndex + step + radios.length) % radios.length\n    this.selectRadioByIndex(radios, newIndex)\n  }\n\n  private selectRadioByIndex(radios: HTMLElement[], index: number) {\n    const nextRadio = radios[index] as HTMLBrTagElement\n    const input = nextRadio.shadowRoot?.querySelector('input[type=\"radio\"]') as HTMLInputElement | null\n    if (input !== null) {\n      input.focus()\n      input.click()\n    }\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-tag': true,\n      interaction: this.interaction,\n      'interaction-select': this.interactionSelect,\n      selected: this.selectedClassValue,\n      disabled: this.disabled,\n      [this.color]: this.color !== '',\n      [DENSITY_SMALL]: this.density === DENSITY_SMALL,\n      [DENSITY_MEDIUM]: this.density === DENSITY_MEDIUM,\n      [DENSITY_LARGE]: this.density === DENSITY_LARGE,\n      count: this.shape === SHAPE_ROUNDED,\n      icon: this.shape === SHAPE_CIRCLE,\n      status: this.status,\n    }\n  }\n\n  private getTagAttributes() {\n    if (this.interaction) {\n      return {\n        id: this.customId,\n      }\n    }\n\n    return {\n      id: this.customId,\n      role: this.getRole(),\n      'aria-label': this.getAriaLabel(),\n      'aria-describedby': this.getAriaDescribedBy(),\n      'aria-checked': this.getAriaChecked(),\n      'aria-disabled': this.getAriaDisabled(),\n    }\n  }\n\n  private getAriaDescribedBy(): string | null {\n    const hostTitle = this.el.getAttribute('title')\n    if (this.hasContent(hostTitle)) {\n      return null\n    }\n\n    const hasInternalLabel = !this.status && this.label !== ''\n\n    if (this.ariaDescribedby && this.ariaDescribedby.trim() !== '') {\n      return this.ariaDescribedby\n    }\n\n    if (hasInternalLabel && !this.hasContent(this.ariaLabel)) {\n      return `${this.customId}-label`\n    }\n\n    return null\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 getAriaLabel(): string | null {\n    return this.ariaLabel && this.ariaLabel.trim() !== '' ? this.ariaLabel : null\n  }\n\n  private getRole(): string | null {\n    const hostTitle = this.el.getAttribute('title')\n    if (this.hasContent(hostTitle)) {\n      return null\n    }\n\n    if (this.interactionSelect) return this.multiple ? 'checkbox' : 'radio'\n    return 'status'\n  }\n\n  private getAriaChecked(): string | null {\n    return this.interactionSelect ? (this.selected ? 'true' : 'false') : null\n  }\n\n  private getAriaDisabled(): string | null {\n    return this.disabled ? 'true' : null\n  }\n\n  private renderIcon() {\n    return this.iconName && this.iconName.trim() !== '' ? (\n      <br-icon icon-name={this.iconName} aria-hidden=\"true\" />\n    ) : null\n  }\n\n  private renderLabel() {\n    return this.shape !== SHAPE_CIRCLE && !this.status ? <span id={`${this.customId}-label`}>{this.label}</span> : null\n  }\n\n  private renderCloseButton() {\n    if (!this.interaction) return null\n    return (\n      <br-button\n        shape=\"circle\"\n        emphasis=\"primary\"\n        density=\"small\"\n        aria-label={`Fechar ${this.label || 'tag'}`}\n        onClick={this.handleClose}\n        disabled={this.disabled}\n      >\n        <br-icon icon-name=\"fa-solid:times\" aria-hidden=\"true\"></br-icon>\n      </br-button>\n    )\n  }\n\n  private renderStatusLabel() {\n    return this.status ? <span class=\"tag-spacing-status\">{this.label}</span> : null\n  }\n\n  private handleClose = () => {\n    this.el.remove()\n  }\n\n  private handleChangeValueChecked = () => {\n    if (!this.multiple) {\n      this.radioSelected.emit(this.name)\n    }\n    this.selected = !this.selected\n  }\n\n  private handleChangeRadioValue = (event: MouseEvent) => {\n    if (!this.multiple) {\n      this.radioSelected.emit(this.name)\n      this.selected = (event.target as HTMLInputElement).checked\n    }\n  }\n\n  private renderMainTagContent() {\n    return (\n      <span class={this.getCssClassMap()} {...this.getTagAttributes()}>\n        {this.renderIcon()}\n        {this.renderLabel()}\n        {this.renderCloseButton()}\n        <slot></slot>\n      </span>\n    )\n  }\n\n  private renderStatusLayout(content: JSX.Element) {\n    return (\n      <span style={{ display: 'flex', alignItems: 'center' }}>\n        {content}\n        {this.renderStatusLabel()}\n      </span>\n    )\n  }\n\n  private handleInputChange = (event: MouseEvent) => {\n    if (this.multiple) {\n      this.handleChangeValueChecked()\n    } else {\n      this.handleChangeRadioValue(event)\n    }\n  }\n\n  private renderInteractionSelectTag() {\n    if (!this.interactionSelect) {\n      return null\n    }\n\n    return (\n      <span class={this.getCssClassMap()} id={this.customId}>\n        <input\n          id={`input-${this.customId}`}\n          type={this.multiple ? 'checkbox' : 'radio'}\n          name={this.name}\n          value={this.label}\n          checked={this.selected}\n          onClick={this.handleInputChange}\n          disabled={this.disabled}\n        />\n        <label htmlFor={`input-${this.customId}`}>\n          {this.renderIcon()}\n          {this.renderLabel()}\n        </label>\n      </span>\n    )\n  }\n\n  render() {\n    const mainContent = this.renderMainTagContent()\n\n    return (\n      <Host>\n        {this.interactionSelect\n          ? this.renderInteractionSelectTag()\n          : this.status\n            ? this.renderStatusLayout(mainContent)\n            : mainContent}\n      </Host>\n    )\n  }\n}\n\nlet tagId = 0\n"],"mappings":"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","ignoreList":[]}

package/dist/components/br-textarea.js

@@ -35,24 +35,40 @@ const g =  r(class r extends a {
          */    this.isInline = false;
     this.handleInput = r => {
       this.value = r.target.value;
-      this.currentLength = this.value?.length;
+      this.currentLength = this.value?.length || 0;
       this.valueChange.emit(this.value);
     };
   }
   componentWillLoad() {
-    this.currentLength = this.value?.length;
+    this.currentLength = this.value?.length || 0;
   }
   valueChanged() {
-    this.currentLength = this.value?.length;
+    this.currentLength = this.value?.length || 0;
   }
   /**
      * Define um novo valor para o textarea.
      * @param newValue - O novo valor a ser definido.
      */  async setValue(r) {
     this.value = r;
-    this.currentLength = this.value?.length;
+    this.currentLength = this.value?.length || 0;
     this.valueChange.emit(this.value);
   }
+  /**
+     * Retorna os ids para o atributo aria-describedby do textarea
+     */  getDescribedBy() {
+    return [ this.showCounter ? `${this.customId}-limitMax` : null, `${this.customId}-slotInfo` ].filter(Boolean).join(" ");
+  }
+  /**
+     * Determina o texto a ser usado para acessibilidade quando não há label
+     * Ordem de prioridade:
+     *  - aria-label do elemento host
+     *  - propriedade ariaLabel do componente
+     *  - placeholder
+     *  - texto padrão ("Campo de texto")
+     */  getAccessibilityLabel() {
+    const r = this.el.getAttribute("aria-label");
+    return r && r.trim() !== "" ? r : this.ariaLabel && this.ariaLabel.trim() !== "" ? this.ariaLabel : this.placeholder && this.placeholder.trim() !== "" ? this.placeholder : "Campo de texto";
+  }
   getCssClassMap() {
     return {
       "br-textarea": true,
@@ -67,13 +83,14 @@ const g =  r(class r extends a {
   render() {
     const r = this.maxlength - this.currentLength;
     const a = this.currentLength > 0;
+    const o = !!this.label;
     return i(n, {
-      key: "31b508c72540c266449933596ccbc8fd960962e7"
+      key: "2af6b394753461a6adf4287a83d5efb39a2e9c55"
     }, i("div", {
-      key: "bfa11fb0b9e66c7fec97c8ad67cd2c5cb253a8b6",
+      key: "59edcfddec5286d98336721a07cb1de753f28fea",
       class: this.getCssClassMap()
     }, i("div", {
-      key: "fe27960edc7144abd6f91dd2b194127f6afa5d65",
+      key: "e087e031bb2d72c4719333125d7e43eff79c62be",
       class: this.isInline ? "row" : ""
     }, this.isInline ? i("div", {
       class: "col-auto pt-half"
@@ -82,10 +99,10 @@ const g =  r(class r extends a {
     }, this.label)) : i("label", {
       htmlFor: this.customId
     }, this.label), i("div", {
-      key: "f6b05e4e30c67bcd270571ab949eaee7ce9e5ab2",
+      key: "7f17addb9d9e9ffe7a528212dcd191887cda047b",
       class: this.isInline ? "col" : ""
     }, i("textarea", {
-      key: "9afe24806c27a70801b5da76082cfc83460612ca",
+      key: "ca231ff09c4f0dae99636930bafd8a37f8075873",
       id: this.customId,
       value: this.value,
       placeholder: this.placeholder,
@@ -93,23 +110,32 @@ const g =  r(class r extends a {
       onInput: this.handleInput,
       ...this.maxlength > 0 ? {
         maxLength: this.maxlength
+      } : {},
+      "aria-describedby": this.getDescribedBy(),
+      ...!o ? {
+        "aria-label": this.getAccessibilityLabel()
       } : {}
     }), i("div", {
-      key: "883a4d10573927cac2fdc63190e565d053c9a45f",
+      key: "dc74b639344b93eba8a28dc4e17669a226bd7ae0",
       class: "text-base mt-1"
     }, this.showCounter && i("div", {
-      key: "6301a3bdafa2d318e8d5dbd69c40e94750cda564"
+      key: "77d4ae651944f408db637ec8fc8a2efb37276ad1"
     }, a ? i("span", {
       class: "restantes",
       "aria-live": "polite",
       role: "status",
-      id: "limitMax"
+      id: `${this.customId}-limitMax`
     }, "Restam ", i("strong", null, r), " caracteres") : i("span", {
       class: "limit",
+      "aria-live": "polite",
+      id: `${this.customId}-limitMax`
+    }, "Limite máximo de ", i("strong", null, this.maxlength), " caracteres"))), i("div", {
+      key: "6b4c7265585b55fb864c001317fad59f955e839e",
+      id: `${this.customId}-slotInfo`,
       "aria-live": "polite"
-    }, "Limite máximo de ", i("strong", null, this.maxlength), " caracteres"))), i("slot", {
-      key: "0a8e1a6fa116134023d1202cb65d54aa534914cb"
-    })))));
+    }, i("slot", {
+      key: "91e491c48d49b1e974e3361eceac5eda0751f295"
+    }))))));
   }
   static get formAssociated() {
     return true;
@@ -129,6 +155,7 @@ const g =  r(class r extends a {
   value: [ 1537 ],
   label: [ 513 ],
   placeholder: [ 513 ],
+  ariaLabel: [ 513, "aria-label" ],
   customId: [ 513, "custom-id" ],
   disabled: [ 516 ],
   maxlength: [ 514 ],

package/dist/components/br-textarea.js.map

@@ -1 +1 @@
-{"version":3,"names":["textareaCss","Textarea","__stencil_proxyCustomElement","HTMLElement","constructor","this","customId","textareaId","disabled","maxlength","showCounter","density","isInline","handleInput","event","value","target","currentLength","length","valueChange","emit","componentWillLoad","valueChanged","setValue","newValue","getCssClassMap","small","medium","large","success","state","danger","warning","render","caracteresRestantes","mostrarLimite","h","Host","key","class","htmlFor","label","id","placeholder","onInput","maxLength","role"],"sources":["../../packages/webcomponents/src/components/textarea/textarea.scss?tag=br-textarea&encapsulation=shadow","../../packages/webcomponents/src/components/textarea/textarea.tsx"],"sourcesContent":["@import \"~@govbr-ds/core/src/components/textarea/textarea\";\n\n:host {\n  display: inline-block;\n  box-sizing: border-box;\n  font-family: Rawline, Raleway, sans-serif;\n}\n","import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} 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/textarea?tab=designer).\n *\n * @slot default - Espaço de conteúdo do textarea. Geralmente usado para incluir texto adicional ou instruções para o usuário.\n */\n@Component({\n  tag: 'br-textarea',\n  styleUrl: 'textarea.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Textarea {\n  @Element() el: HTMLBrTextareaElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Valor exibido no textarea.\n   * Pode ser alterado pelo usuário se a propriedade `readonly` não estiver ativa.\n   */\n  @Prop({ mutable: true, reflect: true }) value: string\n\n  /**\n   * Texto exibido como rótulo do input.\n   */\n  @Prop({ reflect: true }) readonly label: string\n\n  /**\n   * Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário.\n   */\n  @Prop({ reflect: true }) readonly placeholder: string\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-textarea-${textareaId++}`\n\n  /**\n   * Indica se o textarea está desabilitado. Quando verdadeiro, o usuário não pode interagir com o campo.\n   */\n  @Prop({ reflect: true }) readonly disabled: boolean = false\n\n  /**\n   * Número máximo de caracteres permitidos no textarea. Se definido como 0, não há limite.\n   */\n  @Prop({ reflect: true }) readonly maxlength: number = 0\n\n  /**\n   * Mostra o contador com a quantidade máxima de caracteres.\n   */\n  @Prop({ reflect: true }) readonly showCounter: boolean = false\n\n  /**\n   * Define o estado visual do componente, podendo ser 'danger', 'success' ou 'warning'.\n   */\n  @Prop({ reflect: true }) readonly state: 'danger' | 'success' | 'warning'\n  /**\n   * Ajusta a densidade do componente, podendo ser 'small', 'medium' ou 'large'.\n   */\n  @Prop({ reflect: true }) readonly density: 'small' | 'medium' | 'large' = 'medium'\n\n  /**\n   * Se verdadeiro, o rótulo e o input estarão na mesma linha (layout inline).\n   */\n  @Prop({ reflect: true }) readonly isInline: boolean = false\n\n  /**\n   * Comprimento atual do texto no textarea. É atualizado sempre que o valor do textarea muda.\n   */\n  @State() currentLength: number\n\n  componentWillLoad() {\n    this.currentLength = this.value?.length\n  }\n\n  /**\n   * Valor atualizado do textarea\n   */\n  @Event() valueChange: EventEmitter<string>\n\n  @Watch('value')\n  valueChanged() {\n    this.currentLength = this.value?.length\n  }\n\n  private readonly handleInput = (event: Event) => {\n    this.value = (event.target as HTMLInputElement).value\n    this.currentLength = this.value?.length\n    this.valueChange.emit(this.value)\n  }\n\n  /**\n   * Define um novo valor para o textarea.\n   * @param newValue - O novo valor a ser definido.\n   */\n  @Method()\n  async setValue(newValue: string) {\n    this.value = newValue\n    this.currentLength = this.value?.length\n    this.valueChange.emit(this.value)\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-textarea': true,\n      small: this.density === 'small',\n      medium: this.density === 'medium',\n      large: this.density === 'large',\n      success: this.state === 'success',\n      danger: this.state === 'danger',\n      warning: this.state === 'warning',\n    }\n  }\n\n  render() {\n    const caracteresRestantes: number = this.maxlength - this.currentLength\n    const mostrarLimite = this.currentLength > 0\n\n    return (\n      <Host>\n        <div class={this.getCssClassMap()}>\n          <div class={this.isInline ? 'row' : ''}>\n            {this.isInline ? (\n              <div class=\"col-auto pt-half\">\n                <label htmlFor={this.customId}>{this.label}</label>\n              </div>\n            ) : (\n              <label htmlFor={this.customId}>{this.label}</label>\n            )}\n            <div class={this.isInline ? 'col' : ''}>\n              <textarea\n                id={this.customId}\n                value={this.value}\n                placeholder={this.placeholder}\n                disabled={this.disabled}\n                onInput={this.handleInput}\n                {...(this.maxlength > 0 ? { maxLength: this.maxlength } : {})}\n              ></textarea>\n              <div class=\"text-base mt-1\">\n                {this.showCounter && (\n                  <div>\n                    {mostrarLimite ? (\n                      <span class=\"restantes\" aria-live=\"polite\" role=\"status\" id=\"limitMax\">\n                        Restam <strong>{caracteresRestantes}</strong> caracteres\n                      </span>\n                    ) : (\n                      <span class=\"limit\" aria-live=\"polite\">\n                        Limite máximo de <strong>{this.maxlength}</strong> caracteres\n                      </span>\n                    )}\n                  </div>\n                )}\n              </div>\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    )\n  }\n}\n\nlet textareaId = 0\n"],"mappings":";;;;;;AAAA,MAAMA,IAAc;;MC2BPC,KAAQC,EAAA,MAAAD,UAAAE;EANrB,WAAAC;;;;;;;;;eA+BoCC,KAAAC,WAAmB,eAAeC;;;;IAKlCF,KAAQG,WAAY;;;eAKpBH,KAASI,YAAW;;;eAKpBJ,KAAWK,cAAY;;;eASvBL,KAAOM,UAAiC;;;eAKxCN,KAAQO,WAAY;IAqBrCP,KAAAQ,cAAeC;MAC9BT,KAAKU,QAASD,EAAME,OAA4BD;MAChDV,KAAKY,gBAAgBZ,KAAKU,OAAOG;MACjCb,KAAKc,YAAYC,KAAKf,KAAKU;AAAM;AAwEpC;EAzFC,iBAAAM;IACEhB,KAAKY,gBAAgBZ,KAAKU,OAAOG;;EASnC,YAAAI;IACEjB,KAAKY,gBAAgBZ,KAAKU,OAAOG;;;;;SAcnC,cAAMK,CAASC;IACbnB,KAAKU,QAAQS;IACbnB,KAAKY,gBAAgBZ,KAAKU,OAAOG;IACjCb,KAAKc,YAAYC,KAAKf,KAAKU;;EAGrB,cAAAU;IACN,OAAO;MACL,eAAe;MACfC,OAAOrB,KAAKM,YAAY;MACxBgB,QAAQtB,KAAKM,YAAY;MACzBiB,OAAOvB,KAAKM,YAAY;MACxBkB,SAASxB,KAAKyB,UAAU;MACxBC,QAAQ1B,KAAKyB,UAAU;MACvBE,SAAS3B,KAAKyB,UAAU;;;EAI5B,MAAAG;IACE,MAAMC,IAA8B7B,KAAKI,YAAYJ,KAAKY;IAC1D,MAAMkB,IAAgB9B,KAAKY,gBAAgB;IAE3C,OACEmB,EAACC,GAAI;MAAAC,KAAA;OACHF,EAAA;MAAAE,KAAA;MAAKC,OAAOlC,KAAKoB;OACfW,EAAA;MAAAE,KAAA;MAAKC,OAAOlC,KAAKO,WAAW,QAAQ;OACjCP,KAAKO,WACJwB,EAAA;MAAKG,OAAM;OACTH,EAAO;MAAAI,SAASnC,KAAKC;OAAWD,KAAKoC,UAGvCL,EAAA;MAAOI,SAASnC,KAAKC;OAAWD,KAAKoC,QAEvCL,EAAA;MAAAE,KAAA;MAAKC,OAAOlC,KAAKO,WAAW,QAAQ;OAClCwB,EACE;MAAAE,KAAA;MAAAI,IAAIrC,KAAKC;MACTS,OAAOV,KAAKU;MACZ4B,aAAatC,KAAKsC;MAClBnC,UAAUH,KAAKG;MACfoC,SAASvC,KAAKQ;SACTR,KAAKI,YAAY,IAAI;QAAEoC,WAAWxC,KAAKI;UAAc;QAE5D2B,EAAA;MAAAE,KAAA;MAAKC,OAAM;OACRlC,KAAKK,eACJ0B,EAAA;MAAAE,KAAA;OACGH,IACCC,EAAA;MAAMG,OAAM;MAAW,aAAW;MAASO,MAAK;MAASJ,IAAG;OAAU,WAC7DN,EAAA,gBAASF,IAA6B,iBAG/CE,EAAA;MAAMG,OAAM;MAAO,aAAW;OAAQ,qBACnBH,EAAS,gBAAA/B,KAAKI,YAAmB,kBAM5D2B,EAAA;MAAAE,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASd,IAAI/B,IAAa","ignoreList":[]}
+{"version":3,"names":["textareaCss","Textarea","__stencil_proxyCustomElement","HTMLElement","constructor","this","customId","textareaId","disabled","maxlength","showCounter","density","isInline","handleInput","event","value","target","currentLength","length","valueChange","emit","componentWillLoad","valueChanged","setValue","newValue","getDescribedBy","filter","Boolean","join","getAccessibilityLabel","hostAriaLabel","el","getAttribute","trim","ariaLabel","placeholder","getCssClassMap","small","medium","large","success","state","danger","warning","render","caracteresRestantes","mostrarLimite","hasLabel","label","h","Host","key","class","htmlFor","id","onInput","maxLength","role"],"sources":["../../packages/webcomponents/src/components/textarea/textarea.scss?tag=br-textarea&encapsulation=shadow","../../packages/webcomponents/src/components/textarea/textarea.tsx"],"sourcesContent":["@import \"~@govbr-ds/core/src/components/textarea/textarea\";\n\n:host {\n  display: inline-block;\n  box-sizing: border-box;\n  font-family: Rawline, Raleway, sans-serif;\n}\n","import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} 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/textarea?tab=designer).\n *\n * @slot default - Espaço de conteúdo do textarea. Geralmente usado para incluir texto adicional ou instruções para o usuário.\n */\n@Component({\n  tag: 'br-textarea',\n  styleUrl: 'textarea.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Textarea {\n  @Element() el: HTMLBrTextareaElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Valor exibido no textarea.\n   * Pode ser alterado pelo usuário se a propriedade `readonly` não estiver ativa.\n   */\n  @Prop({ mutable: true, reflect: true }) value: string\n\n  /**\n   * Texto exibido como rótulo do input.\n   */\n  @Prop({ reflect: true }) readonly label: string\n\n  /**\n   * Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário.\n   */\n  @Prop({ reflect: true }) readonly placeholder: string\n\n  /**\n   * Texto alternativo para acessibilidade quando não há label visível.\n   * Fornece um rótulo para tecnologias assistivas sem exibir visualmente.\n   */\n  @Prop({ reflect: true }) readonly ariaLabel: string\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-textarea-${textareaId++}`\n\n  /**\n   * Indica se o textarea está desabilitado. Quando verdadeiro, o usuário não pode interagir com o campo.\n   */\n  @Prop({ reflect: true }) readonly disabled: boolean = false\n\n  /**\n   * Número máximo de caracteres permitidos no textarea. Se definido como 0, não há limite.\n   */\n  @Prop({ reflect: true }) readonly maxlength: number = 0\n\n  /**\n   * Mostra o contador com a quantidade máxima de caracteres.\n   */\n  @Prop({ reflect: true }) readonly showCounter: boolean = false\n\n  /**\n   * Define o estado visual do componente, podendo ser 'danger', 'success' ou 'warning'.\n   */\n  @Prop({ reflect: true }) readonly state: 'danger' | 'success' | 'warning'\n  /**\n   * Ajusta a densidade do componente, podendo ser 'small', 'medium' ou 'large'.\n   */\n  @Prop({ reflect: true }) readonly density: 'small' | 'medium' | 'large' = 'medium'\n\n  /**\n   * Se verdadeiro, o rótulo e o input estarão na mesma linha (layout inline).\n   */\n  @Prop({ reflect: true }) readonly isInline: boolean = false\n\n  /**\n   * Comprimento atual do texto no textarea. É atualizado sempre que o valor do textarea muda.\n   */\n  @State() currentLength: number\n\n  componentWillLoad() {\n    this.currentLength = this.value?.length || 0\n  }\n\n  /**\n   * Valor atualizado do textarea\n   */\n  @Event() valueChange: EventEmitter<string>\n\n  @Watch('value')\n  valueChanged() {\n    this.currentLength = this.value?.length || 0\n  }\n\n  private readonly handleInput = (event: Event) => {\n    this.value = (event.target as HTMLInputElement).value\n    this.currentLength = this.value?.length || 0\n    this.valueChange.emit(this.value)\n  }\n\n  /**\n   * Define um novo valor para o textarea.\n   * @param newValue - O novo valor a ser definido.\n   */\n  @Method()\n  async setValue(newValue: string) {\n    this.value = newValue\n    this.currentLength = this.value?.length || 0\n    this.valueChange.emit(this.value)\n  }\n\n  /**\n   * Retorna os ids para o atributo aria-describedby do textarea\n   */\n  private getDescribedBy(): string {\n    return [this.showCounter ? `${this.customId}-limitMax` : null, `${this.customId}-slotInfo`]\n      .filter(Boolean)\n      .join(' ')\n  }\n\n  /**\n   * Determina o texto a ser usado para acessibilidade quando não há label\n   * Ordem de prioridade:\n   *  - aria-label do elemento host\n   *  - propriedade ariaLabel do componente\n   *  - placeholder\n   *  - texto padrão (\"Campo de texto\")\n   */\n  private getAccessibilityLabel(): string {\n    const hostAriaLabel = this.el.getAttribute('aria-label')\n\n    return hostAriaLabel && hostAriaLabel.trim() !== ''\n      ? hostAriaLabel\n      : this.ariaLabel && this.ariaLabel.trim() !== ''\n        ? this.ariaLabel\n        : this.placeholder && this.placeholder.trim() !== ''\n          ? this.placeholder\n          : 'Campo de texto'\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-textarea': true,\n      small: this.density === 'small',\n      medium: this.density === 'medium',\n      large: this.density === 'large',\n      success: this.state === 'success',\n      danger: this.state === 'danger',\n      warning: this.state === 'warning',\n    }\n  }\n\n  render() {\n    const caracteresRestantes: number = this.maxlength - this.currentLength\n    const mostrarLimite = this.currentLength > 0\n    const hasLabel = !!this.label\n\n    return (\n      <Host>\n        <div class={this.getCssClassMap()}>\n          <div class={this.isInline ? 'row' : ''}>\n            {this.isInline ? (\n              <div class=\"col-auto pt-half\">\n                <label htmlFor={this.customId}>{this.label}</label>\n              </div>\n            ) : (\n              <label htmlFor={this.customId}>{this.label}</label>\n            )}\n\n            <div class={this.isInline ? 'col' : ''}>\n              <textarea\n                id={this.customId}\n                value={this.value}\n                placeholder={this.placeholder}\n                disabled={this.disabled}\n                onInput={this.handleInput}\n                {...(this.maxlength > 0 ? { maxLength: this.maxlength } : {})}\n                aria-describedby={this.getDescribedBy()}\n                {...(!hasLabel ? { 'aria-label': this.getAccessibilityLabel() } : {})}\n              ></textarea>\n              <div class=\"text-base mt-1\">\n                {this.showCounter && (\n                  <div>\n                    {mostrarLimite ? (\n                      <span class=\"restantes\" aria-live=\"polite\" role=\"status\" id={`${this.customId}-limitMax`}>\n                        Restam <strong>{caracteresRestantes}</strong> caracteres\n                      </span>\n                    ) : (\n                      <span class=\"limit\" aria-live=\"polite\" id={`${this.customId}-limitMax`}>\n                        Limite máximo de <strong>{this.maxlength}</strong> caracteres\n                      </span>\n                    )}\n                  </div>\n                )}\n              </div>\n              <div id={`${this.customId}-slotInfo`} aria-live=\"polite\">\n                <slot></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    )\n  }\n}\n\nlet textareaId = 0\n"],"mappings":"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","ignoreList":[]}