@postnord/web-components
Version: 
PostNord Web Components
34 lines (29 loc) • 4.93 kB
JavaScript
/*!
 * Built with Stencil
 * By PostNord.
 */
;
var index = require('./index-DVv2io0H.js');
const pnTableCss = "pn-table{display:block;margin-bottom:1em}pn-table .pn-table-container table{width:100%}pn-table .pn-table-container table .column-wrapper{display:flex;gap:0.5em;width:100%;align-items:center}pn-table .pn-table-container table,pn-table .pn-table-container table th,pn-table .pn-table-container table td{padding:0;margin:0;border:0;outline:0;border-collapse:collapse;max-width:100%}pn-table .pn-table-container table th,pn-table .pn-table-container table td{text-align:left;line-height:2;vertical-align:middle;padding:1em 1.15em}pn-table .pn-table-container table th:first-child,pn-table .pn-table-container table td:first-child{border-radius:0.5em 0 0 0.5em}pn-table .pn-table-container table th:last-child,pn-table .pn-table-container table td:last-child{border-radius:0 0.5em 0.5em 0}pn-table .pn-table-container table th pn-icon,pn-table .pn-table-container table td pn-icon{vertical-align:middle}pn-table .pn-table-container table thead tr th,pn-table .pn-table-container table thead tr td{color:#005d92;font-weight:500}pn-table .pn-table-container table tbody tr th,pn-table .pn-table-container table tbody tr td{color:#2d2013;font-weight:400}pn-table.bordered .pn-table-container table{border-collapse:separate;border-spacing:0}pn-table.bordered .pn-table-container table thead tr:last-child th,pn-table.bordered .pn-table-container table thead tr:last-child td{border-bottom-width:0.0625em}pn-table.bordered .pn-table-container table thead tr:first-child th,pn-table.bordered .pn-table-container table thead tr:first-child td{border-top:0.0625em solid #005d92}pn-table.bordered .pn-table-container table thead tr th,pn-table.bordered .pn-table-container table thead tr td{border-bottom:0.0625em solid #005d92}pn-table.bordered .pn-table-container table thead tr th:first-child,pn-table.bordered .pn-table-container table thead tr td:first-child{border-left:0.0625em solid #005d92;border-radius:0.5em 0 0}pn-table.bordered .pn-table-container table thead tr th:last-child,pn-table.bordered .pn-table-container table thead tr td:last-child{border-radius:0 0.5em 0 0;border-right:0.0625em solid #005d92}pn-table.bordered .pn-table-container table tbody tr th,pn-table.bordered .pn-table-container table tbody tr td{border-bottom:0.0625em solid #d3cecb}pn-table.bordered .pn-table-container table tbody tr th:first-child,pn-table.bordered .pn-table-container table tbody tr td:first-child{border-left:0.0625em solid #005d92;border-radius:0}pn-table.bordered .pn-table-container table tbody tr th:last-child,pn-table.bordered .pn-table-container table tbody tr td:last-child{border-right:0.0625em solid #005d92;border-radius:0}pn-table.bordered .pn-table-container table tbody tr:last-of-type th,pn-table.bordered .pn-table-container table tbody tr:last-of-type td{border-bottom:0.0625em solid #005d92}pn-table.bordered .pn-table-container table tbody tr:last-of-type th:last-child,pn-table.bordered .pn-table-container table tbody tr:last-of-type td:last-child{border-radius:0 0 0.5em 0}pn-table.bordered .pn-table-container table tbody tr:last-of-type th:first-child,pn-table.bordered .pn-table-container table tbody tr:last-of-type td:first-child{border-radius:0 0 0 0.5em}pn-table.bordered.striped .pn-table-container table tbody tr th,pn-table.bordered.striped .pn-table-container table tbody tr td{border-bottom-width:0}pn-table.bordered.striped .pn-table-container table tbody tr:last-child th,pn-table.bordered.striped .pn-table-container table tbody tr:last-child td{border-bottom-width:0.0625em}pn-table.striped .pn-table-container table tbody tr:nth-child(odd) th,pn-table.striped .pn-table-container table tbody tr:nth-child(odd) td{background-color:#effbff}pn-table.color-gray .pn-table-container table tbody tr:nth-child(odd) th,pn-table.color-gray .pn-table-container table tbody tr:nth-child(odd) td{background-color:#f9f8f8}";
const PnTable = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    get hostElement() { return index.getElement(this); }
    /** 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 (index.h(index.Host, { key: 'c46bc77bf7e40631d6229457a7d764cf356f1b3d', class: this.getClassNames() }, index.h("div", { key: 'e547b118837d48715f62cad80d0bfd31f10954d6', class: "pn-table-container" }, index.h("slot", { key: '6c750540cac0e6fbdb9b9857f7eb309c27566d53' }))));
    }
};
PnTable.style = pnTableCss;
exports.pn_table = PnTable;
//# sourceMappingURL=pn-table.entry.cjs.js.map