@govbr-ds/webcomponents
Version:
Biblioteca de Web Components baseado no GovBR-DS
552 lines (551 loc) • 23.9 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/step?tab=designer).
*
* @slot nomeado label-area: insere o conteúdo customizado dentro do botão que compõe o componente.
*/
export class StepItem {
/**
* Referência ao elemento host do componente.
* Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
*/
el;
elementInternals;
/**
* Propriedade que define o conteúdo do texto auxiliar de realce do item de Step.
*/
label = '';
/**
* Propriedade que define o tipo de ícone de destaque exibido pelo item Step, com quatro opções disponíveis: "success", "info", "danger" e "warning".
*/
highlight;
/**
* Propriedade que define se o item Step está com estado ativo.
*/
active = false;
/**
* Propriedade que define se o item Step está com estado desativado..
*/
disabled = false;
/**
* Propriedade Define o nome do ícone do componente BRIcon que será exibido como conteúdo do step item, propriedade funciona apenas quando o state contentType assume o valor br-icon.
*/
brIconName = '';
/**
* Propriedade Define o nome do ícone o texto de acessibilidade apresentando quando o tipo de conteúdo for o br-icon
*/
brIconAria = '';
showTimeLine = false;
stepItemPositionStatus = 'first';
stepLayout = 'horizontal';
labelPosition = 'bottom';
contentType = 'default';
mode = 'step';
content = '';
ariaLabelContent = '';
/**
* Emite um evento após o componente ter sido carregado pela primeira vez.
* Utilize este evento para realizar ações que devem ocorrer antes que o componente seja renderizado ou atualizado.
* Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.
*/
brWillRender;
componentWillRender() {
let accessibilityContent = '';
let activeItem = '';
if (this.contentType === 'slotted') {
const slotedContent = this.el.lastElementChild;
accessibilityContent =
this.label !== ''
? `passo ${this.content} ${slotedContent.textContent} ${this.label} ${this.highLightAriaLabel[this.highlight]}`
: `passo ${this.content} ${slotedContent.textContent} ${this.highLightAriaLabel[this.highlight]}`;
this.ariaLabelContent = accessibilityContent;
return;
}
if (this.contentType === 'br-icon') {
accessibilityContent =
`passo ${this.content} ` + this.brIconAria + this.label + this.highLightAriaLabel[this.highlight];
activeItem = this.active === true ? accessibilityContent + ' selecionado' : accessibilityContent;
this.ariaLabelContent = activeItem;
return;
}
else {
accessibilityContent =
this.label !== ''
? `passo ${this.content} ${this.label} ${this.highLightAriaLabel[this.highlight]}`
: `passo ${this.content} ${this.highLightAriaLabel[this.highlight]}`;
activeItem = this.active === true ? accessibilityContent + ' selecionado' : accessibilityContent;
this.ariaLabelContent = activeItem;
}
}
/**
* Emite um evento após o componente ter sido carregado pela primeira vez.
* Utilize este evento para realizar ações que devem ocorrer antes que o componente seja renderizado ou atualizado.
* Consulte a documentação do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes.
*/
brDidRender;
componentDidRender() {
const button = this.el.shadowRoot.getElementById('indicator-area').lastElementChild.shadowRoot;
if (button !== null) {
button.lastElementChild.setAttribute('role', 'option');
button.lastElementChild.setAttribute('aria-selected', `${this.active}`);
button.lastElementChild.setAttribute('aria-label', this.ariaLabelContent);
}
}
/**
* Watch que observa o valor da propriedade active, e ao alterar seu valor este método altera o valor do campo de acessibilidade aria-selected
*/
watchItemIsActive(newValue, oldValue) {
if (newValue !== oldValue) {
const button = this.el.shadowRoot.getElementById('indicator-area').lastElementChild.shadowRoot;
if (button !== null) {
button.lastElementChild.setAttribute('aria-selected', `${this.active}`);
}
}
}
/**
*
* Método disponibilizado via api do elemento que indica a posição do step item, ele serve para setar o state stepItemPositionStatus do componente
*/
async setStepItemPositionStatus(value) {
this.stepItemPositionStatus = value;
}
/**
* Método que define a orientação do stepItem e controla a exibição da linha do tempo após o componente.
*/
async handleShowTimeLine(value, layout) {
this.showTimeLine = value;
this.stepLayout = layout;
}
/**
*
* Método disponibilizado via api do elemento que atribui o valor ao estado que define onde o label, o texto de destaque, irá ficar localizado
*/
async setLabelPosition(value) {
this.labelPosition = value;
}
/**
*
* Método disponibilizado via api do elemento que atribui o valor que irá definir o tipo de conteúdo apresentado dentro do componente stepItem
*/
async setContentType(value) {
this.contentType = value;
}
/**
*
* Método disponibilizado via api do elemento que atribui o valor que irá definir o modo como o componente irá se comportar e exibir seu estilo.
*/
async setMode(value) {
this.mode = value;
}
/**
*
* Método disponibilizado via api do elemento que atribui o valor que irá ser exibido dentro do componente stepItem
*/
async setContent(value) {
this.content = value;
}
getStepContainerClassMap() {
return {
'step-item-container-horizontal': this.stepLayout === 'horizontal',
'step-item-container-vertical': this.stepLayout === 'vertical',
last: this.stepItemPositionStatus == 'last',
'label-top': this.labelPosition === 'top',
'label-left': this.labelPosition === 'left',
'label-right': this.labelPosition === 'right',
'label-bottom': this.labelPosition === 'bottom' && this.label !== '',
controller: this.mode === 'controller',
'disabled-div': true,
};
}
getStepItemContentClassMap() {
return {
'step-item-content': true,
'label-bottom': this.labelPosition === 'bottom',
'label-top': this.labelPosition === 'top',
'label-left': this.labelPosition === 'left',
'label-right': this.labelPosition === 'right',
timeline: this.showTimeLine === true,
middle: this.stepItemPositionStatus === 'middle',
first: this.stepItemPositionStatus === 'first',
controller: this.mode === 'controller',
};
}
getStepItemIndicatorAreaClassMap() {
return {
'step-item-indicator-area': true,
};
}
getStepItemLabelAreaClassMap() {
return {
'step-item-label-area': true,
vertical: this.stepLayout === 'vertical',
horizontal: this.stepLayout === 'horizontal',
'label-bottom': this.labelPosition === 'bottom',
'label-top': this.labelPosition === 'top',
'label-left': this.labelPosition === 'left',
'label-right': this.labelPosition === 'right',
'no-label': this.label === '',
};
}
getHighlightClass() {
return {
icon: true,
success: this.highlight === 'success',
info: this.highlight === 'info',
warning: this.highlight === 'warning',
danger: this.highlight === 'danger',
'no-content': this.contentType === 'no-content',
};
}
getStepItemIndicatorClass() {
return {
'step-button': true,
controller: this.mode === 'controller',
'disabled-host': this.disabled,
};
}
highLightAriaLabel = {
success: 'passo completo',
info: 'passo com item informativo',
warning: 'passo com alerta',
danger: 'passo com erro',
undefined: '',
};
IconsName = {
success: 'fa-check',
info: 'fa-info-circle',
warning: 'fa-exclamation-triangle',
danger: 'fa-times',
};
render() {
return (h(Host, { key: '6cf01da534a3950f4fb85069463f9e18e06b9dc3' }, h("div", { key: '01cbf4222cff66c2b1788fc66048a6ab0d766ac3', id: "item-container", class: this.getStepContainerClassMap() }, h("div", { key: '125ad4e5b3676ae852c98d5b61b18f48fede612f', id: "item-content", class: this.getStepItemContentClassMap() }, h("div", { key: '9760fb9d0dfeaccf72ab719df39e9b210dba1633', id: "indicator-area", "data-active": this.active, class: this.getStepItemIndicatorAreaClassMap() }, this.mode === 'step' && this.highlight && (h("div", { key: 'f1f4350574e2d40590c8d210bf4070973b7e57bf', class: this.getHighlightClass() }, h("br-icon", { key: '6a4bdedd07e3e9c934dee6ce0c78cf61053342eb', "icon-name": this.IconsName[this.highlight], class: `${this.highlight === 'warning' && 'warning-color'}` }))), this.mode === 'step' && (h("br-button", { key: 'd5b79ea7374859da5bf290446f9f10e583ac484f', shape: "circle", emphasis: "secondary", isActive: this.active, class: this.getStepItemIndicatorClass() }, this.contentType === 'no-content' && '', this.contentType === 'default' && this.content, this.contentType === 'br-icon' && (h("br-icon", { key: '3db1b3cddd84db5ecebf5563abce26488b2e616f', "icon-name": this.brIconName, class: 'content-type-br-icon' })), this.contentType === 'slotted' && h("slot", { key: '2aa180cf7deabbb69fb423629ff10ffc3ab47e89', name: 'content-area' }))), this.mode === 'controller' && h("button", { key: 'b52326862325b6c961bc6aaab4fed7b8b7e564a7', "data-active": this.active, class: 'mode-controller' })), h("div", { key: '7598332a38d27003736a6c314529943b15f6bc83', id: "label-area", class: this.getStepItemLabelAreaClassMap() }, h("span", { key: '2402107cf893ea8de93253c7ad6db0ebff72de62' }, " ", this.label, " "))))));
}
static get is() { return "br-step-item"; }
static get encapsulation() { return "shadow"; }
static get formAssociated() { return true; }
static get originalStyleUrls() {
return {
"$": ["step-item.scss"]
};
}
static get styleUrls() {
return {
"$": ["step-item.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Propriedade que define o conte\u00FAdo do texto auxiliar de realce do item de Step."
},
"getter": false,
"setter": false,
"attribute": "label",
"reflect": true,
"defaultValue": "''"
},
"highlight": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'success' | 'info' | 'danger' | 'warning'",
"resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Propriedade que define o tipo de \u00EDcone de destaque exibido pelo item Step, com quatro op\u00E7\u00F5es dispon\u00EDveis: \"success\", \"info\", \"danger\" e \"warning\"."
},
"getter": false,
"setter": false,
"attribute": "highlight",
"reflect": true
},
"active": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Propriedade que define se o item Step est\u00E1 com estado ativo."
},
"getter": false,
"setter": false,
"attribute": "active",
"reflect": true,
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Propriedade que define se o item Step est\u00E1 com estado desativado.."
},
"getter": false,
"setter": false,
"attribute": "disabled",
"reflect": true,
"defaultValue": "false"
},
"brIconName": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Propriedade Define o nome do \u00EDcone do componente BRIcon que ser\u00E1 exibido como conte\u00FAdo do step item, propriedade funciona apenas quando o state contentType assume o valor br-icon."
},
"getter": false,
"setter": false,
"attribute": "br-icon-name",
"reflect": true,
"defaultValue": "''"
},
"brIconAria": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Propriedade Define o nome do \u00EDcone o texto de acessibilidade apresentando quando o tipo de conte\u00FAdo for o br-icon"
},
"getter": false,
"setter": false,
"attribute": "br-icon-aria",
"reflect": true,
"defaultValue": "''"
}
};
}
static get states() {
return {
"showTimeLine": {},
"stepItemPositionStatus": {},
"stepLayout": {},
"labelPosition": {},
"contentType": {},
"mode": {},
"content": {},
"ariaLabelContent": {}
};
}
static get events() {
return [{
"method": "brWillRender",
"name": "brWillRender",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emite um evento ap\u00F3s o componente ter sido carregado pela primeira vez.\nUtilize este evento para realizar a\u00E7\u00F5es que devem ocorrer antes que o componente seja renderizado ou atualizado.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "brDidRender",
"name": "brDidRender",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emite um evento ap\u00F3s o componente ter sido carregado pela primeira vez.\nUtilize este evento para realizar a\u00E7\u00F5es que devem ocorrer antes que o componente seja renderizado ou atualizado.\nConsulte a documenta\u00E7\u00E3o do [Stencil](https://stenciljs.com/docs/component-lifecycle#componentdidload) para mais detalhes."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}];
}
static get methods() {
return {
"setStepItemPositionStatus": {
"complexType": {
"signature": "(value: \"first\" | \"middle\" | \"last\") => Promise<void>",
"parameters": [{
"name": "value",
"type": "\"first\" | \"middle\" | \"last\"",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "\nM\u00E9todo disponibilizado via api do elemento que indica a posi\u00E7\u00E3o do step item, ele serve para setar o state stepItemPositionStatus do componente",
"tags": []
}
},
"handleShowTimeLine": {
"complexType": {
"signature": "(value: boolean, layout: any) => Promise<void>",
"parameters": [{
"name": "value",
"type": "boolean",
"docs": ""
}, {
"name": "layout",
"type": "any",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "M\u00E9todo que define a orienta\u00E7\u00E3o do stepItem e controla a exibi\u00E7\u00E3o da linha do tempo ap\u00F3s o componente.",
"tags": []
}
},
"setLabelPosition": {
"complexType": {
"signature": "(value: \"top\" | \"right\" | \"bottom\" | \"left\") => Promise<void>",
"parameters": [{
"name": "value",
"type": "\"right\" | \"top\" | \"bottom\" | \"left\"",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "\nM\u00E9todo disponibilizado via api do elemento que atribui o valor ao estado que define onde o label, o texto de destaque, ir\u00E1 ficar localizado",
"tags": []
}
},
"setContentType": {
"complexType": {
"signature": "(value: \"default\" | \"br-icon\" | \"no-content\" | \"slotted\") => Promise<void>",
"parameters": [{
"name": "value",
"type": "\"default\" | \"br-icon\" | \"no-content\" | \"slotted\"",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "\nM\u00E9todo disponibilizado via api do elemento que atribui o valor que ir\u00E1 definir o tipo de conte\u00FAdo apresentado dentro do componente stepItem",
"tags": []
}
},
"setMode": {
"complexType": {
"signature": "(value: \"controller\" | \"step\") => Promise<void>",
"parameters": [{
"name": "value",
"type": "\"step\" | \"controller\"",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "\nM\u00E9todo disponibilizado via api do elemento que atribui o valor que ir\u00E1 definir o modo como o componente ir\u00E1 se comportar e exibir seu estilo.",
"tags": []
}
},
"setContent": {
"complexType": {
"signature": "(value: string) => Promise<void>",
"parameters": [{
"name": "value",
"type": "string",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "\nM\u00E9todo disponibilizado via api do elemento que atribui o valor que ir\u00E1 ser exibido dentro do componente stepItem",
"tags": []
}
}
};
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "active",
"methodName": "watchItemIsActive"
}];
}
static get attachInternalsMemberName() { return "elementInternals"; }
}
//# sourceMappingURL=step-item.js.map