@govbr-ds/webcomponents
Version:
Biblioteca de Web Components baseado no GovBR-DS
172 lines (171 loc) • 5.84 kB
JavaScript
/*!
* Construído por SERPRO
* © https://serpro.gov.br/ - MIT License.
*/
import { h, Host } from "@stencil/core";
import Helpers from "../../utils/helpers";
var CssVariables;
(function (CssVariables) {
CssVariables["HORIZONTAL_ALIGN"] = "--horizontal-align";
})(CssVariables || (CssVariables = {}));
/**
* 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 TableCell {
/**
* 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.
*/
horizontalAlign = 'left';
/**
* Watcher que observa as mudanças na propriedade `horizontalAlign`.
*/
handleHorizontalAlignChange(newValue) {
this.el.style.setProperty(CssVariables.HORIZONTAL_ALIGN, newValue);
}
/**
* Ouve o evento disparado ao alterar o alinhamento horizontal do conteúdo da célula.
* @param event Objeto Event
*/
handleHorizontalAlignDidChange(event) {
if (!this.el.hasAttribute('horizontal-align')) {
this.el.style.setProperty(CssVariables.HORIZONTAL_ALIGN, event.detail);
}
}
/**
* Ciclo de vida do componente. Chamado após o componente ser renderizado no DOM.
*/
connectedCallback() {
this.handleHorizontalAlignChange(this.horizontalAlign);
}
/**
* Define um conjunto de classes CSS que serão aplicadas ao componente.
* @returns Objeto com as classes CSS.
*/
getCssClassMap() {
return {
'br-table-cell': true,
'vertical-border': this.hasVerticalBorder,
};
}
/**
* Define o JSX do componente.
* @returns JSX do componente.
*/
render() {
return (h(Host, { key: '83782b9c4258a009b9d1843fcb60250ce701cded' }, h("div", { key: 'cd20a86db80d21e67ba93f74777eb58dc6f0bc8f', id: this.customId, class: this.getCssClassMap() }, h("slot", { key: '7bc844f1abee57120714dbd9a7596194dd4ee109' }))));
}
static get is() { return "br-table-cell"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["table-cell.scss"]
};
}
static get styleUrls() {
return {
"$": ["table-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": "global",
"id": "global::HorizontalAlign"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Define o alinhamento horizontal do conte\u00FAdo da c\u00E9lula."
},
"getter": false,
"setter": false,
"attribute": "horizontal-align",
"reflect": true,
"defaultValue": "'left'"
}
};
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "horizontalAlign",
"methodName": "handleHorizontalAlignChange"
}];
}
static get listeners() {
return [{
"name": "brHorizontalAlignDidChange",
"method": "handleHorizontalAlignDidChange",
"target": "document",
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=table-cell.js.map