@govbr-ds/webcomponents
Version:
Biblioteca de Web Components baseado no GovBR-DS
424 lines (423 loc) • 16.6 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/checkbox?tab=designer).
*
* @slot default - O texto descritivo pode ser passado por propriedade (label) ou por slot.
*/
export class Checkbox {
/**
* Referência ao elemento host do componente.
* Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
*/
el;
elementInternals;
/**
* Define o estado intermediário do checkbox.
* Quando verdadeiro, exibe uma marcação parcial visual que indica seleção parcial.
* Útil para representar grupos onde alguns itens estão selecionados, mas não todos.
* Ao clicar no checkbox neste estado, ele será automaticamente alterado para marcado.
*/
indeterminate = false;
/**
* Define o estado de seleção do checkbox.
* Se definido como verdadeiro, o checkbox estará marcado. Caso contrário, estará desmarcado.
*/
checked = false;
/**
* Identificador único.
* Caso não seja fornecido, um ID gerado automaticamente será usado.
*/
customId = `br-checkbox-${checkboxId++}`;
/**
* Desativa o checkbox, tornando-o não interativo.
*/
disabled = false;
/**
* Define se o label associado ao checkbox deve ser oculto.
* Se definido como verdadeiro, o texto do label será oculto, mas o checkbox ainda estará visível e funcional.
*/
hasHiddenLabel = false;
/**
* Texto descritivo exibido à direita do checkbox.
* Caso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade será ignorado.
*/
label;
/**
* Define o nome do checkbox, que é utilizado para agrupar checkboxes em formulários e identificar o campo.
* O valor é obrigatório e deve ser fornecido para garantir o correto funcionamento em formulários.
*/
name;
/**
* Indica a validade do checkbox.
* Valores possíveis:
* 'valid': O checkbox é considerado válido.
* 'invalid': O checkbox é considerado inválido.
* Se não for especificado, o valor padrão é `null`, indicando que a validade não foi definida.
*/
state;
/**
* Define o valor associado ao checkbox quando ele faz parte de um formulário nativo (`<form>`).
* Esse valor é enviado com o formulário quando o checkbox está selecionado.
* **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`.
*/
value;
slotDefault = false;
/**
* Disparado depois que o valor do `checked` foi alterado
*/
checkedChange;
/**
* Disparado depois que o valor do `indeterminate` foi alterado.
*/
indeterminateChange;
updateIndeterminate(newValue) {
const input = this.el.shadowRoot.querySelector('input');
if (input !== null) {
input.indeterminate = newValue;
}
}
componentWillLoad() {
this.hasSlotContentDefault();
}
hasSlotContentDefault() {
this.slotDefault = this.el.innerHTML !== '';
}
getCssClassMap() {
return {
'br-checkbox': true,
valid: this.state === 'valid',
invalid: this.state === 'invalid',
disabled: this.disabled,
'hidden-label': this.hasHiddenLabel,
};
}
getAriaCheckedValue() {
if (this.indeterminate) {
return 'mixed';
}
return this.checked ? 'true' : 'false';
}
handleCheckedChange = () => {
if (this.indeterminate) {
// Sai do estado indeterminado ao clicar e define como marcado
this.indeterminate = false;
this.checked = true;
this.indeterminateChange.emit(this.indeterminate);
}
else {
// Alterna entre marcado e desmarcado
this.checked = !this.checked;
this.indeterminate = false;
}
this.checkedChange.emit(this.checked);
};
/**
* Define o estado indeterminado do checkbox.
* @param value Novo valor para o estado indeterminado.
*/
async setIndeterminate(value) {
this.indeterminate = value;
this.updateIndeterminate(value);
this.indeterminateChange.emit(this.indeterminate);
}
/**
* Inverte o valor da prop `checked`
*/
async toggleChecked() {
this.checked = !this.checked;
this.checkedChange.emit(this.checked);
}
render() {
return (h(Host, { key: 'b8140bc039c827a27ba1152fc769c4c372e6d856' }, h("div", { key: 'c0eed4bfa3e0d07176b5a0bd4492d52e7910787b', class: this.getCssClassMap() }, h("input", { key: '77851d28057919206a706d2d072108cedaaf77ab', type: "checkbox", id: this.customId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, onChange: this.handleCheckedChange, ref: (el) => el && (el.indeterminate = this.indeterminate), "aria-checked": this.getAriaCheckedValue() }), h("label", { key: '223f18ae206722e17a4132325e1d421817fe84be', htmlFor: this.customId, class: this.hasHiddenLabel ? 'visually-hidden' : undefined }, this.slotDefault ? h("slot", null) : this.label))));
}
static get is() { return "br-checkbox"; }
static get encapsulation() { return "shadow"; }
static get formAssociated() { return true; }
static get originalStyleUrls() {
return {
"$": ["checkbox.scss"]
};
}
static get styleUrls() {
return {
"$": ["checkbox.css"]
};
}
static get properties() {
return {
"indeterminate": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Define o estado intermedi\u00E1rio do checkbox.\nQuando verdadeiro, exibe uma marca\u00E7\u00E3o parcial visual que indica sele\u00E7\u00E3o parcial.\n\u00DAtil para representar grupos onde alguns itens est\u00E3o selecionados, mas n\u00E3o todos.\nAo clicar no checkbox neste estado, ele ser\u00E1 automaticamente alterado para marcado."
},
"getter": false,
"setter": false,
"attribute": "indeterminate",
"reflect": true,
"defaultValue": "false"
},
"checked": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Define o estado de sele\u00E7\u00E3o do checkbox.\nSe definido como verdadeiro, o checkbox estar\u00E1 marcado. Caso contr\u00E1rio, estar\u00E1 desmarcado."
},
"getter": false,
"setter": false,
"attribute": "checked",
"reflect": true,
"defaultValue": "false"
},
"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-checkbox-${checkboxId++}`"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Desativa o checkbox, tornando-o n\u00E3o interativo."
},
"getter": false,
"setter": false,
"attribute": "disabled",
"reflect": true,
"defaultValue": "false"
},
"hasHiddenLabel": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Define se o label associado ao checkbox deve ser oculto.\nSe definido como verdadeiro, o texto do label ser\u00E1 oculto, mas o checkbox ainda estar\u00E1 vis\u00EDvel e funcional."
},
"getter": false,
"setter": false,
"attribute": "has-hidden-label",
"reflect": true,
"defaultValue": "false"
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Texto descritivo exibido \u00E0 direita do checkbox.\nCaso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade ser\u00E1 ignorado."
},
"getter": false,
"setter": false,
"attribute": "label",
"reflect": true
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Define o nome do checkbox, que \u00E9 utilizado para agrupar checkboxes em formul\u00E1rios e identificar o campo.\nO valor \u00E9 obrigat\u00F3rio e deve ser fornecido para garantir o correto funcionamento em formul\u00E1rios."
},
"getter": false,
"setter": false,
"attribute": "name",
"reflect": true
},
"state": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'valid' | 'invalid'",
"resolved": "\"invalid\" | \"valid\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Indica a validade do checkbox.\nValores poss\u00EDveis:\n'valid': O checkbox \u00E9 considerado v\u00E1lido.\n'invalid': O checkbox \u00E9 considerado inv\u00E1lido.\nSe n\u00E3o for especificado, o valor padr\u00E3o \u00E9 `null`, indicando que a validade n\u00E3o foi definida."
},
"getter": false,
"setter": false,
"attribute": "state",
"reflect": true
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Define o valor associado ao checkbox quando ele faz parte de um formul\u00E1rio nativo (`<form>`).\nEsse valor \u00E9 enviado com o formul\u00E1rio quando o checkbox est\u00E1 selecionado.\n**Nota:** Esta propriedade n\u00E3o deve ser utilizada para determinar se o checkbox est\u00E1 selecionado; para verificar o estado de sele\u00E7\u00E3o, use a propriedade `checked`."
},
"getter": false,
"setter": false,
"attribute": "value",
"reflect": true
}
};
}
static get states() {
return {
"slotDefault": {}
};
}
static get events() {
return [{
"method": "checkedChange",
"name": "checkedChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Disparado depois que o valor do `checked` foi alterado"
},
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
}
}, {
"method": "indeterminateChange",
"name": "indeterminateChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Disparado depois que o valor do `indeterminate` foi alterado."
},
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
}
}];
}
static get methods() {
return {
"setIndeterminate": {
"complexType": {
"signature": "(value: boolean) => Promise<void>",
"parameters": [{
"name": "value",
"type": "boolean",
"docs": "Novo valor para o estado indeterminado."
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Define o estado indeterminado do checkbox.",
"tags": [{
"name": "param",
"text": "value Novo valor para o estado indeterminado."
}]
}
},
"toggleChecked": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Inverte o valor da prop `checked`",
"tags": []
}
}
};
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "indeterminate",
"methodName": "updateIndeterminate"
}];
}
static get attachInternalsMemberName() { return "elementInternals"; }
}
let checkboxId = 0;
//# sourceMappingURL=checkbox.js.map