snice 1.14.2 → 2.1.0

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

@@ -1,814 +0,0 @@
-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 'snice';
-import 'snice/input/snice-input';
-import 'snice/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