@govbr-ds/webcomponents
Version:
Biblioteca de Web Components baseado no GovBR-DS
376 lines (375 loc) • 15 kB
JavaScript
/*!
* Construído por SERPRO
* © https://serpro.gov.br/ - MIT License.
*/
import { h, Host } from "@stencil/core";
/**
* Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/button?tab=designer).
*
* @slot default - Espaço de conteúdo do button. Geralmente usado para incluir o rótulo.
* @part slot-content - Espaço de conteúdo do botão. Geralmente usado para incluir o rótulo.
*/
export class Button {
/**
* Referência ao elemento host do componente.
* Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
*/
el;
elementInternals;
/**
* Define se o botão usará um esquema de cores escuro.
*/
colorMode;
/**
* Identificador único.
* Caso não seja fornecido, um ID gerado automaticamente será usado.
*/
customId = `br-button-${buttonId++}`;
/**
* Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.
*/
density = 'medium';
/**
* Desativa o botão, tornando-o não interativo.
*/
disabled = false;
/**
* Define a ênfase do botão, alterando sua aparência para criar hierarquia visual e destacar ações importantes.
*/
emphasis;
/**
* Indica se o botão está no estado ativo.
* Se definido como verdadeiro, o botão será exibido como ativo.
*/
isActive = false;
/**
* Aplica o estado de "progresso" ao botão.
* O botão exibirá um indicador de carregamento ou progresso.
*/
isLoading = false;
/**
* Define o formato do botão.
* Valores possíveis:
* - 'circle': Botão com formato circular.
* - 'block': Botão com formato ovalado ocupando toda a largura disponível.
* - 'pill': Botão com formato ovalado, com bordas arredondadas.
*/
shape;
/**
* Define o tipo de botão, especificando seu comportamento padrão.
* Valores possíveis:
* - 'button': Um botão padrão.
* - 'reset': Um botão para redefinir o formulário.
* - 'submit': Um botão para enviar o formulário.
*/
type;
/**
* Define o valor inicial do botão em um formulário.
*/
value;
/**
* Define o rótulo acessível do botão.
* Este rótulo é usado por tecnologias assistivas para descrever a função do botão.
* É especialmente importante para botões com formato circular, onde o texto pode não ser visível.
* Se o botão não tiver um rótulo acessível, uma mensagem de aviso será exibida no console.
*/
ariaLabel;
/**
* Define o estado de pressionado do botão.
* Este atributo é usado para indicar se o botão está atualmente pressionado ou não.
* É especialmente útil para botões que podem ser alternados entre os estados pressionado e não pressionado.
* O valor deve ser 'true' ou 'false'.
*/
ariaPressed;
handleClick = () => {
if (this.type === 'submit') {
const submitEvent = new SubmitEvent('submit', {
submitter: this.elementInternals.form,
composed: true,
cancelable: true,
bubbles: true,
});
this.elementInternals.form.dispatchEvent(submitEvent);
}
if (this.type === 'reset') {
this.elementInternals.form.reset();
}
};
componentDidLoad() {
const ariaLabelValue = this.el.getAttribute('aria-label');
if (ariaLabelValue === null || ariaLabelValue === undefined || ariaLabelValue.trim() === '') {
console.warn('[br-button]: Botões circulares devem conter um aria-label.');
}
}
getCssClassMap() {
return {
'br-button': true,
primary: this.emphasis === 'primary',
secondary: this.emphasis === 'secondary',
large: this.density === 'large',
small: this.density === 'small',
block: this.shape === 'block',
circle: this.shape === 'circle',
active: this.isActive,
loading: this.isLoading,
'dark-mode': this.colorMode === 'dark',
};
}
render() {
return (h(Host, { key: '053eeae84a3e81a5c7b1c53311c73924e31ed6b7', "aria-disabled": this.disabled ? 'true' : null, role: "button" }, h("button", { key: '41bc155cab50c311a759989602976e20eebb509a', part: "button", "aria-label": this.shape === 'circle' ? this.ariaLabel : null, "aria-pressed": this.ariaPressed, class: this.getCssClassMap(), type: this.type, id: this.customId, disabled: this.disabled, value: this.value, onClick: this.handleClick }, h("slot", { key: '7db1ee1285d022e48f5bca30f81f9a41b1585882' }))));
}
static get is() { return "br-button"; }
static get encapsulation() { return "shadow"; }
static get formAssociated() { return true; }
static get originalStyleUrls() {
return {
"$": ["button.scss"]
};
}
static get styleUrls() {
return {
"$": ["button.css"]
};
}
static get properties() {
return {
"colorMode": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'dark'",
"resolved": "\"dark\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Define se o bot\u00E3o usar\u00E1 um esquema de cores escuro."
},
"getter": false,
"setter": false,
"attribute": "color-mode",
"reflect": true
},
"customId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Identificador \u00FAnico.\nCaso n\u00E3o seja fornecido, um ID gerado automaticamente ser\u00E1 usado."
},
"getter": false,
"setter": false,
"attribute": "custom-id",
"reflect": true,
"defaultValue": "`br-button-${buttonId++}`"
},
"density": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'large' | 'medium' | 'small'",
"resolved": "\"large\" | \"medium\" | \"small\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Ajusta a densidade, alterando o espa\u00E7amento interno para um visual mais compacto ou mais expandido."
},
"getter": false,
"setter": false,
"attribute": "density",
"reflect": true,
"defaultValue": "'medium'"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Desativa o bot\u00E3o, tornando-o n\u00E3o interativo."
},
"getter": false,
"setter": false,
"attribute": "disabled",
"reflect": true,
"defaultValue": "false"
},
"emphasis": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'primary' | 'secondary' | 'tertiary'",
"resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Define a \u00EAnfase do bot\u00E3o, alterando sua apar\u00EAncia para criar hierarquia visual e destacar a\u00E7\u00F5es importantes."
},
"getter": false,
"setter": false,
"attribute": "emphasis",
"reflect": true
},
"isActive": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Indica se o bot\u00E3o est\u00E1 no estado ativo.\nSe definido como verdadeiro, o bot\u00E3o ser\u00E1 exibido como ativo."
},
"getter": false,
"setter": false,
"attribute": "is-active",
"reflect": true,
"defaultValue": "false"
},
"isLoading": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Aplica o estado de \"progresso\" ao bot\u00E3o.\nO bot\u00E3o exibir\u00E1 um indicador de carregamento ou progresso."
},
"getter": false,
"setter": false,
"attribute": "is-loading",
"reflect": true,
"defaultValue": "false"
},
"shape": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'circle' | 'block' | 'pill'",
"resolved": "\"block\" | \"circle\" | \"pill\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Define o formato do bot\u00E3o.\nValores poss\u00EDveis:\n- 'circle': Bot\u00E3o com formato circular.\n- 'block': Bot\u00E3o com formato ovalado ocupando toda a largura dispon\u00EDvel.\n- 'pill': Bot\u00E3o com formato ovalado, com bordas arredondadas."
},
"getter": false,
"setter": false,
"attribute": "shape",
"reflect": true
},
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'button' | 'reset' | 'submit'",
"resolved": "\"button\" | \"reset\" | \"submit\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Define o tipo de bot\u00E3o, especificando seu comportamento padr\u00E3o.\nValores poss\u00EDveis:\n- 'button': Um bot\u00E3o padr\u00E3o.\n- 'reset': Um bot\u00E3o para redefinir o formul\u00E1rio.\n- 'submit': Um bot\u00E3o para enviar o formul\u00E1rio."
},
"getter": false,
"setter": false,
"attribute": "type",
"reflect": true
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Define o valor inicial do bot\u00E3o em um formul\u00E1rio."
},
"getter": false,
"setter": false,
"attribute": "value",
"reflect": true
},
"ariaLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Define o r\u00F3tulo acess\u00EDvel do bot\u00E3o.\nEste r\u00F3tulo \u00E9 usado por tecnologias assistivas para descrever a fun\u00E7\u00E3o do bot\u00E3o.\n\u00C9 especialmente importante para bot\u00F5es com formato circular, onde o texto pode n\u00E3o ser vis\u00EDvel.\nSe o bot\u00E3o n\u00E3o tiver um r\u00F3tulo acess\u00EDvel, uma mensagem de aviso ser\u00E1 exibida no console."
},
"getter": false,
"setter": false,
"attribute": "aria-label",
"reflect": true
},
"ariaPressed": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Define o estado de pressionado do bot\u00E3o.\nEste atributo \u00E9 usado para indicar se o bot\u00E3o est\u00E1 atualmente pressionado ou n\u00E3o.\n\u00C9 especialmente \u00FAtil para bot\u00F5es que podem ser alternados entre os estados pressionado e n\u00E3o pressionado.\nO valor deve ser 'true' ou 'false'."
},
"getter": false,
"setter": false,
"attribute": "aria-pressed",
"reflect": true
}
};
}
static get elementRef() { return "el"; }
static get attachInternalsMemberName() { return "elementInternals"; }
}
let buttonId = 0;
//# sourceMappingURL=button.js.map