@postnord/web-components
Version:
PostNord Web Components
99 lines (98 loc) • 3.24 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 {
constructor() {
this.gray = false;
this.bordered = false;
this.striped = false;
}
hostElement;
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: 'b9867d61ccf136800c5763fb75844738b20a3b48', class: this.getClassNames() }, h("div", { key: '59158aac1ab43cb38384b54240820e7b8323ca17', class: "pn-table-container" }, h("slot", { key: 'de9a611b8f096f96fd2c1827400692e407b16b3c' }))));
}
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."
},
"attribute": "gray",
"reflect": false,
"defaultValue": "false"
},
"bordered": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Add border to table."
},
"attribute": "bordered",
"reflect": false,
"defaultValue": "false"
},
"striped": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Make the table striped."
},
"attribute": "striped",
"reflect": false,
"defaultValue": "false"
}
};
}
static get elementRef() { return "hostElement"; }
}
//# sourceMappingURL=pn-table.js.map