@xplor-education/core-stencil-components 2.0.0

package/dist/collection/components/xplor-datatable/xplor-datatable.js

@@ -0,0 +1,536 @@
+import { h, Host, } from "@stencil/core";
+export class XplorDatatable {
+    constructor() {
+        /**
+         * Array of column definitions for the table headers
+         */
+        this.headers = [];
+        /**
+         * Array of data items to display in the table
+         */
+        this.items = [];
+        /**
+         * Whether the table is in a loading state
+         */
+        this.loading = false;
+        /**
+         * Pagination configuration object
+         */
+        this.pagination = {
+            page: 1,
+            perpage: 10,
+            total: 0,
+        };
+        /**
+         * Array of selected items (for multiselect)
+         */
+        this.selected = [];
+        /**
+         * Enable row selection with checkboxes
+         */
+        this.canSelect = false;
+        /**
+         * Enable horizontal lines between rows
+         */
+        this.horizontalLines = true;
+        /**
+         * Enable striped row styling
+         */
+        this.striped = false;
+        /**
+         * Show skeleton loader when loading
+         */
+        this.skeletonLoader = true;
+        /**
+         * Enable hover effect on rows
+         */
+        this.hover = true;
+        /**
+         * Per page options for pagination
+         */
+        this.perPageOptions = [10, 25, 50, 100];
+        this.sortBy = null;
+        this.sortDirection = null;
+        this.internalSelected = new Set();
+        this.allSelected = false;
+        this.handleSort = (column) => {
+            if (column.sortable === false)
+                return;
+            if (this.sortBy === column.value) {
+                // Cycle through: asc -> desc -> null
+                if (this.sortDirection === 'asc') {
+                    this.sortDirection = 'desc';
+                }
+                else if (this.sortDirection === 'desc') {
+                    this.sortDirection = null;
+                    this.sortBy = null;
+                }
+            }
+            else {
+                this.sortBy = column.value;
+                this.sortDirection = 'asc';
+            }
+            this.sortChange.emit({
+                column: this.sortBy,
+                direction: this.sortDirection,
+            });
+        };
+        this.handleSelectAll = (e) => {
+            const target = e.target;
+            const checked = target.checked;
+            if (checked) {
+                this.items.forEach(item => this.internalSelected.add(item));
+            }
+            else {
+                this.internalSelected.clear();
+            }
+            this.allSelected = checked;
+            this.internalSelected = new Set(this.internalSelected);
+            this.xplorSelectionChange.emit(Array.from(this.internalSelected));
+        };
+        this.handleSelectOne = (e, item) => {
+            const target = e.target;
+            const checked = target.checked;
+            if (checked) {
+                this.internalSelected.add(item);
+            }
+            else {
+                this.internalSelected.delete(item);
+            }
+            this.internalSelected = new Set(this.internalSelected);
+            this.updateAllSelectedState();
+            this.xplorSelectionChange.emit(Array.from(this.internalSelected));
+        };
+        this.handleRowClick = (item, e) => {
+            // Don't trigger row click if clicking on checkbox or interactive elements
+            const target = e.target;
+            if (target.tagName === 'INPUT' || target.closest('input')) {
+                return;
+            }
+            this.rowClick.emit(item);
+        };
+        this.handlePageChange = (newPage) => {
+            const updatedPagination = Object.assign(Object.assign({}, this.pagination), { page: newPage });
+            this.paginationChange.emit(updatedPagination);
+        };
+        this.handlePerPageChange = (e) => {
+            const target = e.target;
+            const perpage = parseInt(target.value, 10);
+            if (!isNaN(perpage)) {
+                const updatedPagination = Object.assign(Object.assign({}, this.pagination), { page: 1, // Reset to first page
+                    perpage });
+                this.paginationChange.emit(updatedPagination);
+            }
+        };
+    }
+    componentWillLoad() {
+        this.internalSelected = new Set(this.selected);
+    }
+    watchSelected(newSelected) {
+        this.internalSelected = new Set(newSelected);
+        this.updateAllSelectedState();
+    }
+    watchItems() {
+        this.updateAllSelectedState();
+    }
+    updateAllSelectedState() {
+        if (this.items.length === 0) {
+            this.allSelected = false;
+            return;
+        }
+        this.allSelected = this.items.every(item => this.internalSelected.has(item));
+    }
+    getSortIcon(column) {
+        if (this.sortBy !== column.value) {
+            return (h("svg", { class: "sort-icon", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M8 3L11 6H5L8 3Z", fill: "currentColor", opacity: "0.3" }), h("path", { d: "M8 13L5 10H11L8 13Z", fill: "currentColor", opacity: "0.3" })));
+        }
+        if (this.sortDirection === 'asc') {
+            return (h("svg", { class: "sort-icon active", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M8 3L11 6H5L8 3Z", fill: "currentColor" }), h("path", { d: "M8 13L5 10H11L8 13Z", fill: "currentColor", opacity: "0.3" })));
+        }
+        return (h("svg", { class: "sort-icon active", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M8 3L11 6H5L8 3Z", fill: "currentColor", opacity: "0.3" }), h("path", { d: "M8 13L5 10H11L8 13Z", fill: "currentColor" })));
+    }
+    ;
+    renderSkeletonLoader() {
+        return (h("tbody", { class: "skeleton-loader" }, Array.from({ length: this.pagination.perpage }).map(() => (h("tr", null, this.canSelect && (h("td", null, h("div", { class: "skeleton skeleton-checkbox" }))), this.headers.map(() => (h("td", null, h("div", { class: "skeleton skeleton-text" })))))))));
+    }
+    renderPagination() {
+        const totalPages = Math.ceil(this.pagination.total / this.pagination.perpage);
+        const currentPage = this.pagination.page;
+        const start = (currentPage - 1) * this.pagination.perpage + 1;
+        const end = Math.min(currentPage * this.pagination.perpage, this.pagination.total);
+        return (h("div", { class: "datatable-footer" }, h("div", { class: "footer-info" }, this.pagination.total > 0 ? (h("span", null, "Showing ", start, " to ", end, " of ", this.pagination.total, " entries")) : (h("span", null, "No entries"))), h("div", { class: "footer-controls" }, h("div", { class: "per-page-selector" }, h("label", null, "Rows per page:", h("select", { onInput: this.handlePerPageChange }, this.perPageOptions.map(option => (h("option", { value: option, selected: option === this.pagination.perpage }, option)))))), h("div", { class: "pagination-controls" }, h("button", { class: "pagination-btn", disabled: currentPage === 1, onClick: () => this.handlePageChange(1), "aria-label": "First page" }, h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M11 12L7 8L11 4M5 4V12", stroke: "currentColor", "stroke-width": "1.5" }))), h("button", { class: "pagination-btn", disabled: currentPage === 1, onClick: () => this.handlePageChange(currentPage - 1), "aria-label": "Previous page" }, h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M10 12L6 8L10 4", stroke: "currentColor", "stroke-width": "1.5" }))), h("span", { class: "page-info" }, "Page ", currentPage, " of ", totalPages || 1), h("button", { class: "pagination-btn", disabled: currentPage >= totalPages, onClick: () => this.handlePageChange(currentPage + 1), "aria-label": "Next page" }, h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M6 4L10 8L6 12", stroke: "currentColor", "stroke-width": "1.5" }))), h("button", { class: "pagination-btn", disabled: currentPage >= totalPages, onClick: () => this.handlePageChange(totalPages), "aria-label": "Last page" }, h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { d: "M5 4L9 8L5 12M11 4V12", stroke: "currentColor", "stroke-width": "1.5" })))))));
+    }
+    render() {
+        const tableHeight = typeof this.height === 'number' ? `${this.height}px` : this.height;
+        const hasHeight = !!this.height;
+        return (h(Host, { key: '779f32a211bb2d9d5d70363112970f00d62d9ccf', class: "xplor-datatable" }, h("div", { key: '27995dd2f98074fe0bd223b52ae3b25cc48a8ab6', class: "datatable-container" }, h("div", { key: '379d7b6999df3d94e2fa6618394e14fa9e99d96b', class: {
+                'table-wrapper': true,
+                'has-height': hasHeight,
+                'horizontal-lines': this.horizontalLines,
+                'striped': this.striped,
+                'is-empty': this.items.length === 0,
+            }, style: hasHeight ? { height: tableHeight } : {} }, h("table", { key: '5f46224fe7ecc2fd3781e11d592fee5c8d80e9f2', class: { 'hover': this.hover } }, h("thead", { key: 'd20432aa1d6551dd324a60ed594cd5ebc2c80198' }, h("tr", { key: '62cc50e679f8345caba6f92a7ae117b68728425d' }, this.canSelect && (h("th", { key: 'dfffb0bf421458b192db6eae3538da8a752f5356', class: "select-column" }, h("label", { key: '17cdb037cee9b2d0cce729e0761f03b4bca14354', class: "checkbox-label" }, h("input", { key: 'ecba2511bab5cd9a25a01eb1e7038e1400492392', type: "checkbox", checked: this.allSelected, indeterminate: this.internalSelected.size > 0 &&
+                this.internalSelected.size < this.items.length, onChange: this.handleSelectAll })))), this.headers.map(header => (h("th", { class: {
+                sortable: header.sortable !== false,
+                sorted: this.sortBy === header.value,
+                fixed: header.fixed,
+                [`align-${header.align || 'left'}`]: true,
+            }, style: header.width ? { width: typeof header.width === 'number' ? `${header.width}px` : header.width } : {}, onClick: () => header.sortable !== false && this.handleSort(header) }, h("div", { class: "header-content" }, h("span", null, header.text), header.sortable !== false && this.getSortIcon(header))))))), this.loading && this.skeletonLoader ? (this.renderSkeletonLoader()) : (h("tbody", null, this.items.length === 0 ? (h("tr", { class: "empty-row" }, h("td", { colSpan: this.headers.length + (this.canSelect ? 1 : 0) }, h("div", { class: "empty-state" }, h("p", null, "No data available"))))) : (this.items.map(item => {
+            const isSelected = this.internalSelected.has(item);
+            return (h("tr", { class: {
+                    selected: isSelected,
+                    clickable: true,
+                }, onClick: (e) => this.handleRowClick(item, e) }, this.canSelect && (h("td", { class: "select-column" }, h("label", { class: "checkbox-label" }, h("input", { type: "checkbox", checked: isSelected, onChange: (e) => this.handleSelectOne(e, item) })))), this.headers.map(header => (h("td", { class: `align-${header.align || 'left'}` }, h("slot", { name: `item.${header.value}` }, item[header.value]))))));
+        })))))), this.pagination && this.pagination.total > 0 && this.renderPagination())));
+    }
+    static get is() { return "xplor-datatable"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xplor-datatable.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xplor-datatable.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "headers": {
+                "type": "unknown",
+                "attribute": "headers",
+                "mutable": false,
+                "complexType": {
+                    "original": "DatatableColumn[]",
+                    "resolved": "DatatableColumn[]",
+                    "references": {
+                        "DatatableColumn": {
+                            "location": "local",
+                            "path": "/Users/darryn.lee-warden/Documents/DEV/xplor_design_system/apps/core-stencil-components/src/components/xplor-datatable/xplor-datatable.tsx",
+                            "id": "src/components/xplor-datatable/xplor-datatable.tsx::DatatableColumn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of column definitions for the table headers"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "items": {
+                "type": "unknown",
+                "attribute": "items",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[]",
+                    "resolved": "any[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of data items to display in the table"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "loading": {
+                "type": "boolean",
+                "attribute": "loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the table is in a loading state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "pagination": {
+                "type": "unknown",
+                "attribute": "pagination",
+                "mutable": false,
+                "complexType": {
+                    "original": "DatatablePagination",
+                    "resolved": "DatatablePagination",
+                    "references": {
+                        "DatatablePagination": {
+                            "location": "local",
+                            "path": "/Users/darryn.lee-warden/Documents/DEV/xplor_design_system/apps/core-stencil-components/src/components/xplor-datatable/xplor-datatable.tsx",
+                            "id": "src/components/xplor-datatable/xplor-datatable.tsx::DatatablePagination"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pagination configuration object"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{\n        page: 1,\n        perpage: 10,\n        total: 0,\n    }"
+            },
+            "selected": {
+                "type": "unknown",
+                "attribute": "selected",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[]",
+                    "resolved": "any[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of selected items (for multiselect)"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "canSelect": {
+                "type": "boolean",
+                "attribute": "can-select",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable row selection with checkboxes"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "horizontalLines": {
+                "type": "boolean",
+                "attribute": "horizontal-lines",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable horizontal lines between rows"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "striped": {
+                "type": "boolean",
+                "attribute": "striped",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable striped row styling"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "height": {
+                "type": "any",
+                "attribute": "height",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fixed header height (e.g., \"400px\" or 400)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "skeletonLoader": {
+                "type": "boolean",
+                "attribute": "skeleton-loader",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show skeleton loader when loading"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "hover": {
+                "type": "boolean",
+                "attribute": "hover",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable hover effect on rows"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "perPageOptions": {
+                "type": "unknown",
+                "attribute": "per-page-options",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Per page options for pagination"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[10, 25, 50, 100]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "sortBy": {},
+            "sortDirection": {},
+            "internalSelected": {},
+            "allSelected": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rowClick",
+                "name": "rowClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a row is clicked"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "xplorSelectionChange",
+                "name": "xplorSelectionChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when row selection changes"
+                },
+                "complexType": {
+                    "original": "any[]",
+                    "resolved": "any[]",
+                    "references": {}
+                }
+            }, {
+                "method": "paginationChange",
+                "name": "paginationChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when pagination changes"
+                },
+                "complexType": {
+                    "original": "DatatablePagination",
+                    "resolved": "DatatablePagination",
+                    "references": {
+                        "DatatablePagination": {
+                            "location": "local",
+                            "path": "/Users/darryn.lee-warden/Documents/DEV/xplor_design_system/apps/core-stencil-components/src/components/xplor-datatable/xplor-datatable.tsx",
+                            "id": "src/components/xplor-datatable/xplor-datatable.tsx::DatatablePagination"
+                        }
+                    }
+                }
+            }, {
+                "method": "sortChange",
+                "name": "sortChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when sorting changes"
+                },
+                "complexType": {
+                    "original": "{ column: string; direction: 'asc' | 'desc' | null }",
+                    "resolved": "{ column: string; direction: \"desc\" | \"asc\"; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "selected",
+                "methodName": "watchSelected"
+            }, {
+                "propName": "items",
+                "methodName": "watchItems"
+            }];
+    }
+}
+//# sourceMappingURL=xplor-datatable.js.map

package/dist/collection/components/xplor-datatable/xplor-datatable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-datatable.js","sourceRoot":"","sources":["../../../src/components/xplor-datatable/xplor-datatable.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Prop,\n    State,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Watch,\n    Host,\n} from '@stencil/core';\n\nexport interface DatatableColumn {\n    text: string;\n    value: string;\n    sortable?: boolean;\n    width?: string | number;\n    align?: 'left' | 'center' | 'right';\n    fixed?: boolean;\n}\n\nexport interface DatatablePagination {\n    page: number;\n    perpage: number;\n    total: number;\n    pages?: number;\n}\n\n@Component({\n    tag: 'xplor-datatable',\n    styleUrl: 'xplor-datatable.scss',\n    shadow: true,\n})\nexport class XplorDatatable {\n    @Element() el: HTMLXplorDatatableElement;\n\n    /**\n     * Array of column definitions for the table headers\n     */\n    @Prop() headers: DatatableColumn[] = [];\n\n    /**\n     * Array of data items to display in the table\n     */\n    @Prop() items: any[] = [];\n\n    /**\n     * Whether the table is in a loading state\n     */\n    @Prop() loading: boolean = false;\n\n    /**\n     * Pagination configuration object\n     */\n    @Prop() pagination: DatatablePagination = {\n        page: 1,\n        perpage: 10,\n        total: 0,\n    };\n\n    /**\n     * Array of selected items (for multiselect)\n     */\n    @Prop() selected: any[] = [];\n\n    /**\n     * Enable row selection with checkboxes\n     */\n    @Prop() canSelect: boolean = false;\n\n    /**\n     * Enable horizontal lines between rows\n     */\n    @Prop() horizontalLines: boolean = true;\n\n    /**\n     * Enable striped row styling\n     */\n    @Prop() striped: boolean = false;\n\n    /**\n     * Fixed header height (e.g., \"400px\" or 400)\n     */\n    @Prop() height?: string | number;\n\n    /**\n     * Show skeleton loader when loading\n     */\n    @Prop() skeletonLoader: boolean = true;\n\n    /**\n     * Enable hover effect on rows\n     */\n    @Prop() hover: boolean = true;\n\n    /**\n     * Per page options for pagination\n     */\n    @Prop() perPageOptions: number[] = [10, 25, 50, 100];\n\n    /**\n     * Emitted when a row is clicked\n     */\n    @Event() rowClick: EventEmitter<any>;\n\n    /**\n     * Emitted when row selection changes\n     */\n    @Event() xplorSelectionChange: EventEmitter<any[]>;\n\n    /**\n     * Emitted when pagination changes\n     */\n    @Event() paginationChange: EventEmitter<DatatablePagination>;\n\n    /**\n     * Emitted when sorting changes\n     */\n    @Event() sortChange: EventEmitter<{ column: string; direction: 'asc' | 'desc' | null }>;\n\n    @State() sortBy: string | null = null;\n    @State() sortDirection: 'asc' | 'desc' | null = null;\n    @State() internalSelected: Set<any> = new Set();\n    @State() allSelected: boolean = false;\n\n    componentWillLoad() {\n        this.internalSelected = new Set(this.selected);\n    }\n\n    @Watch('selected')\n    watchSelected(newSelected: any[]) {\n        this.internalSelected = new Set(newSelected);\n        this.updateAllSelectedState();\n    }\n\n    @Watch('items')\n    watchItems() {\n        this.updateAllSelectedState();\n    }\n\n    private updateAllSelectedState() {\n        if (this.items.length === 0) {\n            this.allSelected = false;\n            return;\n        }\n        this.allSelected = this.items.every(item => this.internalSelected.has(item));\n    }\n\n    private handleSort = (column: DatatableColumn) => {\n        if (column.sortable === false) return;\n\n        if (this.sortBy === column.value) {\n            // Cycle through: asc -> desc -> null\n            if (this.sortDirection === 'asc') {\n                this.sortDirection = 'desc';\n            } else if (this.sortDirection === 'desc') {\n                this.sortDirection = null;\n                this.sortBy = null;\n            }\n        } else {\n            this.sortBy = column.value;\n            this.sortDirection = 'asc';\n        }\n\n        this.sortChange.emit({\n            column: this.sortBy,\n            direction: this.sortDirection,\n        });\n    };\n\n    private handleSelectAll = (e: Event) => {\n        const target = e.target as HTMLInputElement;\n        const checked = target.checked;\n\n        if (checked) {\n            this.items.forEach(item => this.internalSelected.add(item));\n        } else {\n            this.internalSelected.clear();\n        }\n\n        this.allSelected = checked;\n        this.internalSelected = new Set(this.internalSelected);\n        this.xplorSelectionChange.emit(Array.from(this.internalSelected));\n    };\n\n    private handleSelectOne = (e: Event, item: any) => {\n        const target = e.target as HTMLInputElement;\n        const checked = target.checked;\n\n        if (checked) {\n            this.internalSelected.add(item);\n        } else {\n            this.internalSelected.delete(item);\n        }\n\n        this.internalSelected = new Set(this.internalSelected);\n        this.updateAllSelectedState();\n        this.xplorSelectionChange.emit(Array.from(this.internalSelected));\n    };\n\n    private handleRowClick = (item: any, e: MouseEvent) => {\n        // Don't trigger row click if clicking on checkbox or interactive elements\n        const target = e.target as HTMLElement;\n        if (target.tagName === 'INPUT' || target.closest('input')) {\n            return;\n        }\n\n        this.rowClick.emit(item);\n    };\n\n    private handlePageChange = (newPage: number) => {\n        const updatedPagination = {\n            ...this.pagination,\n            page: newPage,\n        };\n        this.paginationChange.emit(updatedPagination);\n    };\n\n    private handlePerPageChange = (e: Event) => {\n        const target = e.target as HTMLSelectElement;\n        const perpage = parseInt(target.value, 10);\n        if (!isNaN(perpage)) {\n            const updatedPagination = {\n                ...this.pagination,\n                page: 1, // Reset to first page\n                perpage,\n            };\n            this.paginationChange.emit(updatedPagination);\n        }\n    };\n\n    private getSortIcon(column: DatatableColumn) {\n        if (this.sortBy !== column.value) {\n            return (\n                <svg class=\"sort-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                    <path d=\"M8 3L11 6H5L8 3Z\" fill=\"currentColor\" opacity=\"0.3\" />\n                    <path d=\"M8 13L5 10H11L8 13Z\" fill=\"currentColor\" opacity=\"0.3\" />\n                </svg>\n            );\n        }\n\n        if (this.sortDirection === 'asc') {\n            return (\n                <svg class=\"sort-icon active\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                    <path d=\"M8 3L11 6H5L8 3Z\" fill=\"currentColor\" />\n                    <path d=\"M8 13L5 10H11L8 13Z\" fill=\"currentColor\" opacity=\"0.3\" />\n                </svg>\n            );\n        }\n\n        return (\n            <svg class=\"sort-icon active\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8 3L11 6H5L8 3Z\" fill=\"currentColor\" opacity=\"0.3\" />\n                <path d=\"M8 13L5 10H11L8 13Z\" fill=\"currentColor\" />\n            </svg>\n        );\n    };\n\n    private renderSkeletonLoader() {\n        return (\n            <tbody class=\"skeleton-loader\">\n                {Array.from({ length: this.pagination.perpage }).map(() => (\n                    <tr>\n                        {this.canSelect && (\n                            <td>\n                                <div class=\"skeleton skeleton-checkbox\"></div>\n                            </td>\n                        )}\n                        {this.headers.map(() => (\n                            <td>\n                                <div class=\"skeleton skeleton-text\"></div>\n                            </td>\n                        ))}\n                    </tr>\n                ))}\n            </tbody>\n        );\n    }\n\n    private renderPagination() {\n        const totalPages = Math.ceil(this.pagination.total / this.pagination.perpage);\n        const currentPage = this.pagination.page;\n        const start = (currentPage - 1) * this.pagination.perpage + 1;\n        const end = Math.min(currentPage * this.pagination.perpage, this.pagination.total);\n\n        return (\n            <div class=\"datatable-footer\">\n                <div class=\"footer-info\">\n                    {this.pagination.total > 0 ? (\n                        <span>\n                            Showing {start} to {end} of {this.pagination.total} entries\n                        </span>\n                    ) : (\n                        <span>No entries</span>\n                    )}\n                </div>\n\n                <div class=\"footer-controls\">\n                    <div class=\"per-page-selector\">\n                        <label>\n                            Rows per page:\n                            <select onInput={this.handlePerPageChange}>\n                                {this.perPageOptions.map(option => (\n                                    <option value={option} selected={option === this.pagination.perpage}>{option}</option>\n                                ))}\n                            </select>\n                        </label>\n                    </div>\n\n                    <div class=\"pagination-controls\">\n                        <button\n                            class=\"pagination-btn\"\n                            disabled={currentPage === 1}\n                            onClick={() => this.handlePageChange(1)}\n                            aria-label=\"First page\"\n                        >\n                            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                                <path d=\"M11 12L7 8L11 4M5 4V12\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n                            </svg>\n                        </button>\n\n                        <button\n                            class=\"pagination-btn\"\n                            disabled={currentPage === 1}\n                            onClick={() => this.handlePageChange(currentPage - 1)}\n                            aria-label=\"Previous page\"\n                        >\n                            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                                <path d=\"M10 12L6 8L10 4\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n                            </svg>\n                        </button>\n\n                        <span class=\"page-info\">\n                            Page {currentPage} of {totalPages || 1}\n                        </span>\n\n                        <button\n                            class=\"pagination-btn\"\n                            disabled={currentPage >= totalPages}\n                            onClick={() => this.handlePageChange(currentPage + 1)}\n                            aria-label=\"Next page\"\n                        >\n                            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                                <path d=\"M6 4L10 8L6 12\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n                            </svg>\n                        </button>\n\n                        <button\n                            class=\"pagination-btn\"\n                            disabled={currentPage >= totalPages}\n                            onClick={() => this.handlePageChange(totalPages)}\n                            aria-label=\"Last page\"\n                        >\n                            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                                <path d=\"M5 4L9 8L5 12M11 4V12\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n                            </svg>\n                        </button>\n                    </div>\n                </div>\n            </div>\n        );\n    }\n\n    render() {\n        const tableHeight = typeof this.height === 'number' ? `${this.height}px` : this.height;\n        const hasHeight = !!this.height;\n\n        return (\n            <Host class=\"xplor-datatable\">\n                <div class=\"datatable-container\">\n                    <div\n                        class={{\n                            'table-wrapper': true,\n                            'has-height': hasHeight,\n                            'horizontal-lines': this.horizontalLines,\n                            'striped': this.striped,\n                            'is-empty': this.items.length === 0,\n                        }}\n                        style={hasHeight ? { height: tableHeight } : {}}\n                    >\n                        <table class={{ 'hover': this.hover }}>\n                            <thead>\n                                <tr>\n                                    {this.canSelect && (\n                                        <th class=\"select-column\">\n                                            <label class=\"checkbox-label\">\n                                                <input\n                                                    type=\"checkbox\"\n                                                    checked={this.allSelected}\n                                                    indeterminate={\n                                                        this.internalSelected.size > 0 &&\n                                                        this.internalSelected.size < this.items.length\n                                                    }\n                                                    onChange={this.handleSelectAll}\n                                                />\n                                            </label>\n                                        </th>\n                                    )}\n                                    {this.headers.map(header => (\n                                        <th\n                                            class={{\n                                                sortable: header.sortable !== false,\n                                                sorted: this.sortBy === header.value,\n                                                fixed: header.fixed,\n                                                [`align-${header.align || 'left'}`]: true,\n                                            }}\n                                            style={header.width ? { width: typeof header.width === 'number' ? `${header.width}px` : header.width } : {}}\n                                            onClick={() => header.sortable !== false && this.handleSort(header)}\n                                        >\n                                            <div class=\"header-content\">\n                                                <span>{header.text}</span>\n                                                {header.sortable !== false && this.getSortIcon(header)}\n                                            </div>\n                                        </th>\n                                    ))}\n                                </tr>\n                            </thead>\n\n                            {this.loading && this.skeletonLoader ? (\n                                this.renderSkeletonLoader()\n                            ) : (\n                                <tbody>\n                                    {this.items.length === 0 ? (\n                                        <tr class=\"empty-row\">\n                                            <td colSpan={this.headers.length + (this.canSelect ? 1 : 0)}>\n                                                <div class=\"empty-state\">\n                                                    <p>No data available</p>\n                                                </div>\n                                            </td>\n                                        </tr>\n                                    ) : (\n                                        this.items.map(item => {\n                                            const isSelected = this.internalSelected.has(item);\n                                            return (\n                                                <tr\n                                                    class={{\n                                                        selected: isSelected,\n                                                        clickable: true,\n                                                    }}\n                                                    onClick={(e) => this.handleRowClick(item, e)}\n                                                >\n                                                    {this.canSelect && (\n                                                        <td class=\"select-column\">\n                                                            <label class=\"checkbox-label\">\n                                                                <input\n                                                                    type=\"checkbox\"\n                                                                    checked={isSelected}\n                                                                    onChange={(e) => this.handleSelectOne(e, item)}\n                                                                />\n                                                            </label>\n                                                        </td>\n                                                    )}\n                                                    {this.headers.map(header => (\n                                                        <td class={`align-${header.align || 'left'}`}>\n                                                            <slot name={`item.${header.value}`}>\n                                                                {item[header.value]}\n                                                            </slot>\n                                                        </td>\n                                                    ))}\n                                                </tr>\n                                            );\n                                        })\n                                    )}\n                                </tbody>\n                            )}\n                        </table>\n                    </div>\n\n                    {this.pagination && this.pagination.total > 0 && this.renderPagination()}\n                </div>\n            </Host>\n        );\n    }\n}\n"]}