import { Host, h } from "@stencil/core";
/**
 * Display a simple table of data. Columns and data cells may have custom renderers defined to
 * support creating interactive table layouts.
 *
 * ```ts
 * <verdocs-table columns={[...columns]} data={[...data]} />
 * ```
 */
export class VerdocsTable {
    constructor() {
        /**
         * The columns to display
         */
        this.columns = [];
        /**
         * The rows to display
         */
        this.data = [];
    }
    render() {
        return (h(Host, { key: 'c893bf01d55e2c71e2b35c6627168510cfe3b10d', class: "table-wrapper" }, h("table", { key: 'f8ce9f4a94f6324b847d5fb6bc3baf0fbdc267f8', class: "table" }, h("thead", { key: 'aceb31d47b701c7eaac0ee1ecd2890a8f6eac62c' }, h("tr", { key: 'cb02345ee1c473e860ebd06ec333cddc0515f201', 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: '03570505e1a4d4c942c7391b183ddf0f8e6903f9' }, 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 is() { return "verdocs-table"; }
    static get originalStyleUrls() {
        return {
            "$": ["verdocs-table.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["verdocs-table.css"]
        };
    }
    static get properties() {
        return {
            "columns": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "IColumn[]",
                    "resolved": "IColumn[]",
                    "references": {
                        "IColumn": {
                            "location": "local",
                            "path": "/Users/chad/projects/verdocs/web-sdk/verdocs-web-sdk/src/components/controls/verdocs-table/verdocs-table.tsx",
                            "id": "src/components/controls/verdocs-table/verdocs-table.tsx::IColumn"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The columns to display"
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "data": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "any[]",
                    "resolved": "any[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The rows to display"
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            }
        };
    }
    static get events() {
        return [{
                "method": "colHeaderClick",
                "name": "colHeaderClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event fired when the user clicks a column header. This may be used to manage sorting options."
                },
                "complexType": {
                    "original": "{col: IColumn}",
                    "resolved": "{ col: IColumn; }",
                    "references": {
                        "IColumn": {
                            "location": "local",
                            "path": "/Users/chad/projects/verdocs/web-sdk/verdocs-web-sdk/src/components/controls/verdocs-table/verdocs-table.tsx",
                            "id": "src/components/controls/verdocs-table/verdocs-table.tsx::IColumn"
                        }
                    }
                }
            }, {
                "method": "rowClick",
                "name": "rowClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event fired when the user clicks a row."
                },
                "complexType": {
                    "original": "{row: any}",
                    "resolved": "{ row: any; }",
                    "references": {}
                }
            }];
    }
}
//# sourceMappingURL=verdocs-table.js.map
