@govbr-ds/webcomponents
Version:
Biblioteca de Web Components baseado no GovBR-DS
389 lines (388 loc) • 14.7 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/switch?tab=designer).
*
* @slot default - Descreve o que o switch faz quando a alternância estiver ativada. A label passada por slot tem precedência sobre a propriedade 'label'.
*/
export class Switch {
/**
* Referência ao elemento host do componente.
* Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
*/
el;
elementInternals;
/**
* Desativa o switch, tornando-o não interativo.
*/
disabled = 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-switch-${switchId++}`;
/**
* Texto descritivo.
* Caso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade será ignorado.
*/
label;
/**
* Posição do rótulo em relação ao switch.
*/
labelPosition = 'left';
/**
* Texto exibido quando o switch está ativado.
*/
labelOn;
/**
* Texto exibido quando o switch está desativado.
*/
labelOff;
/**
* Adiciona um ícone ao switch para indicar a mudança de estado.
*/
hasIcon = false;
/**
* Define o nome do switch, que é utilizado para agrupar switches em formulários e identificar o campo.
* O valor é obrigatório e deve ser fornecido para garantir o correto funcionamento em formulários.
*/
name;
/**
* Define o valor associado ao switch quando ele faz parte de um formulário nativo (`<form>`).
* Esse valor é enviado com o formulário quando o switch está selecionado.
* **Nota:** Esta propriedade não deve ser utilizada para determinar se o switch está selecionado; para verificar o estado de seleção, use a propriedade `checked`.
*/
value;
/** O ajuste da densidade consiste em aumentar ou reduzir a área de interação do switch. Quanto menor for a densidade, maior a área de interação. */
density = 'medium';
// Propriedade interna para verificar a presença de conteúdo no slot default
_slotDefault = false;
componentWillLoad() {
this._hasSlotContentDefault();
}
/**
* Disparado depois que o valor do `checked` foi alterado
*/
/**
* Disparado depois que o valor do `checked` foi alterado
*/
checkedChange;
_hasSlotContentDefault() {
this._slotDefault = this.el.innerHTML !== '';
}
handleCheckedChange = (event) => {
this.checked = event.target.checked;
this.checkedChange.emit(this.checked);
};
handleClick = (event) => {
event.stopPropagation();
};
/**
* Inverte o valor da prop `checked`
*/
async toggleChecked() {
this.checked = !this.checked;
this.checkedChange.emit(this.checked);
}
getCssClassMap() {
return {
'br-switch': true,
icon: this.hasIcon,
top: this.labelPosition === 'top',
right: this.labelPosition === 'right',
large: this.density === 'large',
small: this.density === 'small',
};
}
render() {
return (h(Host, { key: '03094be65caec9f2bb90886bad2333c65724e1ba' }, h("div", { key: 'f89c4ee3972c18481a7cb767ad6db9a9778ec706', class: this.getCssClassMap() }, h("input", { key: '4d43f753c15d9a794479a8f3804dc825a0a9f427', id: this.customId, type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, role: "switch", "aria-checked": this.checked.toString(), "aria-disabled": this.disabled ? 'true' : null, onChange: this.handleCheckedChange, onClick: this.handleClick }), h("label", { key: '090e32a34a35c81a4e0310ef900ff82d37d8eb45', htmlFor: this.customId }, this._slotDefault ? h("slot", null) : this.label), this.labelOn && this.labelOff && (h("div", { key: 'c102080bf03226e16ab99641b8348af8c201efcc', class: "switch-data", "data-enabled": this.labelOn, "data-disabled": this.labelOff })))));
}
static get is() { return "br-switch"; }
static get encapsulation() { return "shadow"; }
static get formAssociated() { return true; }
static get originalStyleUrls() {
return {
"$": ["switch.scss"]
};
}
static get styleUrls() {
return {
"$": ["switch.css"]
};
}
static get properties() {
return {
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Desativa o switch, tornando-o n\u00E3o interativo."
},
"getter": false,
"setter": false,
"attribute": "disabled",
"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-switch-${switchId++}`"
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Texto descritivo.\nCaso um slot seja utilizado para fornecer um texto alternativo, o valor desta propriedade ser\u00E1 ignorado."
},
"getter": false,
"setter": false,
"attribute": "label",
"reflect": false
},
"labelPosition": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'right' | 'left' | 'top'",
"resolved": "\"left\" | \"right\" | \"top\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Posi\u00E7\u00E3o do r\u00F3tulo em rela\u00E7\u00E3o ao switch."
},
"getter": false,
"setter": false,
"attribute": "label-position",
"reflect": true,
"defaultValue": "'left'"
},
"labelOn": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Texto exibido quando o switch est\u00E1 ativado."
},
"getter": false,
"setter": false,
"attribute": "label-on",
"reflect": true
},
"labelOff": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Texto exibido quando o switch est\u00E1 desativado."
},
"getter": false,
"setter": false,
"attribute": "label-off",
"reflect": true
},
"hasIcon": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Adiciona um \u00EDcone ao switch para indicar a mudan\u00E7a de estado."
},
"getter": false,
"setter": false,
"attribute": "has-icon",
"reflect": true,
"defaultValue": "false"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Define o nome do switch, que \u00E9 utilizado para agrupar switches 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
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Define o valor associado ao switch quando ele faz parte de um formul\u00E1rio nativo (`<form>`).\nEsse valor \u00E9 enviado com o formul\u00E1rio quando o switch est\u00E1 selecionado.\n**Nota:** Esta propriedade n\u00E3o deve ser utilizada para determinar se o switch est\u00E1 selecionado; para verificar o estado de sele\u00E7\u00E3o, use a propriedade `checked`."
},
"getter": false,
"setter": false,
"attribute": "value",
"reflect": true
},
"density": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'large' | 'medium' | 'small'",
"resolved": "\"large\" | \"medium\" | \"small\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "O ajuste da densidade consiste em aumentar ou reduzir a \u00E1rea de intera\u00E7\u00E3o do switch. Quanto menor for a densidade, maior a \u00E1rea de intera\u00E7\u00E3o."
},
"getter": false,
"setter": false,
"attribute": "density",
"reflect": true,
"defaultValue": "'medium'"
}
};
}
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": {}
}
}];
}
static get methods() {
return {
"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 attachInternalsMemberName() { return "elementInternals"; }
}
let switchId = 0;
//# sourceMappingURL=switch.js.map