@govbr-ds/webcomponents
Version:
Biblioteca de Web Components baseado no GovBR-DS
129 lines (128 loc) • 5.9 kB
JavaScript
/*!
* Construído por SERPRO
* © https://serpro.gov.br/ - MIT License.
*/
import { h, Host } from "@stencil/core";
import Helpers from "../../utils/helpers";
/**
* O componente `br-footer` representa o rodapé do site, de acordo com a documentação de design do GovBR.
* Ele é composto por vários subcomponentes, como [`br-footer-category`](/docs/components/footer-category), [`br-footer-item`](/docs/components/footer-item), [`br-footer-social`](/docs/components/footer-social), [`br-footer-legal`](/docs/components/footer-legal) e [`br-logo`](/docs/components/footer-logo).
* Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/footer?tab=designer).
*
* @slot logo - Área destinada ao logo do rodapé. Utilize o componente `br-logo` para adicionar o logo.
* @slot default - Área destinada ao mapa do site. Utilize o componente `br-footer-category` juntamente com o componente `br-footer-item` para adicionar itens.
* @slot social-network - Área destinada às redes sociais. Utilize o componente `br-footer-social` para adicionar redes sociais.
* @slot partner-logo - Área destinada aos logos de parceiros. Utilize o componente `br-logo` para adicionar os logos.
* @slot legal - Área destinada às informações legais. Utilize o componente `br-footer-legal` para adicionar informações legais.
*/
export class Footer {
/**
* Referência ao elemento host do componente.
* Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
*/
el;
/**
* Identificador único.
* Caso não seja fornecido, um ID gerado automaticamente será usado.
*/
customId = Helpers.generateUniqueId();
/**
* Indica o tema do rodapé.
*/
theme = 'dark';
/**
* Texto de descrição das redes sociais.
*/
socialNetworkTitle = 'Redes Sociais';
getCssClassMap() {
return {
'br-footer': true,
inverted: this.theme === 'light',
};
}
/**
* Renderiza o componente.
* @returns JSX do componente.
*/
render() {
return (h(Host, { key: '1ba2fd188599b9c65ab93264ef3a46eaf41139fc' }, h("div", { key: 'aa6ecb554e1a13f2da9398b268bfd232643e8b36', id: this.customId, class: this.getCssClassMap() }, h("div", { key: '1fc68a3a0b441df4516cb0c764dda8958194394b', class: "container-lg" }, h("slot", { key: '6e6b75f35f8c14c25849d3e2d9fd7ece4b5391fd', name: "logo" }), h("div", { key: 'e700682c46c0b22454442fa4f285688ed4e22edf', class: "site-map" }, h("slot", { key: '010033e97a083bcc1591c366fa4920570f9cabb3' })), h("div", { key: '1ecdc4eb9e015b7666a7e94f5f57abe74719ea64', class: "social-and-partners" }, h("div", { key: '6362ea064449f54930d4f97a87cb94b38f178d8d', class: "social-network" }, h("p", { key: '7e17ba4b34482bc516d1376109f563cf7fac9c68', class: "social-network-title" }, this.socialNetworkTitle), h("slot", { key: '4236a9e864c7a680f8e3d15a673168d1070e2de2', name: "social-network" })), h("div", { key: 'ec74d4d06a2a8d5fa2b12dac201994008e7e91ba', class: "partners text-right" }, h("slot", { key: '5c369b76e2f467e0ccacca60580a96d819f7eaf0', name: "partner-logo" }))), h("slot", { key: 'a5558339ef9d9ad609ac37df05633a848484d94d', name: "legal" })))));
}
static get is() { return "br-footer"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["footer.scss"]
};
}
static get styleUrls() {
return {
"$": ["footer.css"]
};
}
static get properties() {
return {
"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": "Helpers.generateUniqueId()"
},
"theme": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'dark' | 'light'",
"resolved": "\"dark\" | \"light\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Indica o tema do rodap\u00E9."
},
"getter": false,
"setter": false,
"attribute": "theme",
"reflect": true,
"defaultValue": "'dark'"
},
"socialNetworkTitle": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Texto de descri\u00E7\u00E3o das redes sociais."
},
"getter": false,
"setter": false,
"attribute": "social-network-title",
"reflect": true,
"defaultValue": "'Redes Sociais'"
}
};
}
static get elementRef() { return "el"; }
}
//# sourceMappingURL=footer.js.map