snice 2.1.4 → 2.2.0

package/dist/components/table/snice-table.js

@@ -0,0 +1,792 @@
+import { __runInitializers, __esDecorate } from 'tslib';
+import { element, property, query, request, watch, on, dispatch } from 'snice';
+import '../input/snice-input.js';
+import '../select/snice-select.js';
+import './snice-cell.js';
+import './snice-cell-text.js';
+import './snice-cell-number.js';
+import './snice-cell-date.js';
+import './snice-cell-boolean.js';
+import './snice-cell-rating.js';
+import './snice-cell-progress.js';
+import './snice-cell-duration.js';
+import './snice-cell-filesize.js';
+import './snice-cell-sparkline.js';
+import '../select/snice-option.js';
+import '../snice-cell-C8aBfN72.js';
+import './snice-rating.js';
+import './snice-progress.js';
+
+let SniceTable = (() => {
+    let _classDecorators = [element('snice-table')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _striped_decorators;
+    let _striped_initializers = [];
+    let _striped_extraInitializers = [];
+    let _searchable_decorators;
+    let _searchable_initializers = [];
+    let _searchable_extraInitializers = [];
+    let _sortable_decorators;
+    let _sortable_initializers = [];
+    let _sortable_extraInitializers = [];
+    let _selectable_decorators;
+    let _selectable_initializers = [];
+    let _selectable_extraInitializers = [];
+    let _hoverable_decorators;
+    let _hoverable_initializers = [];
+    let _hoverable_extraInitializers = [];
+    let _clickable_decorators;
+    let _clickable_initializers = [];
+    let _clickable_extraInitializers = [];
+    let _columns_decorators;
+    let _columns_initializers = [];
+    let _columns_extraInitializers = [];
+    let _data_decorators;
+    let _data_initializers = [];
+    let _data_extraInitializers = [];
+    let _currentSort_decorators;
+    let _currentSort_initializers = [];
+    let _currentSort_extraInitializers = [];
+    let _searchText_decorators;
+    let _searchText_initializers = [];
+    let _searchText_extraInitializers = [];
+    let _selector_decorators;
+    let _selector_initializers = [];
+    let _selector_extraInitializers = [];
+    let _selectorOptions_decorators;
+    let _selectorOptions_initializers = [];
+    let _selectorOptions_extraInitializers = [];
+    let _loading_decorators;
+    let _loading_initializers = [];
+    let _loading_extraInitializers = [];
+    let _selectedRows_decorators;
+    let _selectedRows_initializers = [];
+    let _selectedRows_extraInitializers = [];
+    let _table_decorators;
+    let _table_initializers = [];
+    let _table_extraInitializers = [];
+    let _thead_decorators;
+    let _thead_initializers = [];
+    let _thead_extraInitializers = [];
+    let _tbody_decorators;
+    let _tbody_initializers = [];
+    let _tbody_extraInitializers = [];
+    let _getTableConfig_decorators;
+    let _getTableData_decorators;
+    let _handleSelectorOptionsChange_decorators;
+    let _handleSortableChange_decorators;
+    let _handleSelectableChange_decorators;
+    let _handleColumnsChange_decorators;
+    let _handleDataChange_decorators;
+    let _handleSelectedRowsChange_decorators;
+    let _handleSortChange_decorators;
+    let _handleSort_decorators;
+    let _handleRowSelect_decorators;
+    let _handleSelectAll_decorators;
+    let _handleRowClick_decorators;
+    let _onAttached_decorators;
+    let _handleSearchChange_decorators;
+    let _handleSelectorChange_decorators;
+    let _dispatchRowSelectionChanged_decorators;
+    let _dispatchSelectAllChanged_decorators;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        constructor() {
+            super(...arguments);
+            this.striped = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _striped_initializers, false));
+            this.searchable = (__runInitializers(this, _striped_extraInitializers), __runInitializers(this, _searchable_initializers, false));
+            this.sortable = (__runInitializers(this, _searchable_extraInitializers), __runInitializers(this, _sortable_initializers, false));
+            this.selectable = (__runInitializers(this, _sortable_extraInitializers), __runInitializers(this, _selectable_initializers, false));
+            this.hoverable = (__runInitializers(this, _selectable_extraInitializers), __runInitializers(this, _hoverable_initializers, true));
+            this.clickable = (__runInitializers(this, _hoverable_extraInitializers), __runInitializers(this, _clickable_initializers, false));
+            this.columns = (__runInitializers(this, _clickable_extraInitializers), __runInitializers(this, _columns_initializers, []));
+            this.data = (__runInitializers(this, _columns_extraInitializers), __runInitializers(this, _data_initializers, []));
+            this.currentSort = (__runInitializers(this, _data_extraInitializers), __runInitializers(this, _currentSort_initializers, []));
+            this.searchText = (__runInitializers(this, _currentSort_extraInitializers), __runInitializers(this, _searchText_initializers, ''));
+            this.selector = (__runInitializers(this, _searchText_extraInitializers), __runInitializers(this, _selector_initializers, ''));
+            this.selectorOptions = (__runInitializers(this, _selector_extraInitializers), __runInitializers(this, _selectorOptions_initializers, []));
+            this.loading = (__runInitializers(this, _selectorOptions_extraInitializers), __runInitializers(this, _loading_initializers, false));
+            this.selectedRows = (__runInitializers(this, _loading_extraInitializers), __runInitializers(this, _selectedRows_initializers, []));
+            this.table = (__runInitializers(this, _selectedRows_extraInitializers), __runInitializers(this, _table_initializers, void 0));
+            this.thead = (__runInitializers(this, _table_extraInitializers), __runInitializers(this, _thead_initializers, void 0));
+            this.tbody = (__runInitializers(this, _thead_extraInitializers), __runInitializers(this, _tbody_initializers, void 0));
+            this.dataRequestTimeout = (__runInitializers(this, _tbody_extraInitializers), null);
+        }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _striped_decorators = [property({ type: Boolean, reflect: true, attribute: 'striped' })];
+            _searchable_decorators = [property({ type: Boolean, reflect: true, attribute: 'searchable' })];
+            _sortable_decorators = [property({ type: Boolean, reflect: true, attribute: 'sortable' })];
+            _selectable_decorators = [property({ type: Boolean, reflect: true, attribute: 'selectable' })];
+            _hoverable_decorators = [property({ type: Boolean, reflect: true, attribute: 'hoverable' })];
+            _clickable_decorators = [property({ type: Boolean, reflect: true, attribute: 'clickable' })];
+            _columns_decorators = [property({ type: Array, attribute: 'columns' })];
+            _data_decorators = [property({ type: Array, attribute: 'data' })];
+            _currentSort_decorators = [property({ type: Array, attribute: 'current-sort' })];
+            _searchText_decorators = [property({ type: String, attribute: 'search-text' })];
+            _selector_decorators = [property({ type: String, attribute: 'selector' })];
+            _selectorOptions_decorators = [property({ type: Array, attribute: 'selector-options' })];
+            _loading_decorators = [property({ type: Boolean, reflect: true, attribute: 'loading' })];
+            _selectedRows_decorators = [property({ type: Array, attribute: 'selected-rows' })];
+            _table_decorators = [query('table')];
+            _thead_decorators = [query('thead')];
+            _tbody_decorators = [query('tbody')];
+            _getTableConfig_decorators = [request('@snice/table/config')];
+            _getTableData_decorators = [request('@snice/table/data')];
+            _handleSelectorOptionsChange_decorators = [watch('selector-options')];
+            _handleSortableChange_decorators = [watch('sortable')];
+            _handleSelectableChange_decorators = [watch('selectable')];
+            _handleColumnsChange_decorators = [watch('columns')];
+            _handleDataChange_decorators = [watch('data', 'loading')];
+            _handleSelectedRowsChange_decorators = [watch('selected-rows')];
+            _handleSortChange_decorators = [watch('current-sort')];
+            _handleSort_decorators = [on('click', 'th.sortable')];
+            _handleRowSelect_decorators = [on('change', '.row-select')];
+            _handleSelectAll_decorators = [on('change', '.select-all')];
+            _handleRowClick_decorators = [on('click', 'tbody tr')];
+            _onAttached_decorators = [on('@snice/controller-attached')];
+            _handleSearchChange_decorators = [on('input', '.search-input', { debounce: 500 })];
+            _handleSelectorChange_decorators = [on('@snice/select/change', '.selector-input', { debounce: 150 })];
+            _dispatchRowSelectionChanged_decorators = [dispatch('@snice/table/row-selection-changed', { bubbles: true, composed: true })];
+            _dispatchSelectAllChanged_decorators = [dispatch('@snice/table/select-all-changed', { bubbles: true, composed: true })];
+            __esDecorate(this, null, _getTableConfig_decorators, { kind: "method", name: "getTableConfig", static: false, private: false, access: { has: obj => "getTableConfig" in obj, get: obj => obj.getTableConfig }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _getTableData_decorators, { kind: "method", name: "getTableData", static: false, private: false, access: { has: obj => "getTableData" in obj, get: obj => obj.getTableData }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleSelectorOptionsChange_decorators, { kind: "method", name: "handleSelectorOptionsChange", static: false, private: false, access: { has: obj => "handleSelectorOptionsChange" in obj, get: obj => obj.handleSelectorOptionsChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleSortableChange_decorators, { kind: "method", name: "handleSortableChange", static: false, private: false, access: { has: obj => "handleSortableChange" in obj, get: obj => obj.handleSortableChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleSelectableChange_decorators, { kind: "method", name: "handleSelectableChange", static: false, private: false, access: { has: obj => "handleSelectableChange" in obj, get: obj => obj.handleSelectableChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleColumnsChange_decorators, { kind: "method", name: "handleColumnsChange", static: false, private: false, access: { has: obj => "handleColumnsChange" in obj, get: obj => obj.handleColumnsChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleDataChange_decorators, { kind: "method", name: "handleDataChange", static: false, private: false, access: { has: obj => "handleDataChange" in obj, get: obj => obj.handleDataChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleSelectedRowsChange_decorators, { kind: "method", name: "handleSelectedRowsChange", static: false, private: false, access: { has: obj => "handleSelectedRowsChange" in obj, get: obj => obj.handleSelectedRowsChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleSortChange_decorators, { kind: "method", name: "handleSortChange", static: false, private: false, access: { has: obj => "handleSortChange" in obj, get: obj => obj.handleSortChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleSort_decorators, { kind: "method", name: "handleSort", static: false, private: false, access: { has: obj => "handleSort" in obj, get: obj => obj.handleSort }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleRowSelect_decorators, { kind: "method", name: "handleRowSelect", static: false, private: false, access: { has: obj => "handleRowSelect" in obj, get: obj => obj.handleRowSelect }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleSelectAll_decorators, { kind: "method", name: "handleSelectAll", static: false, private: false, access: { has: obj => "handleSelectAll" in obj, get: obj => obj.handleSelectAll }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleRowClick_decorators, { kind: "method", name: "handleRowClick", static: false, private: false, access: { has: obj => "handleRowClick" in obj, get: obj => obj.handleRowClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onAttached_decorators, { kind: "method", name: "onAttached", static: false, private: false, access: { has: obj => "onAttached" in obj, get: obj => obj.onAttached }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleSearchChange_decorators, { kind: "method", name: "handleSearchChange", static: false, private: false, access: { has: obj => "handleSearchChange" in obj, get: obj => obj.handleSearchChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleSelectorChange_decorators, { kind: "method", name: "handleSelectorChange", static: false, private: false, access: { has: obj => "handleSelectorChange" in obj, get: obj => obj.handleSelectorChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _dispatchRowSelectionChanged_decorators, { kind: "method", name: "dispatchRowSelectionChanged", static: false, private: false, access: { has: obj => "dispatchRowSelectionChanged" in obj, get: obj => obj.dispatchRowSelectionChanged }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _dispatchSelectAllChanged_decorators, { kind: "method", name: "dispatchSelectAllChanged", static: false, private: false, access: { has: obj => "dispatchSelectAllChanged" in obj, get: obj => obj.dispatchSelectAllChanged }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _striped_decorators, { kind: "field", name: "striped", static: false, private: false, access: { has: obj => "striped" in obj, get: obj => obj.striped, set: (obj, value) => { obj.striped = value; } }, metadata: _metadata }, _striped_initializers, _striped_extraInitializers);
+            __esDecorate(null, null, _searchable_decorators, { kind: "field", name: "searchable", static: false, private: false, access: { has: obj => "searchable" in obj, get: obj => obj.searchable, set: (obj, value) => { obj.searchable = value; } }, metadata: _metadata }, _searchable_initializers, _searchable_extraInitializers);
+            __esDecorate(null, null, _sortable_decorators, { kind: "field", name: "sortable", static: false, private: false, access: { has: obj => "sortable" in obj, get: obj => obj.sortable, set: (obj, value) => { obj.sortable = value; } }, metadata: _metadata }, _sortable_initializers, _sortable_extraInitializers);
+            __esDecorate(null, null, _selectable_decorators, { kind: "field", name: "selectable", static: false, private: false, access: { has: obj => "selectable" in obj, get: obj => obj.selectable, set: (obj, value) => { obj.selectable = value; } }, metadata: _metadata }, _selectable_initializers, _selectable_extraInitializers);
+            __esDecorate(null, null, _hoverable_decorators, { kind: "field", name: "hoverable", static: false, private: false, access: { has: obj => "hoverable" in obj, get: obj => obj.hoverable, set: (obj, value) => { obj.hoverable = value; } }, metadata: _metadata }, _hoverable_initializers, _hoverable_extraInitializers);
+            __esDecorate(null, null, _clickable_decorators, { kind: "field", name: "clickable", static: false, private: false, access: { has: obj => "clickable" in obj, get: obj => obj.clickable, set: (obj, value) => { obj.clickable = value; } }, metadata: _metadata }, _clickable_initializers, _clickable_extraInitializers);
+            __esDecorate(null, null, _columns_decorators, { kind: "field", name: "columns", static: false, private: false, access: { has: obj => "columns" in obj, get: obj => obj.columns, set: (obj, value) => { obj.columns = value; } }, metadata: _metadata }, _columns_initializers, _columns_extraInitializers);
+            __esDecorate(null, null, _data_decorators, { kind: "field", name: "data", static: false, private: false, access: { has: obj => "data" in obj, get: obj => obj.data, set: (obj, value) => { obj.data = value; } }, metadata: _metadata }, _data_initializers, _data_extraInitializers);
+            __esDecorate(null, null, _currentSort_decorators, { kind: "field", name: "currentSort", static: false, private: false, access: { has: obj => "currentSort" in obj, get: obj => obj.currentSort, set: (obj, value) => { obj.currentSort = value; } }, metadata: _metadata }, _currentSort_initializers, _currentSort_extraInitializers);
+            __esDecorate(null, null, _searchText_decorators, { kind: "field", name: "searchText", static: false, private: false, access: { has: obj => "searchText" in obj, get: obj => obj.searchText, set: (obj, value) => { obj.searchText = value; } }, metadata: _metadata }, _searchText_initializers, _searchText_extraInitializers);
+            __esDecorate(null, null, _selector_decorators, { kind: "field", name: "selector", static: false, private: false, access: { has: obj => "selector" in obj, get: obj => obj.selector, set: (obj, value) => { obj.selector = value; } }, metadata: _metadata }, _selector_initializers, _selector_extraInitializers);
+            __esDecorate(null, null, _selectorOptions_decorators, { kind: "field", name: "selectorOptions", static: false, private: false, access: { has: obj => "selectorOptions" in obj, get: obj => obj.selectorOptions, set: (obj, value) => { obj.selectorOptions = value; } }, metadata: _metadata }, _selectorOptions_initializers, _selectorOptions_extraInitializers);
+            __esDecorate(null, null, _loading_decorators, { kind: "field", name: "loading", static: false, private: false, access: { has: obj => "loading" in obj, get: obj => obj.loading, set: (obj, value) => { obj.loading = value; } }, metadata: _metadata }, _loading_initializers, _loading_extraInitializers);
+            __esDecorate(null, null, _selectedRows_decorators, { kind: "field", name: "selectedRows", static: false, private: false, access: { has: obj => "selectedRows" in obj, get: obj => obj.selectedRows, set: (obj, value) => { obj.selectedRows = value; } }, metadata: _metadata }, _selectedRows_initializers, _selectedRows_extraInitializers);
+            __esDecorate(null, null, _table_decorators, { kind: "field", name: "table", static: false, private: false, access: { has: obj => "table" in obj, get: obj => obj.table, set: (obj, value) => { obj.table = value; } }, metadata: _metadata }, _table_initializers, _table_extraInitializers);
+            __esDecorate(null, null, _thead_decorators, { kind: "field", name: "thead", static: false, private: false, access: { has: obj => "thead" in obj, get: obj => obj.thead, set: (obj, value) => { obj.thead = value; } }, metadata: _metadata }, _thead_initializers, _thead_extraInitializers);
+            __esDecorate(null, null, _tbody_decorators, { kind: "field", name: "tbody", static: false, private: false, access: { has: obj => "tbody" in obj, get: obj => obj.tbody, set: (obj, value) => { obj.tbody = value; } }, metadata: _metadata }, _tbody_initializers, _tbody_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        async *getTableConfig() {
+            const config = await (yield {});
+            this.columns = config.columns || [];
+            this.selectorOptions = config.selectorOptions || [];
+            this.render();
+            return config;
+        }
+        async *getTableData() {
+            this.loading = true;
+            this.selectedRows = []; // Clear selections when loading new data
+            try {
+                const params = {
+                    search: this.searchText,
+                    sort: this.currentSort,
+                    selector: this.selector
+                };
+                console.log('Requesting table data with params:', params);
+                const response = await (yield params);
+                console.log('Received table data response:', response);
+                this.data = response.data || [];
+                this.loading = false;
+                this.render();
+                return response;
+            }
+            catch (error) {
+                console.error('Error loading table data:', error);
+                this.data = [];
+                this.loading = false;
+                this.render();
+            }
+        }
+        debouncedDataRequest() {
+            // Set loading immediately for instant feedback
+            if (!this.loading) {
+                this.loading = true;
+            }
+            if (this.dataRequestTimeout) {
+                clearTimeout(this.dataRequestTimeout);
+            }
+            this.dataRequestTimeout = setTimeout(() => {
+                this.getTableData();
+                this.dataRequestTimeout = null;
+            }, 500);
+        }
+        css() {
+            return /*css*/ `
+      :host {
+        display: block;
+      }
+
+      .snice-table {
+        border-collapse: collapse;
+        width: 100%;
+      }
+
+      table {
+        width: 100%;
+        border-collapse: separate;
+        border-spacing: 0;
+        border-radius: var(--snice-border-radius-lg);
+        overflow: hidden;
+        border: 1px solid var(--snice-color-border);
+      }
+
+      th, td {
+        padding: var(--snice-spacing-sm);
+        border: 1px solid var(--snice-color-border);
+        text-align: left;
+        color: var(--snice-color-text);
+      }
+
+      th {
+        background-color: var(--snice-color-background-secondary);
+        color: var(--snice-color-text);
+        font-weight: var(--snice-font-weight-semibold);
+        border-bottom: 2px solid var(--snice-color-border);
+      }
+
+      th.sortable {
+        cursor: pointer;
+        user-select: none;
+      }
+
+      th.sortable:hover {
+        background-color: var(--snice-color-background-tertiary);
+      }
+
+      /* Row styling */
+      :host([striped]) tbody tr:nth-child(even) {
+        background-color: var(--snice-color-background-secondary);
+      }
+
+      :host([hoverable]) tbody tr:hover {
+        background-color: var(--snice-color-background-tertiary);
+      }
+
+      :host([clickable]) tbody tr {
+        cursor: pointer;
+      }
+
+      :host([selectable]) tbody tr {
+        cursor: pointer;
+      }
+
+      tbody tr[data-selected="true"] {
+        background-color: var(--snice-color-background-tertiary);
+        border-left: 3px solid var(--snice-color-primary);
+      }
+
+      tbody tr[data-selected="true"]:hover {
+        background-color: var(--snice-color-background-tertiary);
+      }
+
+      [part="header"] {
+        background-color: var(--snice-color-background);
+      }
+
+      [part="body"] {
+        background-color: var(--snice-table-body-bg, --snice-color-background);
+        display: block;
+      }
+
+      .table-controls {
+        display: flex;
+        gap: var(--snice-spacing-md);
+        align-items: center;
+        flex-wrap: wrap;
+      }
+
+      :host(:not([searchable])) .search-input {
+        display: none;
+      }
+
+      :host(.selector-options-empty) .selector-input {
+        display: none;
+      }
+
+      .search-input {
+        min-width: 200px;
+        flex: 1;
+      }
+
+      .selector-input {
+        min-width: 150px;
+      }
+
+      /* Sort indicators */
+      .sort-header {
+        display: flex;
+        align-items: center;
+        gap: var(--snice-spacing-xs);
+        justify-content: space-between;
+      }
+
+
+      .sort-indicator {
+        display: flex;
+        flex-direction: column;
+        font-size: 0.7em;
+        line-height: 1;
+        opacity: 0.3;
+        transition: opacity var(--snice-transition-fast);
+      }
+
+      .sort-indicator.active {
+        opacity: 1;
+      }
+
+      .sort-order {
+        font-size: 0.6em;
+        background: var(--snice-color-primary);
+        color: var(--snice-color-text-inverse);
+        border-radius: var(--snice-border-radius-sm);
+        padding: 1px 3px;
+        min-width: 12px;
+        text-align: center;
+      }
+
+      /* Loading fade */
+      tbody {
+        transition: opacity var(--snice-transition-normal);
+      }
+      
+      :host([loading]) tbody {
+        opacity: 0.5;
+      }
+
+      .no-data {
+        text-align: center;
+        padding: var(--snice-spacing-lg);
+        color: var(--snice-color-text-secondary);
+      }
+    `;
+        }
+        html() {
+            return /*html*/ `
+      <div class="snice-table">
+        ${this.renderControls()}
+        <table>
+          <thead></thead>
+          <tbody></tbody>
+        </table>
+      </div>
+    `;
+        }
+        renderControls() {
+            return /*html*/ `
+      <div class="table-controls" part="controls">
+        <snice-input 
+          class="search-input"
+          type="search" 
+          placeholder="Search..." 
+          value="${this.searchText}"
+          size="medium"
+        ></snice-input>
+        <snice-select 
+          class="selector-input"
+          multiple
+          searchable
+          clearable
+          placeholder="Filter..."
+          size="medium"
+        >
+          ${this.selectorOptions.map(opt => `<snice-option value="${opt.value}">${opt.label}</snice-option>`).join('')}
+        </snice-select>
+      </div>
+    `;
+        }
+        render() {
+            console.log('render() called');
+            this.renderHeader();
+            this.renderBody();
+        }
+        handleSelectorOptionsChange() {
+            // Update CSS class to show/hide selector
+            if (this.selectorOptions.length === 0) {
+                this.classList.add('selector-options-empty');
+            }
+            else {
+                this.classList.remove('selector-options-empty');
+            }
+        }
+        handleSortableChange() {
+            this.renderHeader(); // Re-render header to show/hide sort indicators
+        }
+        handleSelectableChange() {
+            this.render(); // Re-render both header and body for checkbox columns
+        }
+        handleColumnsChange() {
+            this.renderHeader();
+        }
+        handleDataChange() {
+            this.renderBody();
+        }
+        handleSelectedRowsChange() {
+            this.updateRowSelectionState();
+            this.updateSelectAllState();
+        }
+        handleSortChange() {
+            this.renderHeader();
+        }
+        renderHeader() {
+            if (!this.thead)
+                return;
+            const headerRow = document.createElement('tr');
+            if (this.selectable) {
+                const selectCell = document.createElement('th');
+                const allSelected = this.selectedRows.length === this.data.length && this.data.length > 0;
+                const someSelected = this.selectedRows.length > 0 && this.selectedRows.length < this.data.length;
+                selectCell.innerHTML = `<input type="checkbox" class="select-all" ${allSelected ? 'checked' : ''} />`;
+                headerRow.appendChild(selectCell);
+                // Set indeterminate after insertion
+                setTimeout(() => {
+                    const checkbox = selectCell.querySelector('.select-all');
+                    if (checkbox) {
+                        checkbox.indeterminate = someSelected;
+                    }
+                }, 0);
+            }
+            this.columns.forEach(column => {
+                const th = document.createElement('th');
+                th.setAttribute('data-key', column.key);
+                if (this.sortable && column.sortable !== false) {
+                    th.classList.add('sortable');
+                    th.setAttribute('role', 'button');
+                    th.innerHTML = this.renderSortableHeader(column);
+                }
+                else {
+                    th.textContent = column.label;
+                }
+                headerRow.appendChild(th);
+            });
+            this.thead.innerHTML = '';
+            this.thead.appendChild(headerRow);
+        }
+        renderSortableHeader(column) {
+            const sortItem = this.currentSort.find(s => s.column === column.key);
+            const sortIndex = this.currentSort.findIndex(s => s.column === column.key);
+            const isActive = !!sortItem;
+            let indicator = '▲▼'; // Default unsorted state
+            let orderNumber = '';
+            if (sortItem) {
+                if (sortItem.direction === 'asc') {
+                    indicator = '▲';
+                }
+                else if (sortItem.direction === 'desc') {
+                    indicator = '▼';
+                }
+                if (this.currentSort.length > 1) {
+                    orderNumber = `<span class="sort-order">${sortIndex + 1}</span>`;
+                }
+            }
+            return `
+      <div class="sort-header">
+        <span>${column.label}</span>
+        <div class="sort-indicator ${isActive ? 'active' : ''}">
+          ${indicator}
+          ${orderNumber}
+        </div>
+      </div>
+    `;
+        }
+        renderBody() {
+            if (!this.tbody)
+                return;
+            console.log('renderBody called with data:', this.data.length, 'columns:', this.columns.length, 'loading:', this.loading);
+            this.tbody.innerHTML = '';
+            if (this.data.length === 0 && this.columns.length > 0) {
+                if (this.loading) {
+                    // Show loading spinner
+                    const tr = document.createElement('tr');
+                    const td = document.createElement('td');
+                    const colSpan = this.columns.length + (this.selectable ? 1 : 0);
+                    td.colSpan = colSpan;
+                    td.className = 'no-data';
+                    td.innerHTML = '<snice-progress variant="circular" indeterminate size="small"></snice-progress>';
+                    tr.appendChild(td);
+                    this.tbody.appendChild(tr);
+                    return;
+                }
+                else {
+                    // Show "No Data" message
+                    const tr = document.createElement('tr');
+                    const td = document.createElement('td');
+                    const colSpan = this.columns.length + (this.selectable ? 1 : 0);
+                    td.colSpan = colSpan;
+                    td.className = 'no-data';
+                    td.textContent = 'No Data';
+                    tr.appendChild(td);
+                    this.tbody.appendChild(tr);
+                    return;
+                }
+            }
+            this.data.forEach((rowData, index) => {
+                const tr = document.createElement('tr');
+                tr.setAttribute('data-index', String(index));
+                // Set row selection state
+                const isSelected = this.selectedRows.includes(index);
+                tr.setAttribute('data-selected', String(isSelected));
+                if (this.selectable) {
+                    const selectCell = document.createElement('td');
+                    selectCell.innerHTML = `<input type="checkbox" class="row-select" ${isSelected ? 'checked' : ''} data-row-index="${index}" />`;
+                    tr.appendChild(selectCell);
+                }
+                this.columns.forEach(column => {
+                    const td = document.createElement('td');
+                    const value = rowData[column.key];
+                    // Create cell component as HTML string
+                    const cellTagName = this.getCellTagName(column.type);
+                    const attributes = this.getCellAttributes(column, value);
+                    td.innerHTML = `<${cellTagName} ${attributes}></${cellTagName}>`;
+                    tr.appendChild(td);
+                });
+                this.tbody.appendChild(tr);
+            });
+        }
+        getCellAttributes(column, value) {
+            const attributes = [
+                `type="${column.type}"`,
+                `align="${column.align || 'left'}"`,
+                `value="${String(value || '').replace(/"/g, '&quot;')}"`,
+                `in-table="true"`
+            ];
+            // Add type-specific attributes
+            if (column.type === 'number' || column.type === 'currency') {
+                if (column.decimals !== undefined)
+                    attributes.push(`decimals="${column.decimals}"`);
+                if (column.thousandsSeparator)
+                    attributes.push(`thousands-separator="true"`);
+                if (column.prefix)
+                    attributes.push(`prefix="${column.prefix}"`);
+                if (column.suffix)
+                    attributes.push(`suffix="${column.suffix}"`);
+            }
+            if (column.type === 'date') {
+                if (column.dateFormat)
+                    attributes.push(`date-format="${column.dateFormat}"`);
+            }
+            if (column.type === 'boolean') {
+                if (column.useSymbols)
+                    attributes.push(`use-symbols="true"`);
+                if (column.trueSymbol)
+                    attributes.push(`true-symbol="${column.trueSymbol}"`);
+                if (column.falseSymbol)
+                    attributes.push(`false-symbol="${column.falseSymbol}"`);
+                if (column.trueValue)
+                    attributes.push(`true-value="${column.trueValue}"`);
+                if (column.falseValue)
+                    attributes.push(`false-value="${column.falseValue}"`);
+            }
+            return attributes.join(' ');
+        }
+        getCellTagName(type) {
+            switch (type) {
+                case 'text':
+                    return 'snice-cell-text';
+                case 'number':
+                case 'currency':
+                    return 'snice-cell-number';
+                case 'date':
+                    return 'snice-cell-date';
+                case 'boolean':
+                    return 'snice-cell-boolean';
+                case 'rating':
+                    return 'snice-cell-rating';
+                case 'progress':
+                    return 'snice-cell-progress';
+                case 'duration':
+                    return 'snice-cell-duration';
+                case 'filesize':
+                    return 'snice-cell-filesize';
+                case 'sparkline':
+                    return 'snice-cell-sparkline';
+                default:
+                    return 'snice-cell';
+            }
+        }
+        handleSort(e) {
+            const th = e.target.closest('th.sortable');
+            if (!th)
+                return;
+            const columnKey = th.getAttribute('data-key');
+            if (columnKey) {
+                console.log('Sorting column:', columnKey);
+                this.toggleSort(columnKey, true); // Always multi-sort
+            }
+        }
+        handleRowSelect(e) {
+            const checkbox = e.target;
+            const rowIndex = parseInt(checkbox.getAttribute('data-row-index') || '0');
+            if (checkbox.checked) {
+                if (!this.selectedRows.includes(rowIndex)) {
+                    this.selectedRows = [...this.selectedRows, rowIndex];
+                }
+            }
+            else {
+                this.selectedRows = this.selectedRows.filter(i => i !== rowIndex);
+            }
+            this.updateRowSelectionState();
+            this.updateSelectAllState();
+            this.dispatchRowSelectionChanged(rowIndex, checkbox.checked);
+        }
+        handleSelectAll(e) {
+            const checkbox = e.target;
+            if (checkbox.checked) {
+                this.selectedRows = this.data.map((_, index) => index);
+            }
+            else {
+                this.selectedRows = [];
+            }
+            this.updateRowSelectionState();
+            this.dispatchSelectAllChanged(checkbox.checked);
+        }
+        handleRowClick(e) {
+            const tr = e.target.closest('tr');
+            if (!tr)
+                return;
+            const target = e.target;
+            // Don't trigger if clicking on checkbox or other interactive elements
+            if (target.matches('input[type="checkbox"], button, a, .interactive')) {
+                return;
+            }
+            const rowIndex = parseInt(tr.getAttribute('data-index') || '0');
+            const rowData = this.data[rowIndex];
+            // Handle row selection if selectable
+            if (this.selectable) {
+                const isCurrentlySelected = this.selectedRows.includes(rowIndex);
+                if (isCurrentlySelected) {
+                    this.selectedRows = this.selectedRows.filter(i => i !== rowIndex);
+                }
+                else {
+                    this.selectedRows = [...this.selectedRows, rowIndex];
+                }
+                this.updateRowSelectionState();
+                this.updateSelectAllState();
+                this.dispatchRowSelectionChanged(rowIndex, !isCurrentlySelected);
+            }
+            // Handle clickable row event
+            if (this.clickable) {
+                this.dispatchEvent(new CustomEvent('row-clicked', {
+                    detail: { rowData, rowIndex }
+                }));
+            }
+        }
+        onAttached() {
+            console.log('Controller attached, loading config and data...');
+            this.getTableConfig();
+            this.getTableData();
+        }
+        handleSearchChange(e) {
+            const input = e.target;
+            this.searchText = input.value;
+            this.debouncedDataRequest();
+        }
+        handleSelectorChange(e) {
+            this.selector = Array.isArray(e.detail.value) ? e.detail.value.join(',') : e.detail.value;
+            this.debouncedDataRequest();
+        }
+        updateRowSelectionState() {
+            if (!this.tbody)
+                return;
+            const rows = this.tbody.querySelectorAll('tr');
+            rows.forEach((row, index) => {
+                const isSelected = this.selectedRows.includes(index);
+                row.setAttribute('data-selected', String(isSelected));
+                const checkbox = row.querySelector('.row-select');
+                if (checkbox) {
+                    checkbox.checked = isSelected;
+                }
+            });
+        }
+        updateSelectAllState() {
+            const selectAllCheckbox = this.thead?.querySelector('.select-all');
+            if (!selectAllCheckbox)
+                return;
+            const allSelected = this.selectedRows.length === this.data.length;
+            const someSelected = this.selectedRows.length > 0 && this.selectedRows.length < this.data.length;
+            selectAllCheckbox.checked = allSelected;
+            selectAllCheckbox.indeterminate = someSelected;
+        }
+        toggleSort(columnKey, multiSort = false) {
+            console.log('toggleSort called:', { columnKey, multiSort, currentSort: this.currentSort });
+            if (!multiSort) {
+                // Single column sort - clear all other sorts
+                const existingSort = this.currentSort.find(s => s.column === columnKey);
+                if (!existingSort) {
+                    this.currentSort = [{ column: columnKey, direction: 'asc' }];
+                }
+                else if (existingSort.direction === 'asc') {
+                    this.currentSort = [{ column: columnKey, direction: 'desc' }];
+                }
+                else {
+                    this.currentSort = [];
+                }
+            }
+            else {
+                // Multi column sort - modify existing or add new
+                const existingSortIndex = this.currentSort.findIndex(s => s.column === columnKey);
+                if (existingSortIndex === -1) {
+                    // Add new sort
+                    this.currentSort = [...this.currentSort, { column: columnKey, direction: 'asc' }];
+                }
+                else {
+                    const existingSort = this.currentSort[existingSortIndex];
+                    if (existingSort.direction === 'asc') {
+                        // Change to desc - create new array to trigger reactivity
+                        this.currentSort = this.currentSort.map((sort, index) => index === existingSortIndex ? { ...sort, direction: 'desc' } : sort);
+                    }
+                    else {
+                        // Remove this sort
+                        this.currentSort = this.currentSort.filter(s => s.column !== columnKey);
+                    }
+                }
+            }
+            console.log('New sort state:', this.currentSort);
+            this.renderHeader(); // Update sort indicators immediately
+            this.debouncedDataRequest(); // Show loading immediately, debounce the actual request
+        }
+        dispatchRowSelectionChanged(rowIndex, selected) {
+            return {
+                selectedRows: this.selectedRows,
+                rowIndex,
+                selected
+            };
+        }
+        dispatchSelectAllChanged(allSelected) {
+            return {
+                selectedRows: this.selectedRows,
+                allSelected
+            };
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceTable };
+//# sourceMappingURL=snice-table.js.map