import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-D16h8pzh.js';

const verdocsTableCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-table{width:100%;display:block;margin:0 0 10px 0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-table .table-wrapper{margin:10px 0;padding:0}verdocs-table .table{width:100%;border:none;border-collapse:collapse}verdocs-table .row.data-row{border:1px solid #d4d4d8;background-color:#ffffff}verdocs-table .header-col{color:#5c6575;font-weight:600;text-align:left;padding:8px 16px}verdocs-table .data-col{font-weight:400;padding:8px 16px}";

const VerdocsTable$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsTable extends H {
    constructor() {
        super();
        this.__registerHost();
        this.colHeaderClick = createEvent(this, "colHeaderClick");
        this.rowClick = createEvent(this, "rowClick");
        /**
         * The columns to display
         */
        this.columns = [];
        /**
         * The rows to display
         */
        this.data = [];
    }
    render() {
        return (h(Host, { key: '027b0578ef1ddfcc704178f803bf086bbe1c15d4', class: "table-wrapper" }, h("table", { key: '10ddbad54ffc0f292a1a351d7aad7134ade3a7dc', class: "table" }, h("thead", { key: '9ca47afa590f59634f8c781f7a653ca6352428fa' }, h("tr", { key: 'a3f020abcf70a5f7547ee970c8f298e44b31ca30', class: "row header-row" }, this.columns.map((col, i) => {
            return (h("th", { class: `col header-col col-${i} col-${col.id}`, onClick: () => { var _a; return (_a = this.colHeaderClick) === null || _a === void 0 ? void 0 : _a.emit({ col }); }, innerHTML: col.renderHeader ? col.renderHeader(col) : col.header || col.id }));
        }))), h("tbody", { key: 'ed8bba8eb08a27a632483da969c00c6dab46f849' }, this.data.map(row => (h("tr", { class: "row data-row", onClick: () => { var _a; return (_a = this.rowClick) === null || _a === void 0 ? void 0 : _a.emit({ row }); } }, this.columns.map((col, i) => {
            return col.renderCell ? (h("td", { class: `col data-col col-${i} col-${col.id}`, innerHTML: col.renderCell(col, row) })) : (h("td", { class: `col data-col col-${i} col-${col.id}` }, row[col.id]));
        }))))))));
    }
    static get style() { return verdocsTableCss; }
}, [256, "verdocs-table", {
        "columns": [16],
        "data": [16]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["verdocs-table"];
    components.forEach(tagName => { switch (tagName) {
        case "verdocs-table":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, VerdocsTable$1);
            }
            break;
    } });
}

const VerdocsTable = VerdocsTable$1;
const defineCustomElement = defineCustomElement$1;

export { VerdocsTable, defineCustomElement };
//# sourceMappingURL=verdocs-table.js.map

//# sourceMappingURL=verdocs-table.js.map