@govbr-ds/webcomponents
Version:
Biblioteca de Web Components baseado no GovBR-DS
165 lines (164 loc) • 5.94 kB
JavaScript
/*!
* Construído por SERPRO
* © https://serpro.gov.br/ - MIT License.
*/
import { h, Host } from "@stencil/core";
import { CssVariables } from "../../utils/css-variables";
import Helpers from "../../utils/helpers";
/**
* Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/table?tab=designer).
*
* @slot default - Descrição do slot
*/
export class TableHeaderCell {
/**
* 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();
/**
* Define se a célula do cabeçalho possui borda vertical.
*/
hasVerticalBorder = false;
/**
* Define o alinhamento horizontal do conteúdo da célula.
* Esse alinhamento é propagado para as demais células da coluna.
*/
horizontalAlign = 'left';
getCssClassMap() {
return {
'br-table-header-cell': true,
'vertical-border': this.hasVerticalBorder,
};
}
handleHorizontalAlignChange(newValue) {
this.el.style.setProperty(CssVariables.ALIGN.HORIZONTAL, newValue);
this.brHorizontalAlignDidChange.emit(this.horizontalAlign);
}
/**
* Evento disparado ao alterar o alinhamento horizontal do conteúdo da célula.
*/
brHorizontalAlignDidChange;
/**
* Ciclo de vida do componente. Disparado sempre que o componente é conectado ao DOM.
*/
connectedCallback() {
this.handleHorizontalAlignChange(this.horizontalAlign);
}
render() {
return (h(Host, { key: '54ea6b785c041a96eef05673fc3133178a5e6a38' }, h("div", { key: '516ec1c0c3f87dc0628bd318a419ee4fa8ea0ceb', id: this.customId, class: this.getCssClassMap() }, h("slot", { key: 'b1ba29192e553b0d409508c991d1e91d4d26d03e' }))));
}
static get is() { return "br-table-header-cell"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["table-header-cell.scss"]
};
}
static get styleUrls() {
return {
"$": ["table-header-cell.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()"
},
"hasVerticalBorder": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Define se a c\u00E9lula do cabe\u00E7alho possui borda vertical."
},
"getter": false,
"setter": false,
"attribute": "has-vertical-border",
"reflect": true,
"defaultValue": "false"
},
"horizontalAlign": {
"type": "string",
"mutable": false,
"complexType": {
"original": "HorizontalAlign",
"resolved": "\"center\" | \"left\" | \"right\"",
"references": {
"HorizontalAlign": {
"location": "import",
"path": "../../utils/types",
"id": "../../packages/webcomponents/src/utils/types.ts::HorizontalAlign"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Define o alinhamento horizontal do conte\u00FAdo da c\u00E9lula.\nEsse alinhamento \u00E9 propagado para as demais c\u00E9lulas da coluna."
},
"getter": false,
"setter": false,
"attribute": "horizontal-align",
"reflect": true,
"defaultValue": "'left'"
}
};
}
static get events() {
return [{
"method": "brHorizontalAlignDidChange",
"name": "brHorizontalAlignDidChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Evento disparado ao alterar o alinhamento horizontal do conte\u00FAdo da c\u00E9lula."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "horizontalAlign",
"methodName": "handleHorizontalAlignChange"
}];
}
}
//# sourceMappingURL=table-header-cell.js.map