@parksw/sw-ui-components 0.0.2 → 0.0.3

package/dist/my-grid.js

@@ -1,852 +1,3 @@
-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;
-};
-import { LitElement, css, html } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { when } from 'lit/directives/when.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { styleMap } from 'lit/directives/style-map.js';
-import { repeat } from 'lit/directives/repeat.js';
-let MyGrid = class MyGrid extends LitElement {
-    constructor() {
-        super();
-        this.columns = [];
-        this.data = [];
-        this.itemsPerPage = 10;
-        this.columnReordering = true;
-        this.height = 'auto';
-        this.enableColumnVisibility = true;
-        this.enableFilter = true;
-        this._sortKey = null;
-        this._sortDirection = 'asc';
-        this._draggedColumnIndex = null;
-        this._dragOverColumnIndex = null;
-        this._selectedRowId = null;
-        this._selectedColumnKey = null;
-        this._filterValues = {};
-        this._activeFilterColumn = null;
-        this._filterSearchTerm = '';
-        this._currentPage = 1;
-        this._hiddenColumns = new Set();
-        this._showColumnMenu = false;
-        this._filterMenuSortDirection = 'asc'; // New state for filter menu sort
-        // Resizing state
-        this._resizingColumnIndex = null;
-        this._startX = 0;
-        this._startWidth = 0;
-        this._handleDocumentClick = this._handleDocumentClick.bind(this);
-        this._handleResizeMove = this._handleResizeMove.bind(this);
-        this._handleResizeEnd = this._handleResizeEnd.bind(this);
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        document.addEventListener('click', this._handleDocumentClick);
-        document.addEventListener('mousemove', this._handleResizeMove);
-        document.addEventListener('mouseup', this._handleResizeEnd);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        document.removeEventListener('click', this._handleDocumentClick);
-        document.removeEventListener('mousemove', this._handleResizeMove);
-        document.removeEventListener('mouseup', this._handleResizeEnd);
-    }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('enableFilter')) {
-            this._filterValues = {};
-            this._activeFilterColumn = null;
-            this._filterSearchTerm = '';
-            this._resetPage();
-        }
-    }
-    _handleDocumentClick(_e) {
-        if (this._showColumnMenu) {
-            this._showColumnMenu = false;
-        }
-        if (this._activeFilterColumn) {
-            this._activeFilterColumn = null;
-            this._filterSearchTerm = '';
-        }
-    }
-    get _visibleColumns() {
-        return this.columns.filter(col => !this._hiddenColumns.has(col.key));
-    }
-    get _gridColumnTemplate() {
-        let template = '';
-        if (this.enableColumnVisibility) {
-            template += '40px ';
-        }
-        template += this._visibleColumns.map(col => col.width || 'minmax(150px, 1fr)').join(' ');
-        return template;
-    }
-    _resetPage() { this._currentPage = 1; }
-    _toggleColumnMenu(e) {
-        e.stopPropagation();
-        this._showColumnMenu = !this._showColumnMenu;
-        this._activeFilterColumn = null;
-    }
-    _toggleColumnVisibility(key) {
-        const newHiddenColumns = new Set(this._hiddenColumns);
-        if (newHiddenColumns.has(key)) {
-            newHiddenColumns.delete(key);
-        }
-        else {
-            newHiddenColumns.add(key);
-        }
-        this._hiddenColumns = newHiddenColumns;
-    }
-    _handleItemsPerPageChange(e) {
-        const select = e.target;
-        this.itemsPerPage = Number(select.value);
-        this._resetPage();
-    }
-    _handleHeaderClick(key) {
-        if (this._sortKey === key) {
-            this._sortDirection = this._sortDirection === 'asc' ? 'desc' : 'asc';
-        }
-        else {
-            this._sortKey = key;
-            this._sortDirection = 'asc';
-        }
-        this._resetPage();
-    }
-    _toggleFilterMenu(e, key) {
-        e.stopPropagation();
-        if (this._activeFilterColumn === key) {
-            this._activeFilterColumn = null;
-        }
-        else {
-            this._activeFilterColumn = key;
-            this._showColumnMenu = false;
-            this._filterMenuSortDirection = 'asc'; // Reset sort direction when opening menu
-        }
-        this._filterSearchTerm = '';
-    }
-    _toggleFilterMenuSort(e) {
-        e.stopPropagation();
-        this._filterMenuSortDirection = this._filterMenuSortDirection === 'asc' ? 'desc' : 'asc';
-    }
-    _getUniqueValues(key) {
-        const values = new Set(this.data.map(row => row[key]));
-        const sortedValues = Array.from(values).sort((a, b) => {
-            if (a === b)
-                return 0;
-            if (a == null)
-                return 1;
-            if (b == null)
-                return -1;
-            let comparison = 0;
-            if (typeof a === 'number' && typeof b === 'number') {
-                comparison = a - b;
-            }
-            else {
-                // Try to parse as date if string looks like date (YYYY-MM-DD)
-                const dateA = Date.parse(String(a));
-                const dateB = Date.parse(String(b));
-                if (!isNaN(dateA) && !isNaN(dateB) && String(a).includes('-') && String(b).includes('-')) {
-                    comparison = dateA - dateB;
-                }
-                else {
-                    comparison = String(a).localeCompare(String(b));
-                }
-            }
-            return this._filterMenuSortDirection === 'asc' ? comparison : -comparison;
-        });
-        return sortedValues;
-    }
-    _isFilterActive(key) {
-        return !!this._filterValues[key];
-    }
-    _handleFilterValueChange(key, value, checked) {
-        let currentFilters = this._filterValues[key];
-        if (!currentFilters) {
-            if (!checked) {
-                const allValues = this._getUniqueValues(key);
-                currentFilters = new Set(allValues);
-                currentFilters.delete(value);
-                this._filterValues = { ...this._filterValues, [key]: currentFilters };
-            }
-        }
-        else {
-            const newFilters = new Set(currentFilters);
-            if (checked) {
-                newFilters.add(value);
-            }
-            else {
-                newFilters.delete(value);
-            }
-            const allValues = this._getUniqueValues(key);
-            if (newFilters.size === allValues.length) {
-                const newFilterValues = { ...this._filterValues };
-                delete newFilterValues[key];
-                this._filterValues = newFilterValues;
-            }
-            else {
-                this._filterValues = { ...this._filterValues, [key]: newFilters };
-            }
-        }
-        this._resetPage();
-    }
-    _handleSelectAll(key, checked) {
-        if (checked) {
-            const newFilters = { ...this._filterValues };
-            delete newFilters[key];
-            this._filterValues = newFilters;
-        }
-        else {
-            this._filterValues = { ...this._filterValues, [key]: new Set() };
-        }
-        this._resetPage();
-    }
-    _handleFilterSearch(e) {
-        const input = e.target;
-        this._filterSearchTerm = input.value;
-    }
-    // Resize Handlers
-    _handleResizeStart(e, index) {
-        e.preventDefault();
-        e.stopPropagation();
-        this._resizingColumnIndex = index;
-        this._startX = e.pageX;
-        const headerCells = this.shadowRoot?.querySelectorAll('.header-cell');
-        const cellIndex = index + (this.enableColumnVisibility ? 1 : 0);
-        if (headerCells && headerCells[cellIndex]) {
-            const cell = headerCells[cellIndex];
-            this._startWidth = cell.getBoundingClientRect().width;
-        }
-        else {
-            this._startWidth = 150;
-        }
-    }
-    _handleResizeMove(e) {
-        if (this._resizingColumnIndex !== null) {
-            const diff = e.pageX - this._startX;
-            const newWidth = Math.max(50, this._startWidth + diff);
-            const visibleCol = this._visibleColumns[this._resizingColumnIndex];
-            const originalIndex = this.columns.findIndex(c => c.key === visibleCol.key);
-            if (originalIndex !== -1) {
-                const newColumns = [...this.columns];
-                newColumns[originalIndex] = { ...newColumns[originalIndex], width: `${newWidth}px` };
-                this.columns = newColumns;
-            }
-        }
-    }
-    _handleResizeEnd() {
-        this._resizingColumnIndex = null;
-    }
-    get _filteredData() {
-        if (!this.enableFilter) {
-            return this.data;
-        }
-        let filtered = this.data;
-        const activeFilterKeys = Object.keys(this._filterValues);
-        if (activeFilterKeys.length > 0) {
-            filtered = filtered.filter(row => {
-                return activeFilterKeys.every(key => {
-                    const filterSet = this._filterValues[key];
-                    if (!filterSet || filterSet.size === 0)
-                        return false;
-                    if (filterSet)
-                        return filterSet.has(row[key]);
-                    return true;
-                });
-            });
-        }
-        return filtered;
-    }
-    get _sortedData() {
-        const dataToSort = this._filteredData;
-        if (!this._sortKey)
-            return dataToSort;
-        return [...dataToSort].sort((a, b) => {
-            const valA = a[this._sortKey], valB = b[this._sortKey];
-            if (valA === valB)
-                return 0;
-            if (valA == null)
-                return 1;
-            if (valB == null)
-                return -1;
-            let comparison = 0;
-            if (typeof valA === 'string' && typeof valB === 'string')
-                comparison = valA.localeCompare(valB);
-            else if (typeof valA === 'number' && typeof valB === 'number')
-                comparison = valA - valB;
-            else
-                comparison = String(valA).localeCompare(String(valB));
-            return this._sortDirection === 'asc' ? comparison : -comparison;
-        });
-    }
-    get _paginatedData() {
-        const start = (this._currentPage - 1) * this.itemsPerPage;
-        const end = start + this.itemsPerPage;
-        return this._sortedData.slice(start, end);
-    }
-    _handleCellClick(row, colKey) {
-        const rowId = row.id;
-        if (this._selectedRowId === rowId && this._selectedColumnKey === colKey) {
-            this._selectedRowId = null;
-            this._selectedColumnKey = null;
-        }
-        else {
-            this._selectedRowId = rowId;
-            this._selectedColumnKey = colKey;
-        }
-    }
-    _handleDragStart(e, index) {
-        if (this._resizingColumnIndex !== null) {
-            e.preventDefault();
-            return;
-        }
-        if (!this.columnReordering) {
-            e.preventDefault();
-            return;
-        }
-        this._draggedColumnIndex = index;
-        if (e.dataTransfer) {
-            e.dataTransfer.effectAllowed = 'move';
-            e.dataTransfer.setData('text/plain', index.toString());
-            const target = e.target;
-            e.dataTransfer.setDragImage(target, e.offsetX, e.offsetY);
-        }
-    }
-    _handleDragOver(e, index) {
-        if (!this.columnReordering)
-            return;
-        e.preventDefault();
-        if (e.dataTransfer) {
-            e.dataTransfer.dropEffect = 'move';
-        }
-        if (this._draggedColumnIndex !== null && this._draggedColumnIndex !== index) {
-            this._dragOverColumnIndex = index;
-        }
-    }
-    _handleDragLeave() {
-        if (!this.columnReordering)
-            return;
-        this._dragOverColumnIndex = null;
-    }
-    _handleDrop(e, dropIndex) {
-        if (!this.columnReordering)
-            return;
-        e.preventDefault();
-        if (e.dataTransfer) {
-            const draggedIndex = parseInt(e.dataTransfer.getData('text/plain'), 10);
-            if (this._draggedColumnIndex !== null && draggedIndex !== dropIndex) {
-                const visibleCols = [...this._visibleColumns];
-                const [draggedColumn] = visibleCols.splice(draggedIndex, 1);
-                visibleCols.splice(dropIndex, 0, draggedColumn);
-                const newColumns = [];
-                let visibleIndex = 0;
-                for (const col of this.columns) {
-                    if (this._hiddenColumns.has(col.key)) {
-                        newColumns.push(col);
-                    }
-                    else {
-                        newColumns.push(visibleCols[visibleIndex++]);
-                    }
-                }
-                this.columns = newColumns;
-            }
-        }
-        this._draggedColumnIndex = null;
-        this._dragOverColumnIndex = null;
-    }
-    _handleDragEnd() {
-        if (!this.columnReordering)
-            return;
-        this._draggedColumnIndex = null;
-        this._dragOverColumnIndex = null;
-    }
-    _formatLink(template, row) {
-        return template.replace(/{(\w+)}/g, (_match, key) => {
-            return row[key] !== undefined ? String(row[key]) : _match;
-        });
-    }
-    _renderCell(row, col) {
-        const cellData = row[col.key];
-        if (col.linkTemplate) {
-            const href = this._formatLink(col.linkTemplate, row);
-            return html `<a href="${href}">${cellData}</a>`;
-        }
-        return cellData;
-    }
-    _renderColumnMenu() {
-        if (!this._showColumnMenu)
-            return null;
-        return html `
-      <div class="column-menu" @click=${(e) => e.stopPropagation()}>
-        ${this.columns.map(col => html `
-          <label>
-            <input
-              type="checkbox"
-              .checked=${!this._hiddenColumns.has(col.key)}
-              @change=${() => this._toggleColumnVisibility(col.key)}
-            />
-            ${col.header}
-          </label>
-        `)}
-      </div>
-    `;
-    }
-    _renderFilterMenu(key, index) {
-        if (this._activeFilterColumn !== key)
-            return null;
-        const uniqueValues = this._getUniqueValues(key);
-        const filteredValues = uniqueValues.filter(v => String(v).toLowerCase().includes(this._filterSearchTerm.toLowerCase()));
-        const currentFilters = this._filterValues[key];
-        const isAllSelected = !currentFilters;
-        const isSelectAllChecked = isAllSelected || (!!currentFilters && filteredValues.every(v => currentFilters.has(v)));
-        const isRightAligned = index > this._visibleColumns.length - 3;
-        const menuClass = isRightAligned ? 'filter-menu right-aligned' : 'filter-menu';
-        return html `
-        <div class="${menuClass}" @click=${(e) => e.stopPropagation()}>
-            <div class="filter-search-container">
-                <input 
-                    type="text" 
-                    class="filter-search" 
-                    placeholder="Search..." 
-                    .value=${this._filterSearchTerm}
-                    @input=${this._handleFilterSearch}
-                />
-                <button class="filter-sort-btn" @click=${this._toggleFilterMenuSort} title="Sort Values">
-                    ${this._filterMenuSortDirection === 'asc' ? '▲' : '▼'}
-                </button>
-            </div>
-            <div class="filter-list">
-                <label>
-                    <input 
-                        type="checkbox" 
-                        .checked=${isSelectAllChecked}
-                        @change=${(e) => this._handleSelectAll(key, e.target.checked)}
-                    />
-                    (Select All)
-                </label>
-                ${filteredValues.map(value => html `
-                    <label>
-                        <input 
-                            type="checkbox" 
-                            .checked=${isAllSelected || (!!currentFilters && currentFilters.has(value))}
-                            @change=${(e) => this._handleFilterValueChange(key, value, e.target.checked)}
-                        />
-                        ${String(value)}
-                    </label>
-                `)}
-            </div>
-        </div>
-      `;
-    }
-    _renderHeader(gridStyles) {
-        return html `
-      <div class="grid-header">
-        <div class="grid-row" style=${styleMap(gridStyles)}>
-          ${when(this.enableColumnVisibility, () => html `
-            <div class="grid-cell header-cell settings-cell" @click=${this._toggleColumnMenu}>
-              ⚙️
-              ${this._renderColumnMenu()}
-            </div>
-          `)}
-          ${this._visibleColumns.map((col, index) => {
-            const headerClasses = {
-                'grid-cell': true,
-                'header-cell': true,
-                'drag-over': this._dragOverColumnIndex === index,
-                'reorderable': this.columnReordering,
-                'align-center': col.align === 'center',
-                'align-right': col.align === 'right',
-            };
-            return html `
-            <div
-              .draggable=${this.columnReordering}
-              class=${classMap(headerClasses)}
-              @click=${() => this._handleHeaderClick(col.key)}
-              @dragstart=${(e) => this._handleDragStart(e, index)}
-              @dragover=${(e) => this._handleDragOver(e, index)}
-              @dragleave=${this._handleDragLeave}
-              @drop=${(e) => this._handleDrop(e, index)}
-              @dragend=${this._handleDragEnd}
-            >
-              <span class="header-text">${col.header}</span>
-              <div class="header-icons">
-                  ${when(this.enableFilter, () => html `
-                    <span class="filter-icon ${this._isFilterActive(col.key) ? 'active' : ''}" @click=${(e) => this._toggleFilterMenu(e, col.key)}>
-                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
-                        </svg>
-                    </span>
-                  `)}
-                  ${this._sortKey === col.key ? html `<span class="sort-indicator">${this._sortDirection === 'asc' ? '▲' : '▼'}</span>` : ''}
-              </div>
-              ${this._renderFilterMenu(col.key, index)}
-              <div class="resize-handle" @mousedown=${(e) => this._handleResizeStart(e, index)} @click=${(e) => e.stopPropagation()}></div>
-            </div>
-          `;
-        })}
-        </div>
-      </div>
-    `;
-    }
-    _renderBody(gridStyles) {
-        return html `
-      <div class="grid-body">
-        ${repeat(this._paginatedData, (row) => row.id, (row) => {
-            const customRowClass = this.rowClass ? this.rowClass(row) : '';
-            return html `
-            <div class="grid-row ${customRowClass}" style=${styleMap(gridStyles)}>
-              ${when(this.enableColumnVisibility, () => html `<div class="grid-cell data-cell"></div>`)}
-              ${this._visibleColumns.map(col => {
-                const dataCellClasses = {
-                    'grid-cell': true,
-                    'data-cell': true,
-                    selected: this._selectedRowId === row.id && this._selectedColumnKey === col.key,
-                    'align-center': col.align === 'center',
-                    'align-right': col.align === 'right',
-                    [`col-${col.key}`]: true,
-                };
-                return html `
-                  <div
-                    title="${String(row[col.key] ?? '')}"
-                    class=${classMap(dataCellClasses)}
-                    @click=${() => this._handleCellClick(row, col.key)}
-                  >
-                    ${this._renderCell(row, col)}
-                  </div>
-                `;
-            })}
-            </div>
-          `;
-        })}
-      </div>
-    `;
-    }
-    _renderPaginationControls() {
-        const totalItems = this._sortedData.length;
-        const totalPages = Math.ceil(totalItems / this.itemsPerPage);
-        if (totalPages <= 1)
-            return '';
-        return html `
-      <div class="pagination">
-        <div class="pagination-group">
-          <button @click=${() => this._currentPage = 1} ?disabled=${this._currentPage === 1}>&lt;&lt; First</button>
-          <button @click=${() => this._currentPage--} ?disabled=${this._currentPage === 1}>&lt; Previous</button>
-        </div>
-        <div class="pagination-info">
-          <span>Page ${this._currentPage} of ${totalPages}</span>
-        </div>
-        <div class="pagination-group">
-          <button @click=${() => this._currentPage++} ?disabled=${this._currentPage === totalPages}>Next &gt;</button>
-          <button @click=${() => this._currentPage = totalPages} ?disabled=${this._currentPage === totalPages}>Last &gt;&gt;</button>
-        </div>
-      </div>
-    `;
-    }
-    render() {
-        const wrapperStyles = { height: this.height };
-        const gridStyles = { 'grid-template-columns': this._gridColumnTemplate };
-        return html `
-      <div class="toolbar">
-        <div class="items-per-page">
-          <span>Rows per page:</span>
-          <select @change=${this._handleItemsPerPageChange} .value=${this.itemsPerPage.toString()}>
-            <option value="10">10</option>
-            <option value="20">20</option>
-            <option value="50">50</option>
-          </select>
-        </div>
-      </div>
-      <div class="grid-wrapper" style=${styleMap(wrapperStyles)}>
-        <div class="grid-container">
-          ${this._renderHeader(gridStyles)}
-          ${this._renderBody(gridStyles)}
-        </div>
-      </div>
-      ${this._renderPaginationControls()}
-    `;
-    }
-    static { this.styles = css `
-    :host {
-      display: block;
-      font-family: sans-serif;
-    }
-    /* Default styles for all elements inside the component */
-    * {
-      box-sizing: border-box;
-      color: #000; /* Default text color black */
-    }
-    input, select, button {
-      background-color: #fff; /* Default background white */
-      color: #000; /* Default text color black */
-      border: 1px solid #ccc;
-    }
-
-    .toolbar { 
-      margin-bottom: 8px; 
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-    }
-    .toolbar button { padding: 6px 12px; border-radius: 4px; background-color: #f8f8f8; cursor: pointer; }
-    .toolbar button:hover { background-color: #eee; }
-    
-    .items-per-page {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 0.9em;
-    }
-    .items-per-page select {
-      padding: 4px 8px;
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 1em;
-      color: #000;
-    }
-    .items-per-page select:hover {
-      border-color: #888;
-    }
-    
-    .grid-wrapper {
-      overflow: auto;
-      border: 1px solid #ccc;
-      border-radius: 4px;
-    }
-    .grid-container {
-      display: inline-block;
-      min-width: 100%;
-      vertical-align: top;
-    }
-    .grid-header {
-      position: sticky;
-      top: 0;
-      z-index: 2;
-      background-color: #e8e8e8;
-    }
-    .grid-row {
-      display: grid;
-      border-bottom: 1px solid #ddd;
-    }
-    .grid-body .grid-row:last-of-type {
-      border-bottom: none;
-    }
-    .grid-cell {
-      padding: 12px 15px;
-      text-align: left;
-      color: #000;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      border-right: 1px solid #ddd; /* Add right border */
-    }
-    .grid-cell:last-child {
-      border-right: none; /* Remove right border for last cell */
-    }
-    .grid-cell.align-center { justify-content: center; text-align: center; }
-    .grid-cell.align-right { justify-content: flex-end; text-align: right; }
-
-    .header-cell {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-weight: bold;
-      cursor: pointer;
-      user-select: none;
-      position: relative;
-      overflow: visible;
-      border-bottom: 1px solid #ccc; /* Add bottom border to header */
-    }
-    .header-text {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      flex-grow: 1;
-    }
-    .header-icons {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-    }
-    .sort-indicator {
-      flex-shrink: 0;
-    }
-    .filter-icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 16px;
-        height: 16px;
-        color: #888; /* Default grey icon */
-        padding: 2px;
-        border-radius: 2px;
-        cursor: pointer;
-    }
-    .filter-icon:hover {
-        color: #000; /* Black icon on hover */
-    }
-    .filter-icon.active {
-        color: #007bff; /* Blue icon when active */
-    }
-
-    .settings-cell {
-      justify-content: center;
-      position: relative;
-      overflow: visible;
-    }
-
-    .column-menu, .filter-menu {
-      position: absolute;
-      top: 100%;
-      left: 0;
-      background-color: white;
-      border: 1px solid #ccc;
-      border-radius: 4px;
-      padding: 8px;
-      z-index: 100;
-      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-      min-width: 150px;
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-      max-height: 250px;
-      overflow-y: auto;
-      text-align: left;
-      font-weight: normal;
-    }
-    .filter-menu.right-aligned {
-        left: auto;
-        right: 0;
-    }
-    .column-menu label, .filter-menu label {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      cursor: pointer;
-      font-weight: normal;
-      white-space: nowrap;
-      padding: 2px 0;
-    }
-    .filter-search-container {
-        display: flex;
-        gap: 4px;
-        margin-bottom: 4px;
-    }
-    .filter-search {
-        width: 100%;
-        padding: 4px;
-        border-radius: 4px;
-        flex-grow: 1;
-    }
-    .filter-sort-btn {
-        padding: 4px 8px;
-        cursor: pointer;
-        font-size: 0.8em;
-    }
-
-    .data-cell { cursor: pointer; }
-    .data-cell.selected { background-color: #aedcff; }
-    .data-cell a { color: #007bff; text-decoration: none; }
-    .data-cell a:hover { text-decoration: underline; }
-    
-    .header-cell.reorderable { cursor: grab; }
-    .header-cell.drag-over { background-color: #cceeff; }
-    
-    .grid-body .grid-row:nth-of-type(even) { background-color: #f2f2f2; }
-    .grid-body .grid-row:hover { background-color: #e0e0e0; }
-    
-    .pagination { 
-      display: flex; 
-      justify-content: space-between; 
-      align-items: center; 
-      padding: 12px 0; 
-      font-size: 0.9em; 
-      color: #000;
-    }
-    .pagination-group { display: flex; gap: 8px; }
-    .pagination button { padding: 6px 12px; border-radius: 4px; background-color: #f8f8f8; cursor: pointer; }
-    .pagination button:disabled { cursor: not-allowed; opacity: 0.5; }
-
-    .resize-handle {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 5px;
-      height: 100%;
-      cursor: col-resize;
-      z-index: 1;
-    }
-    .resize-handle:hover {
-      background-color: #007bff;
-    }
-  `; }
-};
-__decorate([
-    property({ type: Array })
-], MyGrid.prototype, "columns", void 0);
-__decorate([
-    property({ type: Array })
-], MyGrid.prototype, "data", void 0);
-__decorate([
-    property({ type: Number })
-], MyGrid.prototype, "itemsPerPage", void 0);
-__decorate([
-    property({ type: Boolean })
-], MyGrid.prototype, "columnReordering", void 0);
-__decorate([
-    property({ type: String })
-], MyGrid.prototype, "height", void 0);
-__decorate([
-    property({ type: Boolean })
-], MyGrid.prototype, "enableColumnVisibility", void 0);
-__decorate([
-    property({ type: Boolean })
-], MyGrid.prototype, "enableFilter", void 0);
-__decorate([
-    property()
-], MyGrid.prototype, "rowClass", void 0);
-__decorate([
-    state()
-], MyGrid.prototype, "_sortKey", void 0);
-__decorate([
-    state()
-], MyGrid.prototype, "_sortDirection", void 0);
-__decorate([
-    state()
-], MyGrid.prototype, "_draggedColumnIndex", void 0);
-__decorate([
-    state()
-], MyGrid.prototype, "_dragOverColumnIndex", void 0);
-__decorate([
-    state()
-], MyGrid.prototype, "_selectedRowId", void 0);
-__decorate([
-    state()
-], MyGrid.prototype, "_selectedColumnKey", void 0);
-__decorate([
-    state()
-], MyGrid.prototype, "_filterValues", void 0);
-__decorate([
-    state()
-], MyGrid.prototype, "_activeFilterColumn", void 0);
-__decorate([
-    state()
-], MyGrid.prototype, "_filterSearchTerm", void 0);
-__decorate([
-    state()
-], MyGrid.prototype, "_currentPage", void 0);
-__decorate([
-    state()
-], MyGrid.prototype, "_hiddenColumns", void 0);
-__decorate([
-    state()
-], MyGrid.prototype, "_showColumnMenu", void 0);
-__decorate([
-    state()
-], MyGrid.prototype, "_filterMenuSortDirection", void 0);
-__decorate([
-    state()
-], MyGrid.prototype, "_resizingColumnIndex", void 0);
-MyGrid = __decorate([
-    customElement('my-grid')
-], MyGrid);
+import "./decorate-BnP3GfGh.js";
+import { t as MyGrid } from "./my-grid-DduCSbuo.js";
 export { MyGrid };