snice 1.13.2 → 1.13.4

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

@@ -0,0 +1,814 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { element, on, property, query, request, dispatch, watch } from '../../src/index';
+import '../input/snice-input';
+import '../select/snice-select';
+import './snice-cell.ts';
+import './snice-cell-text.ts';
+import './snice-cell-number.ts';
+import './snice-cell-date.ts';
+import './snice-cell-boolean.ts';
+import './snice-cell-rating.ts';
+import './snice-cell-progress.ts';
+import './snice-cell-duration.ts';
+import './snice-cell-filesize.ts';
+import './snice-cell-sparkline.ts';
+let SniceTable = class SniceTable extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.striped = false;
+        this.searchable = false;
+        this.sortable = false;
+        this.selectable = false;
+        this.hoverable = true;
+        this.clickable = false;
+        this.columns = [];
+        this.data = [];
+        this.currentSort = [];
+        this.searchText = '';
+        this.selector = '';
+        this.selectorOptions = [];
+        this.loading = false;
+        this.selectedRows = [];
+        this.dataRequestTimeout = null;
+    }
+    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
+        };
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'striped' }),
+    __metadata("design:type", Object)
+], SniceTable.prototype, "striped", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'searchable' }),
+    __metadata("design:type", Object)
+], SniceTable.prototype, "searchable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'sortable' }),
+    __metadata("design:type", Object)
+], SniceTable.prototype, "sortable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'selectable' }),
+    __metadata("design:type", Object)
+], SniceTable.prototype, "selectable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'hoverable' }),
+    __metadata("design:type", Object)
+], SniceTable.prototype, "hoverable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'clickable' }),
+    __metadata("design:type", Object)
+], SniceTable.prototype, "clickable", void 0);
+__decorate([
+    property({ type: Array, attribute: 'columns' }),
+    __metadata("design:type", Array)
+], SniceTable.prototype, "columns", void 0);
+__decorate([
+    property({ type: Array, attribute: 'data' }),
+    __metadata("design:type", Array)
+], SniceTable.prototype, "data", void 0);
+__decorate([
+    property({ type: Array, attribute: 'current-sort' }),
+    __metadata("design:type", Array)
+], SniceTable.prototype, "currentSort", void 0);
+__decorate([
+    property({ type: String, attribute: 'search-text' }),
+    __metadata("design:type", String)
+], SniceTable.prototype, "searchText", void 0);
+__decorate([
+    property({ type: String, attribute: 'selector' }),
+    __metadata("design:type", String)
+], SniceTable.prototype, "selector", void 0);
+__decorate([
+    property({ type: Array, attribute: 'selector-options' }),
+    __metadata("design:type", Array)
+], SniceTable.prototype, "selectorOptions", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'loading' }),
+    __metadata("design:type", Boolean)
+], SniceTable.prototype, "loading", void 0);
+__decorate([
+    property({ type: Array, attribute: 'selected-rows' }),
+    __metadata("design:type", Array)
+], SniceTable.prototype, "selectedRows", void 0);
+__decorate([
+    query('table'),
+    __metadata("design:type", HTMLTableElement)
+], SniceTable.prototype, "table", void 0);
+__decorate([
+    query('thead'),
+    __metadata("design:type", HTMLTableSectionElement)
+], SniceTable.prototype, "thead", void 0);
+__decorate([
+    query('tbody'),
+    __metadata("design:type", HTMLTableSectionElement)
+], SniceTable.prototype, "tbody", void 0);
+__decorate([
+    request('@snice/table/config'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", Object)
+], SniceTable.prototype, "getTableConfig", null);
+__decorate([
+    request('@snice/table/data'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", Object)
+], SniceTable.prototype, "getTableData", null);
+__decorate([
+    watch('selector-options'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceTable.prototype, "handleSelectorOptionsChange", null);
+__decorate([
+    watch('sortable'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceTable.prototype, "handleSortableChange", null);
+__decorate([
+    watch('selectable'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceTable.prototype, "handleSelectableChange", null);
+__decorate([
+    watch('columns'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceTable.prototype, "handleColumnsChange", null);
+__decorate([
+    watch('data', 'loading'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceTable.prototype, "handleDataChange", null);
+__decorate([
+    watch('selected-rows'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceTable.prototype, "handleSelectedRowsChange", null);
+__decorate([
+    watch('current-sort'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceTable.prototype, "handleSortChange", null);
+__decorate([
+    on('click', 'th.sortable'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [MouseEvent]),
+    __metadata("design:returntype", void 0)
+], SniceTable.prototype, "handleSort", null);
+__decorate([
+    on('change', '.row-select'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Event]),
+    __metadata("design:returntype", void 0)
+], SniceTable.prototype, "handleRowSelect", null);
+__decorate([
+    on('change', '.select-all'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Event]),
+    __metadata("design:returntype", void 0)
+], SniceTable.prototype, "handleSelectAll", null);
+__decorate([
+    on('click', 'tbody tr'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Event]),
+    __metadata("design:returntype", void 0)
+], SniceTable.prototype, "handleRowClick", null);
+__decorate([
+    on('@snice/controller-attached'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceTable.prototype, "onAttached", null);
+__decorate([
+    on('input', '.search-input', { debounce: 500 }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Event]),
+    __metadata("design:returntype", void 0)
+], SniceTable.prototype, "handleSearchChange", null);
+__decorate([
+    on('@snice/select/change', '.selector-input', { debounce: 150 }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [CustomEvent]),
+    __metadata("design:returntype", void 0)
+], SniceTable.prototype, "handleSelectorChange", null);
+__decorate([
+    dispatch('@snice/table/row-selection-changed', { bubbles: true, composed: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Number, Boolean]),
+    __metadata("design:returntype", void 0)
+], SniceTable.prototype, "dispatchRowSelectionChanged", null);
+__decorate([
+    dispatch('@snice/table/select-all-changed', { bubbles: true, composed: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Boolean]),
+    __metadata("design:returntype", void 0)
+], SniceTable.prototype, "dispatchSelectAllChanged", null);
+SniceTable = __decorate([
+    element('snice-table')
+], SniceTable);
+export { SniceTable };
+//# sourceMappingURL=snice-table.js.map