@dropi/ui 0.1.19 → 0.1.20

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

@@ -0,0 +1,233 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-sidebar
+ * Collapsible vertical sidebar navigation with icon support and nested items.
+ */
+export class DropiSidebar {
+    /** Navigation items (array or JSON string) */
+    items = [];
+    /** Active item ID */
+    activeId = '';
+    /** Collapsed state (icon-only) */
+    collapsed = false;
+    /** Show collapse toggle button */
+    showToggle = true;
+    /** Logo URL (shown at top) */
+    logoUrl = '';
+    /** Sidebar width when expanded */
+    width = '240px';
+    expandedIds = new Set();
+    /** Emitted when an item is clicked. e.detail = item id */
+    dropiSidebarItemClick;
+    /** Emitted when collapse state changes. e.detail = collapsed */
+    dropiCollapse;
+    get parsedItems() {
+        const val = this.items;
+        return typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    toggleExpand(id) {
+        if (this.expandedIds.has(id))
+            this.expandedIds.delete(id);
+        else
+            this.expandedIds.add(id);
+        // Force re-render
+        this.expandedIds = new Set(this.expandedIds);
+    }
+    renderItem(item, depth = 0) {
+        const hasChildren = item.children && item.children.length > 0;
+        const isExpanded = this.expandedIds.has(item.id);
+        const isActive = item.id === this.activeId;
+        return (h("li", null, h("button", { class: {
+                'sidebar__item': true,
+                'sidebar__item--active': isActive,
+                'sidebar__item--depth1': depth === 1,
+            }, style: { paddingLeft: depth > 0 ? `${12 + depth * 12}px` : undefined }, onClick: () => {
+                if (hasChildren)
+                    this.toggleExpand(item.id);
+                else
+                    this.dropiSidebarItemClick.emit(item.id);
+            }, type: "button", title: this.collapsed ? item.label : undefined }, item.icon && (h("dropi-icon", { name: item.icon, width: "18px", height: "18px", color: isActive ? 'Primary-Primary-500' : 'Gray-Gray-600' })), !this.collapsed && (h("span", { class: "sidebar__item-label" }, item.label)), !this.collapsed && item.badge != null && String(item.badge) !== '0' && (h("span", { class: "sidebar__badge" }, item.badge)), !this.collapsed && hasChildren && (h("dropi-icon", { name: isExpanded ? 'Arrow-Up-2' : 'Arrow-Down-2', width: "12px", height: "12px", color: "Gray-Gray-400" }))), hasChildren && isExpanded && !this.collapsed && (h("ul", { class: "sidebar__sub" }, item.children.map(child => this.renderItem(child, depth + 1))))));
+    }
+    render() {
+        const items = this.parsedItems;
+        return (h("aside", { key: '97c46e8c84a9e389fb67b34364321c35b0c5ebf2', class: { 'sidebar': true, 'sidebar--collapsed': this.collapsed }, style: { width: this.collapsed ? '56px' : this.width } }, this.logoUrl && (h("div", { key: '211e43514bcdd6b613aa1001ef630e5b9629091a', class: "sidebar__logo-wrap" }, h("img", { key: 'ce6b7a3b9ce26f4caa1eafd4821f5a2fa70e4dda', class: "sidebar__logo", src: this.logoUrl, alt: "Logo" }))), this.showToggle && (h("button", { key: 'ba66d7664b76ecdea519f9d128e998331106da8f', class: "sidebar__toggle", onClick: () => {
+                this.collapsed = !this.collapsed;
+                this.dropiCollapse.emit(this.collapsed);
+            }, "aria-label": this.collapsed ? 'Expandir' : 'Colapsar', type: "button" }, h("dropi-icon", { key: '3a362cb657dfa881523ae29c1e677e6cc16afb61', name: this.collapsed ? 'Arrow-Right-2' : 'Arrow-Left-2', width: "16px", height: "16px", color: "Gray-Gray-400" }))), h("nav", { key: '02152d2e92f7802daa1192bd9d00d21c13619de4', class: "sidebar__nav" }, h("ul", { key: '9e90a7d2d25a63885713b881c6d091528027ec57', class: "sidebar__list" }, items.map(item => this.renderItem(item)))), h("div", { key: 'b70d89a324de1b56e022ec66b52ecb2b01031d34', class: "sidebar__footer" }, h("slot", { key: '6ead0e515e6a59194cd3495bd691ae9acdb0dd05', name: "footer" }))));
+    }
+    static get is() { return "dropi-sidebar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-sidebar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-sidebar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SidebarItem[] | string",
+                    "resolved": "SidebarItem[] | string",
+                    "references": {
+                        "SidebarItem": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-sidebar/dropi-sidebar.tsx",
+                            "id": "src/components/dropi-sidebar/dropi-sidebar.tsx::SidebarItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Navigation items (array or JSON string)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items",
+                "defaultValue": "[]"
+            },
+            "activeId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active item ID"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-id",
+                "defaultValue": "''"
+            },
+            "collapsed": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Collapsed state (icon-only)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapsed",
+                "defaultValue": "false"
+            },
+            "showToggle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show collapse toggle button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-toggle",
+                "defaultValue": "true"
+            },
+            "logoUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Logo URL (shown at top)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "logo-url",
+                "defaultValue": "''"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sidebar width when expanded"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "'240px'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiSidebarItemClick",
+                "name": "dropiSidebarItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an item is clicked. e.detail = item id"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiCollapse",
+                "name": "dropiCollapse",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when collapse state changes. e.detail = collapsed"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/dropi-simple-stepper/dropi-simple-stepper.js

