@govbr-ds/webcomponents
Version:
Biblioteca de Web Components baseado no GovBR-DS
261 lines (260 loc) • 9.5 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/list?tab=designer).
*
* @slot default - Slot padrão para inclusão dos itens da lista.
* @slot header - Slot nomeado para inclusão de ações relacionadas ao cabeçalho do list (uso de botões por exemplo).
*/
export class List {
/**
* 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 cabeçalho para a lista.
*/
header = null;
/**
* Indica se a lista será horizontal. Por padrão, a lista é vertical.
*/
isHorizontal = false;
/**
* Identificador único.
* Caso não seja fornecido, um ID gerado automaticamente será usado.
*/
customId = `br-list-${listId++}`;
/**
* Indica que o divider para o título da lista estará oculto.
*/
hideHeaderDivider = false;
/**
* Indica se a lista possui o comportamento de collapse.
*/
collapse = false;
/**
* Indica se a lista possui o comportamento de accordion.
* O valor da propriedade define o grupo, ou seja, o accordion é aplicado a todas as listas que possuem o mesmo valor para esta propriedade.
*/
accordion = null;
/**
* Método do ciclo de vida do componente, que é chamado uma vez após o componente começar a ser renderizado no DOM.
*/
componentDidLoad() {
if (this.isHorizontal) {
const slotItems = Array.from(this.el.querySelectorAll('br-item'));
slotItems.forEach((item) => {
const nextElement = item.nextElementSibling;
if (nextElement?.classList.contains('br-divider')) {
const divider = nextElement;
divider.style.borderWidth = '0 1px 0 0';
divider.style.width = '1px';
}
});
}
// adicionar role="listitem" para os itens dentro do slot
const items = Array.from(this.el.querySelectorAll('br-item'));
items.forEach((item) => {
item.setAttribute('role', 'listitem');
});
}
/**
* Método que retorna as classes CSS do componente
* @returns Objeto com as classes CSS do componente
*/
getCssClassMap() {
return {
'br-list': true,
horizontal: this.isHorizontal,
};
}
/**
* Verifica se o slot possui conteúdo.
* @param slotName Nome do slot a ser verificado.
* @returns true se o slot possui conteúdo, false caso contrário.
*/
hasSlotContent(slotName) {
const directChildren = Array.from(this.el.querySelectorAll(`[slot="${slotName}"]`)).filter((child) => child.parentElement === this.el);
return Boolean(directChildren.length);
}
/**
* Renderiza o cabeçalho da lista.
* @returns JSX do cabeçalho da lista
*/
renderHeader = () => {
if (this.header?.length > 0 || this.hasSlotContent('header')) {
return (h("div", { class: !this.hasSlotContent('header') ? 'header' : null, slot: this.collapse || Boolean(this.accordion) ? 'trigger' : null }, h("slot", { name: "header" }, !this.hasSlotContent('header') ? h("div", { class: "title" }, this.header) : null)));
}
return null;
};
/**
* Renderiza o divider do cabeçalho.
* @returns JSX do divider
*/
renderDivider() {
if ((this.header || this.hasSlotContent('header')) && !this.hideHeaderDivider) {
return h("div", { class: "br-divider" });
}
return null;
}
/**
* Renderiza o corpo da lista.
* @returns JSX do corpo da lista.
*/
renderListBody() {
return [this.renderHeader(), this.renderDivider(), h("slot", null)];
}
/**
* Renderiza o componente.
* @returns JSX do componente
*/
render() {
return (h(Host, { key: '207b67a6cad4399daf1ccb6750a01d1c80ef3cb8', role: "list" }, h("div", { key: '4543ca47a0b5d24f71afe9a6daa6c7aedc756fc5', class: this.getCssClassMap(), id: this.customId }, Boolean(this.accordion) || this.collapse ? (h("br-collapse", { "accordion-group": this.accordion || null }, this.renderListBody())) : (this.renderListBody()))));
}
static get is() { return "br-list"; }
static get encapsulation() { return "shadow"; }
static get formAssociated() { return true; }
static get originalStyleUrls() {
return {
"$": ["list.scss"]
};
}
static get styleUrls() {
return {
"$": ["list.css"]
};
}
static get properties() {
return {
"header": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Define o cabe\u00E7alho para a lista."
},
"getter": false,
"setter": false,
"attribute": "header",
"reflect": true,
"defaultValue": "null"
},
"isHorizontal": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Indica se a lista ser\u00E1 horizontal. Por padr\u00E3o, a lista \u00E9 vertical."
},
"getter": false,
"setter": false,
"attribute": "is-horizontal",
"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-list-${listId++}`"
},
"hideHeaderDivider": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Indica que o divider para o t\u00EDtulo da lista estar\u00E1 oculto."
},
"getter": false,
"setter": false,
"attribute": "hide-header-divider",
"reflect": true,
"defaultValue": "false"
},
"collapse": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Indica se a lista possui o comportamento de collapse."
},
"getter": false,
"setter": false,
"attribute": "collapse",
"reflect": true,
"defaultValue": "false"
},
"accordion": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Indica se a lista possui o comportamento de accordion.\nO valor da propriedade define o grupo, ou seja, o accordion \u00E9 aplicado a todas as listas que possuem o mesmo valor para esta propriedade."
},
"getter": false,
"setter": false,
"attribute": "accordion",
"reflect": true,
"defaultValue": "null"
}
};
}
static get elementRef() { return "el"; }
static get attachInternalsMemberName() { return "elementInternals"; }
}
let listId = 0;
//# sourceMappingURL=list.js.map