@dropi/ui 0.1.55 → 999.0.0

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

@@ -1,981 +0,0 @@
-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 */
-    tableTitle = '';
-    /** 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` */
-    dropiRowsSelected;
-    /** Matches Angular `actionClicked` */
-    dropiActionClick;
-    /** Matches Angular `onPageChange` */
-    dropiPageChangeAngular;
-    /** Matches Angular `onSizeChange` */
-    dropiSizeChangeAngular;
-    /** Matches Angular `onSortChange` */
-    dropiSortChangeAngular;
-    /** Matches Angular `onSearchChange` */
-    dropiSearchChangeAngular;
-    /** 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.dropiSortChangeAngular.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.dropiRowsSelected.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.dropiRowsSelected.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, iconWidth: "24px", iconHeight: "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);
-                case 'textCopy':
-                case 'tokenAction':
-                    return (h("div", { class: "text-icon-label", style: { display: 'flex', alignItems: 'center' } }, h("div", { style: { display: 'flex', alignItems: 'center' } }, h("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, value.value)), h("div", { style: { display: 'flex', justifyContent: 'flex-start', paddingLeft: '0.5rem' } }, h("dropi-icon", { name: value.revealed ? "Clon" : "Eye", iconWidth: "18px", iconHeight: "18px", color: "Gray-Gray-500", style: { cursor: 'pointer', flexShrink: '0' }, onClick: (e) => {
-                            e.stopPropagation();
-                            const actionId = value.revealed ? 'copy' : 'reveal';
-                            this.dropiAction.emit({ row: value.row, action: { id: actionId, value: value.value } });
-                            this.dropiActionClick.emit({ row: value.row, action: { id: actionId, value: 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.tableTitle) && (h("div", { class: "search-container" }, this.tableTitle && h("div", { class: "table-title Body-L-Bold" }, this.tableTitle), h("div", { class: `search-actions${this.showSearch ? '' : ' only-filter'}` }, this.showSearch && (h("dropi-input", { inputId: "_table-search", name: "_table-search", placeholder: "Buscar", value: this.searchTerm, onDropiInput: (e) => {
-                this.searchTerm = e.detail;
-                this.dropiSearch.emit(e.detail);
-                this.dropiSearchChangeAngular.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", iconWidth: "20px", iconHeight: "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", { name: "_table-col-toggle", 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", { name: "_table-col-toggle-all", 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", { name: "_table-select-all", checked: allSelected, onDropiChange: (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", iconWidth: "12px", iconHeight: "12px", color: this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200' }), h("dropi-icon", { name: "Caret-down", iconWidth: "12px", iconHeight: "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", { name: "_table-row-select", checked: this.selectedKeys.has(i), onDropiChange: () => 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 > 2 ? (h("div", { style: { display: "flex", justifyContent: "center", width: "100%" } }, h("dropi-icon", { class: "action-icon", name: "Menu-dots-vertical", iconWidth: "24px", iconHeight: "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.dropiActionClick.emit({ row, action }); } }, h("dropi-icon", { name: action.icon, iconWidth: "20px", iconHeight: "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, iconWidth: "24px", iconHeight: "24px", color: action.iconColor || 'Gray-Gray-500', onClick: () => { this.dropiAction.emit({ row, action }); this.dropiActionClick.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.dropiSizeChangeAngular.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, onDropiPageChange: (e) => {
-                this.currentPage = e.detail;
-                this.dropiPageChange.emit(e.detail);
-                this.dropiPageChangeAngular.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'"
-            },
-            "tableTitle": {
-                "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": "table-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": "dropiRowsSelected",
-                "name": "dropiRowsSelected",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Matches Angular `rowsSelected`"
-                },
-                "complexType": {
-                    "original": "any[]",
-                    "resolved": "any[]",
-                    "references": {}
-                }
-            }, {
-                "method": "dropiActionClick",
-                "name": "dropiActionClick",
-                "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": "dropiPageChangeAngular",
-                "name": "dropiPageChangeAngular",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Matches Angular `onPageChange`"
-                },
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                }
-            }, {
-                "method": "dropiSizeChangeAngular",
-                "name": "dropiSizeChangeAngular",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Matches Angular `onSizeChange`"
-                },
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                }
-            }, {
-                "method": "dropiSortChangeAngular",
-                "name": "dropiSortChangeAngular",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Matches Angular `onSortChange`"
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }, {
-                "method": "dropiSearchChangeAngular",
-                "name": "dropiSearchChangeAngular",
-                "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"
-            }];
-    }
-}