@dropi/ui 0.1.23 → 0.1.24

package/dist/collection/components/dropi-table/dropi-table.js

@@ -0,0 +1,973 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-table
+ * Data table with sortable columns, row selection, search, column selector and pagination.
+ */
+export class DropiTable {
+    /** Column definitions */
+    columns = [];
+    /** Row data */
+    rows = [];
+    /** Show checkbox column */
+    showCheckbox = false;
+    /** Show loading skeleton */
+    loading = false;
+    /** Empty state message */
+    emptyMessage = 'No hay datos disponibles';
+    /** Table title */
+    title = '';
+    /** Show search input */
+    showSearch = false;
+    /** Show column selector button */
+    showColumnSelector = false;
+    /** Show paginator */
+    showPaginator = false;
+    /** Page sizes options */
+    pageSizes = [5, 10, 25, 50];
+    /** Current page (1-based) */
+    currentPage = 1;
+    /** Total pages */
+    totalPages = 1;
+    /** Show row actions (3-dot menu or inline icons) */
+    rowActions = [];
+    // ── Angular-parity props ─────────────────────────────────────
+    /**
+     * Column definitions — matches Angular `headers: DropiTableColumn[]`.
+     * Alias of `columns`; when provided, takes precedence.
+     */
+    headers = [];
+    /**
+     * Row data — matches Angular `data: DropiTableRow[]`.
+     * Alias of `rows`; when provided, takes precedence.
+     */
+    data = [];
+    /** Pre-selected row ids (matches Angular `selectedRowIds`) */
+    selectedRowIds = null;
+    /** Child / expanded rows data (matches Angular `childData`) */
+    childData = [];
+    /** Visible child rows (matches Angular `visibleRowsChildrens`) */
+    visibleRowsChildrens = [];
+    /** Table-level configuration object (matches Angular `dropiTableConfiguration`) */
+    dropiTableConfiguration = null;
+    /** Backend pagination / filter params (matches Angular `dropiTableBackendParams`) */
+    dropiTableBackendParams = null;
+    /** Use cursor-based pagination instead of offset (matches Angular `isCursorPagination`) */
+    isCursorPagination = false;
+    parsedColumns = [];
+    parsedRows = [];
+    parsedPageSizes = [5, 10, 25, 50];
+    parsedRowActions = [];
+    sortKey = '';
+    sortDir = null;
+    sortAsc = true;
+    selectedKeys = new Set();
+    searchTerm = '';
+    pageSize = 5;
+    showColumnMenu = false;
+    hiddenColumns = new Set();
+    openActionRow = -1;
+    dropiSort;
+    dropiSelection;
+    dropiRowClick;
+    dropiSearch;
+    dropiPageChange;
+    dropiPageSizeChange;
+    dropiAction;
+    // ── Angular-parity events ────────────────────────────────────
+    /** Matches Angular `rowsSelected` */
+    rowsSelected;
+    /** Matches Angular `actionClicked` */
+    actionClicked;
+    /** Matches Angular `onPageChange` */
+    onPageChange;
+    /** Matches Angular `onSizeChange` */
+    onSizeChange;
+    /** Matches Angular `onSortChange` */
+    onSortChange;
+    /** Matches Angular `onSearchChange` */
+    onSearchChange;
+    /** Matches Angular `expandChildren` */
+    expandChildren;
+    columnsChanged(val) {
+        this.parsedColumns = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    rowsChanged(val) {
+        this.parsedRows = typeof val === 'string' ? JSON.parse(val) : (val || []);
+        this.selectedKeys = new Set();
+    }
+    pageSizesChanged(val) {
+        this.parsedPageSizes = typeof val === 'string' ? JSON.parse(val) : (val || [5, 10, 25, 50]);
+        this.pageSize = this.parsedPageSizes[0] ?? 5;
+    }
+    rowActionsChanged(val) {
+        this.parsedRowActions = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    headersChanged(val) {
+        // `headers` is an alias for `columns`
+        const parsed = typeof val === 'string' ? JSON.parse(val) : (val || []);
+        if (parsed.length > 0)
+            this.parsedColumns = parsed;
+    }
+    dataChanged(val) {
+        // `data` is an alias for `rows`
+        const parsed = typeof val === 'string' ? JSON.parse(val) : (val || []);
+        if (parsed.length > 0) {
+            this.parsedRows = parsed;
+            this.selectedKeys = new Set();
+        }
+    }
+    componentWillLoad() {
+        // SSR hydration guard: if no data props provided, preserve server-rendered DOM
+        if (this.data == null && this.rows == null && this.headers == null && this.columns == null)
+            return;
+        // headers/data take precedence over columns/rows when provided
+        const headersSrc = (Array.isArray(this.headers) ? this.headers : []).length
+            ? this.headers : this.columns;
+        const dataSrc = (Array.isArray(this.data) ? this.data : []).length
+            ? this.data : this.rows;
+        this.columnsChanged(headersSrc);
+        this.rowsChanged(dataSrc);
+        this.pageSizesChanged(this.pageSizes);
+        this.rowActionsChanged(this.rowActions);
+    }
+    get visibleColumns() {
+        const hidden = this.hiddenColumns ?? new Set();
+        return (this.parsedColumns ?? []).filter(c => !hidden.has(c.key));
+    }
+    get filteredRows() {
+        if (!this.searchTerm)
+            return this.parsedRows;
+        const q = this.searchTerm.toLowerCase();
+        return this.parsedRows.filter(row => Object.values(row).some(v => String(v ?? '').toLowerCase().includes(q)));
+    }
+    get sortedRows() {
+        const rows = this.filteredRows;
+        if (!this.sortKey || !this.sortDir)
+            return rows;
+        const key = this.sortKey;
+        const dir = this.sortDir === 'asc' ? 1 : -1;
+        return [...rows].sort((a, b) => {
+            const av = a[key] ?? '';
+            const bv = b[key] ?? '';
+            if (av < bv)
+                return -dir;
+            if (av > bv)
+                return dir;
+            return 0;
+        });
+    }
+    get pagedRows() {
+        if (!this.showPaginator)
+            return this.sortedRows;
+        const start = (this.currentPage - 1) * this.pageSize;
+        return this.sortedRows.slice(start, start + this.pageSize);
+    }
+    handleSort(col) {
+        if (!col.sortable)
+            return;
+        if (this.sortKey === col.key) {
+            this.sortDir = this.sortDir === 'asc' ? 'desc' : this.sortDir === 'desc' ? null : 'asc';
+            this.sortAsc = this.sortDir !== 'desc';
+            if (this.sortDir === null)
+                this.sortKey = '';
+        }
+        else {
+            this.sortKey = col.key;
+            this.sortDir = 'asc';
+            this.sortAsc = true;
+        }
+        this.dropiSort.emit({ key: this.sortKey, dir: this.sortDir });
+        this.onSortChange.emit({ key: this.sortKey, dir: this.sortDir });
+    }
+    toggleRow(idx) {
+        const next = new Set(this.selectedKeys);
+        if (next.has(idx))
+            next.delete(idx);
+        else
+            next.add(idx);
+        this.selectedKeys = next;
+        const selected = Array.from(next);
+        this.dropiSelection.emit(selected);
+        this.rowsSelected.emit(selected.map(i => this.pagedRows[i]));
+    }
+    toggleAll(checked) {
+        this.selectedKeys = checked ? new Set(this.pagedRows.map((_, i) => i)) : new Set();
+        const selected = Array.from(this.selectedKeys);
+        this.dropiSelection.emit(selected);
+        this.rowsSelected.emit(selected.map(i => this.pagedRows[i]));
+    }
+    renderCellValue(value) {
+        if (value === null || value === undefined)
+            return '—';
+        if (typeof value === 'object' && value.type) {
+            switch (value.type) {
+                case 'tag':
+                    return h("dropi-tag", { type: "secondary", state: value.typeTag, text: value.value });
+                case 'date':
+                    return (h("div", { class: "date-label" }, h("span", null, new Date(value.value).toLocaleDateString('es-CO')), !value.hideTime && h("span", null, new Date(value.value).toLocaleTimeString('es-CO', { hour: '2-digit', minute: '2-digit' }))));
+                case 'country':
+                    return (h("div", { class: "flag-container" }, value.flag && h("dropi-country-flags", { width: "24", height: "24", country: value.flag, style: { display: 'inline-flex' } }), h("span", null, value.value)));
+                case 'textIcon':
+                    return (h("div", { class: "text-icon-label" }, h("dropi-icon", { name: value.icon, width: "24px", height: "24px", color: value.iconColor || 'Gray-Gray-500' }), value.value && h("span", null, value.value)));
+                case 'status':
+                    return (h("div", { class: "status-label" }, h("div", { class: "status-dot" }, h("div", { class: `dot dot-${(value.status || '').toLowerCase()}` }), h("span", { class: "status-text" }, value.status)), value.value && h("span", { class: "status-description" }, value.value)));
+                case 'image':
+                    return (h("div", { class: "image-label" }, h("div", { class: "img-container" }, h("img", { src: value.imageUrl, alt: value.value })), h("span", null, value.value)));
+                case 'textWrap':
+                    return h("div", { class: "text-wrap-label", style: { maxWidth: value.maxWidth || '220px' } }, value.value);
+                default:
+                    return h("span", { class: "table-labels" }, String(value.value ?? '—'));
+            }
+        }
+        return h("span", { class: "table-labels" }, String(value));
+    }
+    render() {
+        // SSR hydration: if parsedRows not yet initialized, preserve server-rendered shadow DOM
+        if (this.parsedRows === undefined)
+            return null;
+        const rows = this.pagedRows;
+        const allSelected = rows.length > 0 && this.selectedKeys.size === rows.length;
+        const hasActions = this.parsedRowActions.length > 0;
+        const cols = this.visibleColumns;
+        return (h("div", { class: "table-container" }, (this.showSearch || this.showColumnSelector || this.title) && (h("div", { class: "search-container" }, this.title && h("h3", { class: "table-title" }, this.title), h("div", { class: `search-actions${this.showSearch ? '' : ' only-filter'}` }, this.showSearch && (h("dropi-input", { placeholder: "Buscar", value: this.searchTerm, onOnInput: (e) => {
+                this.searchTerm = e.detail;
+                this.dropiSearch.emit(e.detail);
+                this.onSearchChange.emit(e.detail);
+            } })), this.showColumnSelector && (h("div", { class: "table-tools" }, h("div", { class: "column-selector-container" }, h("button", { class: "column-selector-btn", onClick: () => this.showColumnMenu = !this.showColumnMenu }, h("dropi-icon", { name: "list-table", width: "20px", height: "20px", color: "Gray-Gray-500" })), this.showColumnMenu && (h("div", { class: "column-selector-menu" }, this.parsedColumns.map(col => (h("div", { class: "column-selector-option", onClick: () => {
+                const next = new Set(this.hiddenColumns);
+                if (next.has(col.key))
+                    next.delete(col.key);
+                else
+                    next.add(col.key);
+                this.hiddenColumns = next;
+            } }, h("dropi-checkbox", { checked: !this.hiddenColumns.has(col.key) }), h("span", null, col.label)))), h("div", { class: "column-selector-footer" }, h("div", { class: "column-selector-all", onClick: () => {
+                this.hiddenColumns = this.hiddenColumns.size === 0
+                    ? new Set(this.parsedColumns.map(c => c.key))
+                    : new Set();
+            } }, h("dropi-checkbox", { checked: this.hiddenColumns.size === 0 }), h("span", null, "Mostrar / Ocultar todo"))))))))))), h("div", { class: `table-wrapper${hasActions ? ' has-sticky-actions' : ''}` }, h("table", { class: `custom-table${this.showCheckbox ? ' has-checkbox' : ''}` }, h("thead", null, h("tr", null, this.showCheckbox && (h("th", { class: "checkbox-header" }, h("dropi-checkbox", { checked: allSelected, onOnChange: (e) => this.toggleAll(e.detail) }))), cols.map(col => (h("th", { class: { sortable: !!col.sortable, 'low-opacity': !!col.disabledColumn, 'highlight-column': !!col.highlightColumn }, style: { textAlign: col.align || 'center', minWidth: col.minWidth, maxWidth: col.maxWidth }, onClick: () => this.handleSort(col) }, h("div", { class: `headers-container${col.align === 'left' ? ' align-left' : col.align === 'right' ? ' align-right' : ''}` }, h("div", { class: `headers${col.align === 'left' ? ' align-left' : col.align === 'right' ? ' align-right' : ''}` }, h("span", null, col.label), col.sortable && (h("div", { class: "order-icons" }, h("dropi-icon", { name: "Caret-up", width: "12px", height: "12px", color: this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200' }), h("dropi-icon", { name: "Caret-down", width: "12px", height: "12px", color: !this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200' })))))))), hasActions && h("th", { class: "actions-header actions" }, "Acciones"))), h("tbody", null, this.loading ? (Array.from({ length: 5 }).map(() => (h("tr", { class: "table-row" }, this.showCheckbox && h("td", null, h("div", { class: "skeleton skeleton--sm" })), cols.map(() => h("td", null, h("div", { class: "skeleton" }))), hasActions && h("td", null))))) : rows.length === 0 ? (h("tr", null, h("td", { colSpan: cols.length + (this.showCheckbox ? 1 : 0) + (hasActions ? 1 : 0) }, h("div", { class: "empty-table" }, h("div", { class: "empty-message-container" }, this.emptyMessage))))) : (rows.map((row, i) => (h("tr", { class: "table-row", onClick: () => this.dropiRowClick.emit({ row, index: i }) }, this.showCheckbox && (h("td", { onClick: (e) => e.stopPropagation() }, h("dropi-checkbox", { checked: this.selectedKeys.has(i), onOnChange: () => this.toggleRow(i) }))), cols.map(col => (h("td", { class: { 'low-opacity': !!col.disabledColumn, 'highlight-column': !!col.highlightColumn }, style: { minWidth: col.minWidth, maxWidth: col.maxWidth, overflow: col.maxWidth ? 'hidden' : undefined } }, h("div", { class: "cell-content", style: { textAlign: col.align || 'center' } }, this.renderCellValue(row[col.key]))))), hasActions && (h("td", { class: "action-button actions", onClick: (e) => e.stopPropagation() }, this.parsedRowActions.length > 3 ? (h("div", { style: { display: "flex", justifyContent: "center", width: "100%" } }, h("dropi-icon", { class: "action-icon", name: "Menu-dots-vertical", width: "24px", height: "24px", color: "Gray-Gray-500", onClick: () => this.openActionRow = this.openActionRow === i ? -1 : i }), this.openActionRow === i && (h("div", { class: "actions-menu" }, this.parsedRowActions.map(action => (h("div", { class: "action-item", onClick: () => { this.openActionRow = -1; this.dropiAction.emit({ row, action }); this.actionClicked.emit({ row, action }); } }, h("dropi-icon", { name: action.icon, width: "20px", height: "20px", color: action.iconColor || 'Gray-Gray-500' }), action.label))))))) : (h("div", { class: "short-actions" }, this.parsedRowActions.map(action => (h("dropi-icon", { class: "action-icon", name: action.icon, width: "24px", height: "24px", color: action.iconColor || 'Gray-Gray-500', onClick: () => { this.dropiAction.emit({ row, action }); this.actionClicked.emit({ row, action }); } })))))))))))))), this.showPaginator && (h("div", { class: "pagination" }, h("div", { class: "page-size-selector" }, h("label", null, "Mostrar"), h("select", { onChange: (e) => {
+                this.pageSize = Number(e.target.value);
+                this.currentPage = 1;
+                this.dropiPageSizeChange.emit(this.pageSize);
+                this.onSizeChange.emit(this.pageSize);
+            } }, this.parsedPageSizes.map(s => (h("option", { value: s, selected: this.pageSize === s }, s))))), h("dropi-paginator", { totalPages: this.totalPages, currentPage: this.currentPage, onPageChange: (e) => {
+                this.currentPage = e.detail;
+                this.dropiPageChange.emit(e.detail);
+                this.onPageChange.emit(e.detail);
+            } })))));
+    }
+    static get is() { return "dropi-table"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-table.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "columns": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableColumn[] | string",
+                    "resolved": "TableColumn[] | string",
+                    "references": {
+                        "TableColumn": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-table/dropi-table.tsx",
+                            "id": "src/components/dropi-table/dropi-table.tsx::TableColumn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Column definitions"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "[]"
+            },
+            "rows": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableRow[] | string",
+                    "resolved": "TableRow[] | string",
+                    "references": {
+                        "TableRow": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-table/dropi-table.tsx",
+                            "id": "src/components/dropi-table/dropi-table.tsx::TableRow"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Row data"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows",
+                "defaultValue": "[]"
+            },
+            "showCheckbox": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show checkbox column"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-checkbox",
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show loading skeleton"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "emptyMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Empty state message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-message",
+                "defaultValue": "'No hay datos disponibles'"
+            },
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Table title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title",
+                "defaultValue": "''"
+            },
+            "showSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show search input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-search",
+                "defaultValue": "false"
+            },
+            "showColumnSelector": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show column selector button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-column-selector",
+                "defaultValue": "false"
+            },
+            "showPaginator": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show paginator"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-paginator",
+                "defaultValue": "false"
+            },
+            "pageSizes": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[] | string",
+                    "resolved": "number[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Page sizes options"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page-sizes",
+                "defaultValue": "[5, 10, 25, 50]"
+            },
+            "currentPage": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current page (1-based)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-page",
+                "defaultValue": "1"
+            },
+            "totalPages": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total pages"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total-pages",
+                "defaultValue": "1"
+            },
+            "rowActions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[] | string",
+                    "resolved": "any[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show row actions (3-dot menu or inline icons)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "row-actions",
+                "defaultValue": "[]"
+            },
+            "headers": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[] | string",
+                    "resolved": "any[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Column definitions \u2014 matches Angular `headers: DropiTableColumn[]`.\nAlias of `columns`; when provided, takes precedence."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "headers",
+                "defaultValue": "[]"
+            },
+            "data": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[] | string",
+                    "resolved": "any[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Row data \u2014 matches Angular `data: DropiTableRow[]`.\nAlias of `rows`; when provided, takes precedence."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "data",
+                "defaultValue": "[]"
+            },
+            "selectedRowIds": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[] | null",
+                    "resolved": "any[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pre-selected row ids (matches Angular `selectedRowIds`)"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "childData": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[] | string",
+                    "resolved": "any[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Child / expanded rows data (matches Angular `childData`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "child-data",
+                "defaultValue": "[]"
+            },
+            "visibleRowsChildrens": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[] | string",
+                    "resolved": "any[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visible child rows (matches Angular `visibleRowsChildrens`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "visible-rows-childrens",
+                "defaultValue": "[]"
+            },
+            "dropiTableConfiguration": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Table-level configuration object (matches Angular `dropiTableConfiguration`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dropi-table-configuration",
+                "defaultValue": "null"
+            },
+            "dropiTableBackendParams": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Backend pagination / filter params (matches Angular `dropiTableBackendParams`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dropi-table-backend-params",
+                "defaultValue": "null"
+            },
+            "isCursorPagination": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use cursor-based pagination instead of offset (matches Angular `isCursorPagination`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-cursor-pagination",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "parsedColumns": {},
+            "parsedRows": {},
+            "parsedPageSizes": {},
+            "parsedRowActions": {},
+            "sortKey": {},
+            "sortDir": {},
+            "sortAsc": {},
+            "selectedKeys": {},
+            "searchTerm": {},
+            "pageSize": {},
+            "showColumnMenu": {},
+            "hiddenColumns": {},
+            "openActionRow": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiSort",
+                "name": "dropiSort",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ key: string; dir: SortDir }",
+                    "resolved": "{ key: string; dir: SortDir; }",
+                    "references": {
+                        "SortDir": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-table/dropi-table.tsx",
+                            "id": "src/components/dropi-table/dropi-table.tsx::SortDir"
+                        }
+                    }
+                }
+            }, {
+                "method": "dropiSelection",
+                "name": "dropiSelection",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiRowClick",
+                "name": "dropiRowClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ row: TableRow; index: number }",
+                    "resolved": "{ row: TableRow; index: number; }",
+                    "references": {
+                        "TableRow": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-table/dropi-table.tsx",
+                            "id": "src/components/dropi-table/dropi-table.tsx::TableRow"
+                        }
+                    }
+                }
+            }, {
+                "method": "dropiSearch",
+                "name": "dropiSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiPageChange",
+                "name": "dropiPageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiPageSizeChange",
+                "name": "dropiPageSizeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiAction",
+                "name": "dropiAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ row: TableRow; action: any }",
+                    "resolved": "{ row: TableRow; action: any; }",
+                    "references": {
+                        "TableRow": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-table/dropi-table.tsx",
+                            "id": "src/components/dropi-table/dropi-table.tsx::TableRow"
+                        }
+                    }
+                }
+            }, {
+                "method": "rowsSelected",
+                "name": "rowsSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Matches Angular `rowsSelected`"
+                },
+                "complexType": {
+                    "original": "any[]",
+                    "resolved": "any[]",
+                    "references": {}
+                }
+            }, {
+                "method": "actionClicked",
+                "name": "actionClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Matches Angular `actionClicked`"
+                },
+                "complexType": {
+                    "original": "{ row: any; action: any }",
+                    "resolved": "{ row: any; action: any; }",
+                    "references": {}
+                }
+            }, {
+                "method": "onPageChange",
+                "name": "onPageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Matches Angular `onPageChange`"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "onSizeChange",
+                "name": "onSizeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Matches Angular `onSizeChange`"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "onSortChange",
+                "name": "onSortChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Matches Angular `onSortChange`"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "onSearchChange",
+                "name": "onSearchChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Matches Angular `onSearchChange`"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "expandChildren",
+                "name": "expandChildren",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Matches Angular `expandChildren`"
+                },
+                "complexType": {
+                    "original": "{ row: any }",
+                    "resolved": "{ row: any; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "columns",
+                "methodName": "columnsChanged"
+            }, {
+                "propName": "rows",
+                "methodName": "rowsChanged"
+            }, {
+                "propName": "pageSizes",
+                "methodName": "pageSizesChanged"
+            }, {
+                "propName": "rowActions",
+                "methodName": "rowActionsChanged"
+            }, {
+                "propName": "headers",
+                "methodName": "headersChanged"
+            }, {
+                "propName": "data",
+                "methodName": "dataChanged"
+            }];
+    }
+}