@@ -28,7 +28,7 @@ export class DropiSimpleStepper {
     render() {
         const labels = this.parsedLabels;
         const steps = Array.from({ length: this.stepsCount }, (_, i) => i + 1);
-        return (h("div", { key: 'fc845e4030b4a41c636bc93b969ec561a8e152a5', class: "stepper" }, steps.map((step, i) => {
+        return (h("div", { key: '9991a928ba08a7720d8ded5aea01b3bc77372e71', class: "stepper" }, steps.map((step, i) => {
             const isCompleted = step < this.currentStep;
             const isActive = step === this.currentStep;
             const isLast = i === steps.length - 1;

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

@@ -33,7 +33,7 @@ export class DropiSteps {
     render() {
         const labels = this.parsedLabels;
         const steps = Array.from({ length: this.stepsCount }, (_, i) => i + 1);
-        return (h("div", { key: '446597aa40fdfd1c5e5274a89d3cc45a98003da9', class: "stepper" }, steps.map((step) => {
+        return (h("div", { key: '95573c2ac185f7fc63fa804a03873499ba296e5c', class: "stepper" }, steps.map((step) => {
             const state = this.stepState(step);
             const label = labels[step - 1];
             const isLast = step === this.stepsCount;

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

@@ -16,7 +16,7 @@ export class DropiSwitch {
         this.dropiChange.emit(this.isChecked);
     }
     render() {
-        return (h("label", { key: 'd756605f85a24fdbf8714824921b17e618bde921', class: "toggle-switch" }, h("input", { key: '8d774e122778bd286269552ebabac1c04aa894c4', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: 'ff8d52dec5653e82fa965bca0ddd19ecb49cdad3', class: "slider" })));
+        return (h("label", { key: 'f02520c1b71af187ddfb766e4bac4e16482bb5cc', class: "toggle-switch" }, h("input", { key: '13b41ec9b7f69512be6d556f1946a3506d9557a3', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: '0bb19ad9767c1e7c5956ef834228a6a2406c225c', class: "slider" })));
     }
     static get is() { return "dropi-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,80 @@
+:host { display: block; width: 100%; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.table-wrap {
+  width: 100%;
+  overflow-x: auto;
+  border: 1px solid var(--Gray-Gray-100, #eceef4);
+  border-radius: var(--Border-2, 8px);
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-700, #32394d);
+  background: var(--Neutral-White, #fff);
+}
+
+/* Header */
+.table__th {
+  padding: var(--Size-3, 12px) var(--Size-3, 12px);
+  background: var(--Gray-Gray-50, #f7f8fa);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Gray-Gray-600, #475066);
+  font-size: var(--font-size-xs, 10px);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+  border-bottom: 1px solid var(--Gray-Gray-100, #eceef4);
+  user-select: none;
+}
+.table__th--check { width: 40px; }
+.table__th--sortable { cursor: pointer; }
+.table__th--sortable:hover { background: var(--Gray-Gray-100, #eceef4); }
+
+.table__th-inner {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* Body */
+.table__tr {
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.table__tr:hover { background: var(--Gray-Gray-50, #f7f8fa); }
+.table__tr--selected { background: var(--Primary-Primary-50, #fff5eb); }
+
+.table--striped .table__tr:nth-child(even) { background: var(--Gray-Gray-50, #f7f8fa); }
+.table--striped .table__tr:nth-child(even):hover { background: var(--Gray-Gray-100, #eceef4); }
+
+.table__td {
+  padding: var(--Size-3, 12px);
+  border-bottom: 1px solid var(--Gray-Gray-100, #eceef4);
+  vertical-align: middle;
+}
+.table__td--check { width: 40px; }
+
+.table__td--empty {
+  text-align: center;
+  padding: var(--Size-8, 48px) var(--Size-4, 16px);
+  color: var(--Gray-Gray-400, #858ea6);
+}
+.table__td--empty p { margin: var(--Size-2, 8px) 0 0; }
+
+/* Skeleton */
+.skeleton {
+  height: 14px;
+  background: linear-gradient(90deg, var(--Gray-Gray-100, #eceef4) 25%, var(--Gray-Gray-50, #f7f8fa) 50%, var(--Gray-Gray-100, #eceef4) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.4s infinite;
+  border-radius: var(--Border-1, 4px);
+}
+.skeleton--sm { width: 20px; }
+
+@keyframes shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}

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

@@ -0,0 +1,333 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-table
+ * Data table with sortable columns, row selection, and empty state.
+ * Pass columns and rows as JSON strings or arrays.
+ */
+export class DropiTable {
+    /** Column definitions (array or JSON string) */
+    columns = [];
+    /** Row data (array or JSON string) */
+    rows = [];
+    /** Enable row selection (checkboxes) */
+    selectable = false;
+    /** Show loading skeleton */
+    loading = false;
+    /** Text shown when no rows */
+    emptyMessage = 'No hay datos disponibles';
+    /** Stripe alternate rows */
+    striped = false;
+    parsedColumns = [];
+    parsedRows = [];
+    sortKey = '';
+    sortDir = null;
+    selectedKeys = new Set();
+    /** Emitted when sort changes. e.detail = { key, dir } */
+    dropiSort;
+    /** Emitted when selection changes. e.detail = selected row indices */
+    dropiSelection;
+    /** Emitted when a row is clicked. e.detail = { row, index } */
+    dropiRowClick;
+    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();
+    }
+    componentWillLoad() {
+        this.columnsChanged(this.columns);
+        this.rowsChanged(this.rows);
+    }
+    get sortedRows() {
+        if (!this.sortKey || !this.sortDir)
+            return this.parsedRows;
+        const key = this.sortKey;
+        const dir = this.sortDir === 'asc' ? 1 : -1;
+        return [...this.parsedRows].sort((a, b) => {
+            const av = a[key] ?? '';
+            const bv = b[key] ?? '';
+            if (av < bv)
+                return -dir;
+            if (av > bv)
+                return dir;
+            return 0;
+        });
+    }
+    handleSort(col) {
+        if (!col.sortable)
+            return;
+        if (this.sortKey === col.key) {
+            this.sortDir = this.sortDir === 'asc' ? 'desc' : this.sortDir === 'desc' ? null : 'asc';
+            if (this.sortDir === null)
+                this.sortKey = '';
+        }
+        else {
+            this.sortKey = col.key;
+            this.sortDir = 'asc';
+        }
+        this.dropiSort.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;
+        this.dropiSelection.emit(Array.from(next));
+    }
+    toggleAll(checked) {
+        this.selectedKeys = checked
+            ? new Set(this.sortedRows.map((_, i) => i))
+            : new Set();
+        this.dropiSelection.emit(Array.from(this.selectedKeys));
+    }
+    sortIcon(col) {
+        if (!col.sortable)
+            return null;
+        if (this.sortKey !== col.key) {
+            return h("dropi-icon", { name: "Sort", width: "12px", height: "12px", color: "Gray-Gray-300" });
+        }
+        return this.sortDir === 'asc'
+            ? h("dropi-icon", { name: "Arrow-Up-2", width: "12px", height: "12px", color: "Primary-Primary-500" })
+            : h("dropi-icon", { name: "Arrow-Down-2", width: "12px", height: "12px", color: "Primary-Primary-500" });
+    }
+    render() {
+        const rows = this.sortedRows;
+        const allSelected = rows.length > 0 && this.selectedKeys.size === rows.length;
+        return (h("div", { key: '3e06da209d1f71b8a4a250f4bcd8a8213f34781d', class: "table-wrap" }, h("table", { key: '20056c30e2652f2a405eeb00954dd7b9c9b5924b', class: { 'table': true, 'table--striped': this.striped } }, h("thead", { key: '1a1ea1914f81d1ef8814f202de4d60308801dc1d' }, h("tr", { key: '22447d7fef0cf22c27c6249570c454d44b0865d3' }, this.selectable && (h("th", { key: 'd51aa876d97e01840a5adc34a5ec53f30fc2cac6', class: "table__th table__th--check" }, h("dropi-checkbox", { key: '192639cf8599dc5f3b095092a403509050e43efa', checked: allSelected, onDropiChange: (e) => this.toggleAll(e.detail) }))), this.parsedColumns.map(col => (h("th", { class: {
+                'table__th': true,
+                'table__th--sortable': !!col.sortable,
+            }, style: { width: col.width, textAlign: col.align || 'left' }, onClick: () => this.handleSort(col) }, h("span", { class: "table__th-inner" }, col.label, this.sortIcon(col))))))), h("tbody", { key: '93f65647369b59f913b381f541a18a215e8e0e9a' }, this.loading ? (Array.from({ length: 5 }).map(() => (h("tr", { class: "table__tr--skeleton" }, this.selectable && h("td", { class: "table__td" }, h("div", { class: "skeleton skeleton--sm" })), this.parsedColumns.map(() => (h("td", { class: "table__td" }, h("div", { class: "skeleton" })))))))) : rows.length === 0 ? (h("tr", null, h("td", { class: "table__td table__td--empty", colSpan: this.parsedColumns.length + (this.selectable ? 1 : 0) }, h("dropi-icon", { name: "Document", width: "24px", height: "24px", color: "Gray-Gray-300" }), h("p", null, this.emptyMessage)))) : (rows.map((row, i) => (h("tr", { class: {
+                'table__tr': true,
+                'table__tr--selected': this.selectedKeys.has(i),
+            }, onClick: () => this.dropiRowClick.emit({ row, index: i }) }, this.selectable && (h("td", { class: "table__td table__td--check", onClick: (e) => e.stopPropagation() }, h("dropi-checkbox", { checked: this.selectedKeys.has(i), onDropiChange: () => this.toggleRow(i) }))), this.parsedColumns.map(col => (h("td", { class: "table__td", style: { textAlign: col.align || 'left' } }, row[col.key] ?? '—')))))))))));
+    }
+    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 (array or JSON string)"
+                },
+                "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 (array or JSON string)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows",
+                "defaultValue": "[]"
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable row selection (checkboxes)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable",
+                "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": "Text shown when no rows"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-message",
+                "defaultValue": "'No hay datos disponibles'"
+            },
+            "striped": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stripe alternate rows"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "striped",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "parsedColumns": {},
+            "parsedRows": {},
+            "sortKey": {},
+            "sortDir": {},
+            "selectedKeys": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiSort",
+                "name": "dropiSort",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when sort changes. e.detail = { key, dir }"
+                },
+                "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": "Emitted when selection changes. e.detail = selected row indices"
+                },
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiRowClick",
+                "name": "dropiRowClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a row is clicked. e.detail = { row, index }"
+                },
+                "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"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "columns",
+                "methodName": "columnsChanged"
+            }, {
+                "propName": "rows",
+                "methodName": "rowsChanged"
+            }];
+    }
+}