@postnord/web-components
Version:
PostNord Web Components
105 lines (104 loc) • 3.46 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { Host, h } from "@stencil/core";
/**
* The `pn-table` component is just a wrapper for your HTML table element.
* You need to create the markup, but the component will deal with the styling.
*
* We have a built in class for divs inside table colums called `column-wrapper`.
* This will line up your content and provide a grid gap.
**/
export class PnTable {
hostElement;
/** Use the gray variant instead of blue. */
gray = false;
/** Add border to table. */
bordered = false;
/** Make the table striped. */
striped = false;
getClassNames() {
const classes = [this.striped && 'striped', this.bordered && 'bordered', this.gray ? 'color-gray' : 'color-blue'];
return classes.filter(Boolean).join(' ');
}
render() {
return (h(Host, { key: 'c46bc77bf7e40631d6229457a7d764cf356f1b3d', class: this.getClassNames() }, h("div", { key: 'e547b118837d48715f62cad80d0bfd31f10954d6', class: "pn-table-container" }, h("slot", { key: '6c750540cac0e6fbdb9b9857f7eb309c27566d53' }))));
}
static get is() { return "pn-table"; }
static get originalStyleUrls() {
return {
"$": ["pn-table.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-table.css"]
};
}
static get properties() {
return {
"gray": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Use the gray variant instead of blue."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "gray",
"defaultValue": "false"
},
"bordered": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Add border to table."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "bordered",
"defaultValue": "false"
},
"striped": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Make the table striped."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "striped",
"defaultValue": "false"
}
};
}
static get elementRef() { return "hostElement"; }
}