@govbr-ds/webcomponents
Version:
Biblioteca de Web Components baseado no GovBR-DS
179 lines (178 loc) • 6.34 kB
JavaScript
/*!
* Construído por SERPRO
* © https://serpro.gov.br/ - MIT License.
*/
import { h, Host } from "@stencil/core";
import Helpers from "../../utils/helpers";
/**
* O subcomponente `br-footer-category` representa o mapa do site, de acordo com a documentação de design do GovBR.
*
* O `br-footer-category` deve ser utilizado com filho direto do componente [`br-footer`](/docs/components/footer) e possui um slot para os itens da categoria.
* Esses itens são representados pelo componente [`br-footer-item`](/docs/components/footer-item).
*
* O componente `br-footer-category` é responsivo e se adapta a diferentes tamanhos de tela.
* Em telas menores, ele se comporta como um accordion, enquanto em telas maiores, ele é exibido como uma lista.
*
* @slot default - Área destinada aos itens da categoria. Utilize o componente [`br-footer-item`](/docs/components/footer-item) para adicionar itens.
*/
export class FooterCategory {
/**
* 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();
/**
* Título da lista.
* @default ''
*/
label = '';
/**
* Define se o componente é exibido em um layout de desktop ou não.
* @default false
*/
isDesktop = false;
/**
* Define o nome do grupo de accordion.
*/
accordionGroup = null;
/**
* Define o media query para o componente.
* O media query é usado para determinar se o componente deve ser exibido em um layout de desktop ou não.
*/
mediaQuery;
/**
* Define um nome para o grupo de accordion.
* O nome do grupo é definido com base no atributo `custom-id` do elemento pai.
*/
setAccordionGroup() {
this.accordionGroup = `group-${this.el.parentElement.getAttribute('custom-id')}`;
}
/**
* Método que retorna as classes CSS do componente.
*/
getCssClassMap() {
return {
'br-footer-category': true,
};
}
/**
* Método que retorna as classes baseadas no tamanho da tela.
*/
getRootClassMap() {
return {
'col-2': this.isDesktop,
col: !this.isDesktop,
};
}
/**
* Define o media query para o componente.
* O media query é usado para determinar se o componente deve ser exibido em um layout de desktop ou não.
* O valor padrão é `(min-width: 992px)`, que corresponde a telas de desktop.
* O valor pode ser alterado para atender às necessidades específicas do projeto.
* @default '(min-width: 992px)'
*/
setMedia() {
this.mediaQuery = window.matchMedia('(min-width: 992px)');
this.isDesktop = this.mediaQuery.matches;
this.mediaQuery.addEventListener('change', this.handleMediaQueryChange);
}
/**
* Método do ciclo de vida do componente, que é chamado uma vez após o componente começar a ser renderizado no DOM.
*/
componentWillLoad() {
this.setMedia();
this.setAccordionGroup();
}
/**
* Método do ciclo de vida do componente, que é chamado quando o componente é removido do DOM.
*/
disconnectedCallback() {
this.mediaQuery.removeEventListener('change', this.handleMediaQueryChange);
}
/**
* Trata a mudança de media query.
* @param event O evento de mudança de media query.
*/
handleMediaQueryChange = (event) => {
this.isDesktop = event.matches;
};
/**
* Renderiza o componente.
* @returns JSX do componente.
*/
render() {
return (h(Host, { key: 'e48d838b27ad9662981a97c98fc6efb73fbd30eb', class: this.getRootClassMap() }, h("br-list", { key: 'b96dce223516abcf1636cbe68a2b123326dd4573', id: this.customId, class: this.getCssClassMap(), header: this.label, role: "list", "hide-header-divider": true, accordion: !this.isDesktop ? this.accordionGroup : null }, h("slot", { key: 'edaf381e47564889ba7248dbcd21b7c744fee1ac' }))));
}
static get is() { return "br-footer-category"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["footer-category.scss"]
};
}
static get styleUrls() {
return {
"$": ["footer-category.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()"
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "default",
"text": "''"
}],
"text": "T\u00EDtulo da lista."
},
"getter": false,
"setter": false,
"attribute": "label",
"reflect": true,
"defaultValue": "''"
}
};
}
static get states() {
return {
"isDesktop": {},
"accordionGroup": {}
};
}
static get elementRef() { return "el"; }
}
//# sourceMappingURL=footer-category.js.map