sn-advanced-datatable 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
ADDED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
# sn-advanced-datatable
|
|
2
|
+
|
|
3
|
+
A feature-rich data table for Angular with search, filtering, sorting, row selection, expandable rows, and pagination.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm i sn-advanced-datatable
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```typescript
|
|
14
|
+
import { ... } from 'sn-advanced-datatable';
|
|
15
|
+
|
|
16
|
+
@Component({
|
|
17
|
+
imports: [SnAdvancedDatatableComponent],
|
|
18
|
+
template: `
|
|
19
|
+
<sn-advanced-datatable
|
|
20
|
+
[columns]="columns"
|
|
21
|
+
[data]="data"
|
|
22
|
+
[searchable]="true"
|
|
23
|
+
[filterable]="true"
|
|
24
|
+
[selectable]="true"
|
|
25
|
+
[expandable]="true"
|
|
26
|
+
[pageSize]="10">
|
|
27
|
+
</sn-advanced-datatable>
|
|
28
|
+
`
|
|
29
|
+
})
|
|
30
|
+
export class MyComponent {
|
|
31
|
+
columns = [
|
|
32
|
+
{ header: 'Name', key: 'name', sortable: true, filterable: true },
|
|
33
|
+
{ header: 'Email', key: 'email', sortable: true },
|
|
34
|
+
{ header: 'Status', key: 'status', sortable: true, filterable: true },
|
|
35
|
+
];
|
|
36
|
+
data = [
|
|
37
|
+
{ name: 'Alice', email: 'alice@co.com', status: 'Active' },
|
|
38
|
+
{ name: 'Bob', email: 'bob@co.com', status: 'Inactive' },
|
|
39
|
+
];
|
|
40
|
+
}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Features
|
|
44
|
+
|
|
45
|
+
| Feature | Description |
|
|
46
|
+
|---|---|
|
|
47
|
+
| **Global search** | Full-text filter across all columns |
|
|
48
|
+
| **Column filters** | Per-column text inputs |
|
|
49
|
+
| **Sorting** | Click headers to sort asc/desc |
|
|
50
|
+
| **Row selection** | Checkbox-based, select-all per page |
|
|
51
|
+
| **Expandable rows** | Accordion content with custom `ng-template` |
|
|
52
|
+
| **Pagination** | Page size selector, visible page range |
|
|
53
|
+
| **Appearance** | Striped, hoverable, bordered options |
|
|
54
|
+
|
|
55
|
+
## Part of [sn-ui](https://github.com/nicosnapps/sn-ui)
|
|
@@ -0,0 +1,257 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { EventEmitter, Output, Input, Component } from '@angular/core';
|
|
3
|
+
import * as i1 from '@angular/common';
|
|
4
|
+
import { CommonModule } from '@angular/common';
|
|
5
|
+
import * as i2 from '@angular/forms';
|
|
6
|
+
import { FormsModule } from '@angular/forms';
|
|
7
|
+
|
|
8
|
+
class SnAdvancedDatatableComponent {
|
|
9
|
+
constructor() {
|
|
10
|
+
// --- Data ---
|
|
11
|
+
this.columns = [];
|
|
12
|
+
this.data = [];
|
|
13
|
+
// --- Features ---
|
|
14
|
+
this.searchable = true;
|
|
15
|
+
this.filterable = false;
|
|
16
|
+
this.selectable = false;
|
|
17
|
+
this.expandable = false;
|
|
18
|
+
this.expandedRowTemplate = null;
|
|
19
|
+
// --- Appearance ---
|
|
20
|
+
this.striped = true;
|
|
21
|
+
this.hoverable = true;
|
|
22
|
+
this.bordered = false;
|
|
23
|
+
this.pageSize = 10;
|
|
24
|
+
this.pageSizeOptions = [5, 10, 25, 50];
|
|
25
|
+
// --- Outputs ---
|
|
26
|
+
this.sorted = new EventEmitter();
|
|
27
|
+
this.selectionChange = new EventEmitter();
|
|
28
|
+
this.rowExpanded = new EventEmitter();
|
|
29
|
+
// --- Internal State ---
|
|
30
|
+
this.processedData = [];
|
|
31
|
+
this.paginatedData = [];
|
|
32
|
+
this.currentPage = 1;
|
|
33
|
+
this.totalPages = 1;
|
|
34
|
+
this.totalFilteredItems = 0;
|
|
35
|
+
this.sortColumn = null;
|
|
36
|
+
this.sortDirection = 'asc';
|
|
37
|
+
this.searchQuery = '';
|
|
38
|
+
this.columnFilters = {};
|
|
39
|
+
this.selectedRows = new Set();
|
|
40
|
+
this.allSelected = false;
|
|
41
|
+
this.expandedRows = new Set();
|
|
42
|
+
}
|
|
43
|
+
ngOnInit() {
|
|
44
|
+
this.processTable();
|
|
45
|
+
}
|
|
46
|
+
ngOnChanges(changes) {
|
|
47
|
+
if (changes['data'] || changes['columns'] || changes['pageSize']) {
|
|
48
|
+
this.processTable();
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
// --- Searching ---
|
|
52
|
+
onSearchChange() {
|
|
53
|
+
this.currentPage = 1;
|
|
54
|
+
this.processTable();
|
|
55
|
+
}
|
|
56
|
+
// --- Column Filtering ---
|
|
57
|
+
onFilterChange() {
|
|
58
|
+
this.currentPage = 1;
|
|
59
|
+
this.processTable();
|
|
60
|
+
}
|
|
61
|
+
// --- Sorting ---
|
|
62
|
+
sort(column) {
|
|
63
|
+
const col = this.columns.find(c => c.key === column);
|
|
64
|
+
if (!col || col.sortable === false)
|
|
65
|
+
return;
|
|
66
|
+
if (this.sortColumn === column) {
|
|
67
|
+
this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
|
|
68
|
+
}
|
|
69
|
+
else {
|
|
70
|
+
this.sortColumn = column;
|
|
71
|
+
this.sortDirection = 'asc';
|
|
72
|
+
}
|
|
73
|
+
this.sorted.emit({ column, direction: this.sortDirection });
|
|
74
|
+
this.processTable();
|
|
75
|
+
}
|
|
76
|
+
getSortIcon(column) {
|
|
77
|
+
if (this.sortColumn !== column)
|
|
78
|
+
return '↕';
|
|
79
|
+
return this.sortDirection === 'asc' ? '↑' : '↓';
|
|
80
|
+
}
|
|
81
|
+
// --- Selection ---
|
|
82
|
+
toggleSelectAll() {
|
|
83
|
+
if (this.allSelected) {
|
|
84
|
+
this.selectedRows.clear();
|
|
85
|
+
this.allSelected = false;
|
|
86
|
+
}
|
|
87
|
+
else {
|
|
88
|
+
this.paginatedData.forEach((_, i) => {
|
|
89
|
+
const globalIndex = (this.currentPage - 1) * this.pageSize + i;
|
|
90
|
+
this.selectedRows.add(globalIndex);
|
|
91
|
+
});
|
|
92
|
+
this.allSelected = true;
|
|
93
|
+
}
|
|
94
|
+
this.emitSelection();
|
|
95
|
+
}
|
|
96
|
+
toggleRowSelect(globalIndex) {
|
|
97
|
+
if (this.selectedRows.has(globalIndex)) {
|
|
98
|
+
this.selectedRows.delete(globalIndex);
|
|
99
|
+
}
|
|
100
|
+
else {
|
|
101
|
+
this.selectedRows.add(globalIndex);
|
|
102
|
+
}
|
|
103
|
+
this.allSelected = this.paginatedData.every((_, i) => {
|
|
104
|
+
return this.selectedRows.has((this.currentPage - 1) * this.pageSize + i);
|
|
105
|
+
});
|
|
106
|
+
this.emitSelection();
|
|
107
|
+
}
|
|
108
|
+
isRowSelected(globalIndex) {
|
|
109
|
+
return this.selectedRows.has(globalIndex);
|
|
110
|
+
}
|
|
111
|
+
emitSelection() {
|
|
112
|
+
const selected = Array.from(this.selectedRows).map(i => this.processedData[i]).filter(Boolean);
|
|
113
|
+
this.selectionChange.emit(selected);
|
|
114
|
+
}
|
|
115
|
+
// --- Expansion ---
|
|
116
|
+
toggleRowExpand(globalIndex) {
|
|
117
|
+
if (this.expandedRows.has(globalIndex)) {
|
|
118
|
+
this.expandedRows.delete(globalIndex);
|
|
119
|
+
}
|
|
120
|
+
else {
|
|
121
|
+
this.expandedRows.add(globalIndex);
|
|
122
|
+
this.rowExpanded.emit(this.processedData[globalIndex]);
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
isRowExpanded(globalIndex) {
|
|
126
|
+
return this.expandedRows.has(globalIndex);
|
|
127
|
+
}
|
|
128
|
+
// --- Pagination ---
|
|
129
|
+
goToPage(page) {
|
|
130
|
+
if (page >= 1 && page <= this.totalPages) {
|
|
131
|
+
this.currentPage = page;
|
|
132
|
+
this.updatePaginatedData();
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
nextPage() { this.goToPage(this.currentPage + 1); }
|
|
136
|
+
prevPage() { this.goToPage(this.currentPage - 1); }
|
|
137
|
+
onPageSizeChange() {
|
|
138
|
+
this.currentPage = 1;
|
|
139
|
+
this.processTable();
|
|
140
|
+
}
|
|
141
|
+
getVisiblePages() {
|
|
142
|
+
const pages = [];
|
|
143
|
+
const maxVisible = 5;
|
|
144
|
+
let start = Math.max(1, this.currentPage - Math.floor(maxVisible / 2));
|
|
145
|
+
let end = Math.min(this.totalPages, start + maxVisible - 1);
|
|
146
|
+
if (end - start + 1 < maxVisible) {
|
|
147
|
+
start = Math.max(1, end - maxVisible + 1);
|
|
148
|
+
}
|
|
149
|
+
for (let i = start; i <= end; i++) {
|
|
150
|
+
pages.push(i);
|
|
151
|
+
}
|
|
152
|
+
return pages;
|
|
153
|
+
}
|
|
154
|
+
// --- Core Processing Pipeline ---
|
|
155
|
+
processTable() {
|
|
156
|
+
let result = [...this.data];
|
|
157
|
+
// 1. Global search filter
|
|
158
|
+
if (this.searchQuery.trim()) {
|
|
159
|
+
const query = this.searchQuery.toLowerCase();
|
|
160
|
+
result = result.filter(row => this.columns.some(col => {
|
|
161
|
+
const val = row[col.key];
|
|
162
|
+
return val !== null && val !== undefined && String(val).toLowerCase().includes(query);
|
|
163
|
+
}));
|
|
164
|
+
}
|
|
165
|
+
// 2. Per-column filters
|
|
166
|
+
if (this.filterable) {
|
|
167
|
+
for (const col of this.columns) {
|
|
168
|
+
const filter = this.columnFilters[col.key];
|
|
169
|
+
if (filter && filter.trim()) {
|
|
170
|
+
const filterLower = filter.toLowerCase();
|
|
171
|
+
result = result.filter(row => {
|
|
172
|
+
const val = row[col.key];
|
|
173
|
+
return val !== null && val !== undefined && String(val).toLowerCase().includes(filterLower);
|
|
174
|
+
});
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
// 3. Sort
|
|
179
|
+
if (this.sortColumn) {
|
|
180
|
+
const dir = this.sortDirection;
|
|
181
|
+
result.sort((a, b) => {
|
|
182
|
+
const aVal = a[this.sortColumn];
|
|
183
|
+
const bVal = b[this.sortColumn];
|
|
184
|
+
if (aVal === null || aVal === undefined)
|
|
185
|
+
return 1;
|
|
186
|
+
if (bVal === null || bVal === undefined)
|
|
187
|
+
return -1;
|
|
188
|
+
let cmp = 0;
|
|
189
|
+
if (typeof aVal === 'string')
|
|
190
|
+
cmp = aVal.localeCompare(bVal);
|
|
191
|
+
else if (typeof aVal === 'number')
|
|
192
|
+
cmp = aVal - bVal;
|
|
193
|
+
else if (aVal instanceof Date && bVal instanceof Date)
|
|
194
|
+
cmp = aVal.getTime() - bVal.getTime();
|
|
195
|
+
return dir === 'asc' ? cmp : -cmp;
|
|
196
|
+
});
|
|
197
|
+
}
|
|
198
|
+
this.processedData = result;
|
|
199
|
+
this.totalFilteredItems = result.length;
|
|
200
|
+
this.totalPages = Math.max(1, Math.ceil(result.length / this.pageSize));
|
|
201
|
+
if (this.currentPage > this.totalPages) {
|
|
202
|
+
this.currentPage = this.totalPages;
|
|
203
|
+
}
|
|
204
|
+
this.updatePaginatedData();
|
|
205
|
+
}
|
|
206
|
+
updatePaginatedData() {
|
|
207
|
+
const start = (this.currentPage - 1) * this.pageSize;
|
|
208
|
+
this.paginatedData = this.processedData.slice(start, start + this.pageSize);
|
|
209
|
+
}
|
|
210
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SnAdvancedDatatableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
211
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SnAdvancedDatatableComponent, isStandalone: true, selector: "sn-advanced-datatable", inputs: { columns: "columns", data: "data", searchable: "searchable", filterable: "filterable", selectable: "selectable", expandable: "expandable", expandedRowTemplate: "expandedRowTemplate", striped: "striped", hoverable: "hoverable", bordered: "bordered", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { sorted: "sorted", selectionChange: "selectionChange", rowExpanded: "rowExpanded" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sn-adv-table-wrapper\" [class.sn-adv-table-bordered]=\"bordered\">\n\n <!-- Toolbar: Search + Page Size -->\n @if(searchable || pageSizeOptions.length > 1) {\n <div class=\"sn-adv-toolbar\">\n @if(searchable) {\n <div class=\"sn-adv-search\">\n <svg class=\"sn-adv-search-icon\" viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"16\" height=\"16\">\n <path fill-rule=\"evenodd\"\n d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\"\n clip-rule=\"evenodd\" />\n </svg>\n <input type=\"text\" class=\"sn-adv-search-input\" placeholder=\"Search all columns...\" [(ngModel)]=\"searchQuery\"\n (ngModelChange)=\"onSearchChange()\" />\n </div>\n }\n\n <div class=\"sn-adv-toolbar-right\">\n <span class=\"sn-adv-result-count\">{{ totalFilteredItems }} results</span>\n\n <select class=\"sn-adv-page-size-select\" [(ngModel)]=\"pageSize\" (ngModelChange)=\"onPageSizeChange()\">\n @for(opt of pageSizeOptions; track opt) {\n <option [value]=\"opt\">{{ opt }} per page</option>\n }\n </select>\n </div>\n </div>\n }\n\n <!-- Table -->\n <div class=\"sn-adv-table-scroll\">\n <table class=\"sn-adv-table\" [class.sn-adv-table-striped]=\"striped\" [class.sn-adv-table-hoverable]=\"hoverable\">\n <thead>\n <tr>\n <!-- Selection Checkbox Header -->\n @if(selectable) {\n <th class=\"sn-adv-th sn-adv-th-checkbox\">\n <input type=\"checkbox\" [checked]=\"allSelected\" (change)=\"toggleSelectAll()\"\n class=\"sn-adv-checkbox\" />\n </th>\n }\n\n <!-- Expand Toggle Header -->\n @if(expandable) {\n <th class=\"sn-adv-th sn-adv-th-expand\"></th>\n }\n\n <!-- Column Headers -->\n @for(col of columns; track col.key) {\n <th class=\"sn-adv-th\" [style.width]=\"col.width || 'auto'\" [style.text-align]=\"col.align || 'left'\"\n [class.sn-adv-th-sortable]=\"col.sortable !== false\" (click)=\"sort(col.key)\">\n <div class=\"sn-adv-th-content\">\n <span>{{ col.header }}</span>\n @if(col.sortable !== false) {\n <span class=\"sn-adv-sort-icon\">{{ getSortIcon(col.key) }}</span>\n }\n </div>\n </th>\n }\n </tr>\n\n <!-- Per-column filter row -->\n @if(filterable) {\n <tr class=\"sn-adv-filter-row\">\n @if(selectable) { <th></th> }\n @if(expandable) { <th></th> }\n @for(col of columns; track col.key) {\n <th class=\"sn-adv-th-filter\">\n @if(col.filterable !== false) {\n <input type=\"text\" class=\"sn-adv-filter-input\" [placeholder]=\"'Filter ' + col.header\"\n [(ngModel)]=\"columnFilters[col.key]\" (ngModelChange)=\"onFilterChange()\" />\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody>\n @for(row of paginatedData; track row; let i = $index) {\n @let globalIndex = (currentPage - 1) * pageSize + i;\n <tr class=\"sn-adv-tr\" [class.sn-adv-tr-selected]=\"isRowSelected(globalIndex)\">\n\n <!-- Selection Checkbox -->\n @if(selectable) {\n <td class=\"sn-adv-td sn-adv-td-checkbox\">\n <input type=\"checkbox\" [checked]=\"isRowSelected(globalIndex)\"\n (change)=\"toggleRowSelect(globalIndex)\" class=\"sn-adv-checkbox\" />\n </td>\n }\n\n <!-- Expand Toggle -->\n @if(expandable) {\n <td class=\"sn-adv-td sn-adv-td-expand\" (click)=\"toggleRowExpand(globalIndex)\">\n <span class=\"sn-adv-expand-icon\" [class.sn-adv-expand-icon-open]=\"isRowExpanded(globalIndex)\">\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"16\" height=\"16\">\n <path fill-rule=\"evenodd\"\n d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </span>\n </td>\n }\n\n <!-- Data Cells -->\n @for(col of columns; track col.key) {\n <td class=\"sn-adv-td\" [style.text-align]=\"col.align || 'left'\">\n {{ row[col.key] }}\n </td>\n }\n </tr>\n\n <!-- Expanded Row Content -->\n @if(expandable && isRowExpanded(globalIndex)) {\n <tr class=\"sn-adv-expanded-row\">\n <td [attr.colspan]=\"columns.length + (selectable ? 1 : 0) + (expandable ? 1 : 0)\">\n <div class=\"sn-adv-expanded-content\">\n @if(expandedRowTemplate) {\n <ng-container\n *ngTemplateOutlet=\"expandedRowTemplate; context: { $implicit: row, index: globalIndex }\"></ng-container>\n } @else {\n <pre class=\"sn-adv-expanded-default\">{{ row | json }}</pre>\n }\n </div>\n </td>\n </tr>\n }\n }\n\n <!-- Empty State -->\n @if(paginatedData.length === 0) {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectable ? 1 : 0) + (expandable ? 1 : 0)\"\n class=\"sn-adv-empty\">\n No data found.\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <!-- Pagination Footer -->\n @if(totalPages > 1) {\n <div class=\"sn-adv-pagination\">\n <span class=\"sn-adv-page-info\">\n Page {{ currentPage }} of {{ totalPages }}\n </span>\n <div class=\"sn-adv-page-buttons\">\n <button class=\"sn-adv-page-btn\" [disabled]=\"currentPage === 1\" (click)=\"prevPage()\">\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"14\" height=\"14\">\n <path fill-rule=\"evenodd\"\n d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n @for(p of getVisiblePages(); track p) {\n <button class=\"sn-adv-page-btn\" [class.sn-adv-page-btn-active]=\"p === currentPage\" (click)=\"goToPage(p)\">{{\n p }}</button>\n }\n <button class=\"sn-adv-page-btn\" [disabled]=\"currentPage === totalPages\" (click)=\"nextPage()\">\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"14\" height=\"14\">\n <path fill-rule=\"evenodd\"\n d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n </div>\n </div>\n }\n</div>", styles: ["*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.inset-y-0{top:0;bottom:0}.-bottom-12{bottom:-3rem}.-left-20{left:-5rem}.-left-8{left:-2rem}.-right-12{right:-3rem}.-right-20{right:-5rem}.-right-40{right:-10rem}.-top-20{top:-5rem}.-top-40{top:-10rem}.-top-8{top:-2rem}.left-0{left:0}.right-0{right:0}.right-4{right:1rem}.top-0{top:0}.top-1\\/2{top:50%}.top-4{top:1rem}.top-40{top:10rem}.-z-10{z-index:-10}.z-10{z-index:10}.z-20{z-index:20}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-6{margin-left:1.5rem}.ml-auto{margin-left:auto}.mr-1\\.5{margin-right:.375rem}.mr-2{margin-right:.5rem}.mr-4{margin-right:1rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-auto{margin-top:auto}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-0{height:0px}.h-1{height:.25rem}.h-10{height:2.5rem}.h-16{height:4rem}.h-20{height:5rem}.h-3{height:.75rem}.h-32{height:8rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-\\[400px\\]{height:400px}.h-\\[600px\\]{height:600px}.h-full{height:100%}.h-screen{height:100vh}.min-h-\\[400px\\]{min-height:400px}.w-0{width:0px}.w-1{width:.25rem}.w-10{width:2.5rem}.w-20{width:5rem}.w-3{width:.75rem}.w-32{width:8rem}.w-4{width:1rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-72{width:18rem}.w-\\[400px\\]{width:400px}.w-\\[600px\\]{width:600px}.w-auto{width:auto}.w-full{width:100%}.w-px{width:1px}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-\\[1400px\\]{max-width:1400px}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.-translate-y-1\\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-default{cursor:default}.cursor-help{cursor:help}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.select-none{-webkit-user-select:none;user-select:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.content-center{align-content:center}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-x-1\\.5>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.375rem * var(--tw-space-x-reverse));margin-left:calc(.375rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-0\\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.125rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem * var(--tw-space-y-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.self-center{align-self:center}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-\\[2rem\\]{border-radius:2rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-r-full{border-top-right-radius:9999px;border-bottom-right-radius:9999px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-amber-300\\/50{border-color:#fcd34d80}.border-gray-100{--tw-border-opacity: 1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1))}.border-indigo-100{--tw-border-opacity: 1;border-color:rgb(224 231 255 / var(--tw-border-opacity, 1))}.border-slate-100{--tw-border-opacity: 1;border-color:rgb(241 245 249 / var(--tw-border-opacity, 1))}.border-slate-200{--tw-border-opacity: 1;border-color:rgb(226 232 240 / var(--tw-border-opacity, 1))}.border-slate-200\\/50{border-color:#e2e8f080}.border-slate-200\\/60{border-color:#e2e8f099}.border-slate-700{--tw-border-opacity: 1;border-color:rgb(51 65 85 / var(--tw-border-opacity, 1))}.border-slate-800{--tw-border-opacity: 1;border-color:rgb(30 41 59 / var(--tw-border-opacity, 1))}.border-white{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))}.border-white\\/20{border-color:#fff3}.border-white\\/40{border-color:#fff6}.bg-amber-400{--tw-bg-opacity: 1;background-color:rgb(251 191 36 / var(--tw-bg-opacity, 1))}.bg-emerald-400{--tw-bg-opacity: 1;background-color:rgb(52 211 153 / var(--tw-bg-opacity, 1))}.bg-indigo-400\\/30{background-color:#818cf84d}.bg-indigo-50{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.bg-indigo-50\\/80{background-color:#eef2ffcc}.bg-indigo-500{--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity, 1))}.bg-indigo-500\\/5{background-color:#6366f10d}.bg-indigo-600{--tw-bg-opacity: 1;background-color:rgb(79 70 229 / var(--tw-bg-opacity, 1))}.bg-rose-400{--tw-bg-opacity: 1;background-color:rgb(251 113 133 / var(--tw-bg-opacity, 1))}.bg-slate-100{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}.bg-slate-200{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity, 1))}.bg-slate-300{--tw-bg-opacity: 1;background-color:rgb(203 213 225 / var(--tw-bg-opacity, 1))}.bg-slate-50{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity, 1))}.bg-slate-50\\/30{background-color:#f8fafc4d}.bg-slate-50\\/50{background-color:#f8fafc80}.bg-slate-50\\/80{background-color:#f8fafccc}.bg-slate-800{--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}.bg-slate-900{--tw-bg-opacity: 1;background-color:rgb(15 23 42 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.bg-violet-500\\/5{background-color:#8b5cf60d}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white\\/10{background-color:#ffffff1a}.bg-white\\/20{background-color:#fff3}.bg-white\\/70{background-color:#ffffffb3}.bg-white\\/80{background-color:#fffc}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-amber-200{--tw-gradient-from: #fde68a var(--tw-gradient-from-position);--tw-gradient-to: rgb(253 230 138 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-indigo-50\\/80{--tw-gradient-from: rgb(238 242 255 / .8) var(--tw-gradient-from-position);--tw-gradient-to: rgb(238 242 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-indigo-500{--tw-gradient-from: #6366f1 var(--tw-gradient-from-position);--tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-indigo-600{--tw-gradient-from: #4f46e5 var(--tw-gradient-from-position);--tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-slate-100{--tw-gradient-from: #f1f5f9 var(--tw-gradient-from-position);--tw-gradient-to: rgb(241 245 249 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.via-purple-500{--tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #a855f7 var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-purple-600{--tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #9333ea var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-white{--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-amber-100{--tw-gradient-to: #fef3c7 var(--tw-gradient-to-position)}.to-indigo-800{--tw-gradient-to: #3730a3 var(--tw-gradient-to-position)}.to-pink-500{--tw-gradient-to: #ec4899 var(--tw-gradient-to-position)}.to-slate-50{--tw-gradient-to: #f8fafc var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to: transparent var(--tw-gradient-to-position)}.to-violet-600{--tw-gradient-to: #7c3aed var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-2\\.5{padding:.625rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0{padding-top:0;padding-bottom:0}.py-0\\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3\\.5{padding-top:.875rem;padding-bottom:.875rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-0{padding-bottom:0}.pb-10{padding-bottom:2.5rem}.pb-2{padding-bottom:.5rem}.pl-3{padding-left:.75rem}.pl-9{padding-left:2.25rem}.pr-10{padding-right:2.5rem}.pr-2{padding-right:.5rem}.text-left{text-align:left}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.text-2xl{font-size:1.5rem;line-height:2rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.text-\\[9px\\]{font-size:9px}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-light{font-weight:300}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-amber-800{--tw-text-opacity: 1;color:rgb(146 64 14 / var(--tw-text-opacity, 1))}.text-blue-300{--tw-text-opacity: 1;color:rgb(147 197 253 / var(--tw-text-opacity, 1))}.text-blue-400{--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.text-emerald-300{--tw-text-opacity: 1;color:rgb(110 231 183 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-green-300{--tw-text-opacity: 1;color:rgb(134 239 172 / var(--tw-text-opacity, 1))}.text-indigo-100{--tw-text-opacity: 1;color:rgb(224 231 255 / var(--tw-text-opacity, 1))}.text-indigo-500{--tw-text-opacity: 1;color:rgb(99 102 241 / var(--tw-text-opacity, 1))}.text-indigo-600{--tw-text-opacity: 1;color:rgb(79 70 229 / var(--tw-text-opacity, 1))}.text-indigo-700{--tw-text-opacity: 1;color:rgb(67 56 202 / var(--tw-text-opacity, 1))}.text-orange-300{--tw-text-opacity: 1;color:rgb(253 186 116 / var(--tw-text-opacity, 1))}.text-pink-400{--tw-text-opacity: 1;color:rgb(244 114 182 / var(--tw-text-opacity, 1))}.text-slate-100{--tw-text-opacity: 1;color:rgb(241 245 249 / var(--tw-text-opacity, 1))}.text-slate-300{--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.text-slate-400{--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.text-slate-500{--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.text-slate-600{--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity, 1))}.text-slate-700{--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity, 1))}.text-slate-800{--tw-text-opacity: 1;color:rgb(30 41 59 / var(--tw-text-opacity, 1))}.text-slate-900{--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-yellow-200{--tw-text-opacity: 1;color:rgb(254 240 138 / var(--tw-text-opacity, 1))}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-70{opacity:.7}.opacity-\\[0\\.03\\]{opacity:.03}.mix-blend-multiply{mix-blend-mode:multiply}.shadow-\\[0_20px_40px_-15px_rgba\\(0\\,0\\,0\\,0\\.05\\)\\]{--tw-shadow: 0 20px 40px -15px rgba(0,0,0,.05);--tw-shadow-colored: 0 20px 40px -15px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\\[0_8px_32px_-12px_rgba\\(0\\,0\\,0\\,0\\.08\\)\\]{--tw-shadow: 0 8px 32px -12px rgba(0,0,0,.08);--tw-shadow-colored: 0 8px 32px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\\[4px_0_24px_-12px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\]{--tw-shadow: 4px 0 24px -12px rgba(0,0,0,.1);--tw-shadow-colored: 4px 0 24px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-inner{--tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / .05);--tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-indigo-100{--tw-shadow-color: #e0e7ff;--tw-shadow: var(--tw-shadow-colored)}.shadow-indigo-500\\/20{--tw-shadow-color: rgb(99 102 241 / .2);--tw-shadow: var(--tw-shadow-colored)}.shadow-indigo-500\\/30{--tw-shadow-color: rgb(99 102 241 / .3);--tw-shadow: var(--tw-shadow-colored)}.shadow-slate-200\\/50{--tw-shadow-color: rgb(226 232 240 / .5);--tw-shadow: var(--tw-shadow-colored)}.outline{outline-style:solid}.ring-1{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-slate-200\\/50{--tw-ring-color: rgb(226 232 240 / .5)}.ring-slate-200\\/60{--tw-ring-color: rgb(226 232 240 / .6)}.blur-2xl{--tw-blur: blur(40px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-3xl{--tw-blur: blur(64px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-md{--tw-blur: blur(12px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-sm{--tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / .05));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-3xl{--tw-backdrop-blur: blur(64px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-md{--tw-backdrop-blur: blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-xl{--tw-backdrop-blur: blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.duration-700{transition-duration:.7s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.sn-adv-table-wrapper{width:100%;overflow:hidden;border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.sn-adv-table-bordered .sn-adv-table{border-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.sn-adv-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));padding:1rem}.sn-adv-search{position:relative;display:flex;align-items:center}.sn-adv-search-icon{pointer-events:none;position:absolute;left:.75rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.sn-adv-search-input{width:16rem;border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:.5rem 1rem .5rem 2.25rem;font-size:.875rem;line-height:1.25rem;outline:2px solid transparent;outline-offset:2px;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.sn-adv-search-input:focus{--tw-border-opacity: 1;border-color:rgb(99 102 241 / var(--tw-border-opacity, 1));--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1))}.sn-adv-toolbar-right{display:flex;align-items:center;gap:1rem}.sn-adv-result-count{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.sn-adv-page-size-select{cursor:pointer;border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:.375rem .75rem;font-size:.875rem;line-height:1.25rem;outline:2px solid transparent;outline-offset:2px}.sn-adv-page-size-select:focus{--tw-border-opacity: 1;border-color:rgb(99 102 241 / var(--tw-border-opacity, 1))}.sn-adv-table-scroll{overflow-x:auto}.sn-adv-table{width:100%;border-collapse:collapse;font-size:.875rem;line-height:1.25rem}.sn-adv-th{-webkit-user-select:none;user-select:none;border-bottom-width:2px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:.75rem 1rem;text-align:left;font-size:.75rem;line-height:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.sn-adv-th-sortable{cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.sn-adv-th-sortable:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.sn-adv-th-content{display:flex;align-items:center;gap:.25rem}.sn-adv-sort-icon{font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.sn-adv-th-checkbox,.sn-adv-td-checkbox{width:3rem;text-align:center}.sn-adv-th-expand,.sn-adv-td-expand{width:2.5rem;text-align:center}.sn-adv-filter-row .sn-adv-th-filter{border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:.5rem}.sn-adv-filter-input{width:100%;border-radius:.25rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:.375rem .5rem;font-size:.75rem;line-height:1rem;outline:2px solid transparent;outline-offset:2px}.sn-adv-filter-input:focus{--tw-border-opacity: 1;border-color:rgb(99 102 241 / var(--tw-border-opacity, 1))}.sn-adv-tr{border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.sn-adv-table-striped .sn-adv-tr:nth-child(2n){--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.sn-adv-table-hoverable .sn-adv-tr:hover,.sn-adv-tr-selected{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.sn-adv-td{padding:.75rem 1rem;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.sn-adv-checkbox{height:1rem;width:1rem;cursor:pointer;border-radius:.25rem;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:rgb(79 70 229 / var(--tw-text-opacity, 1));accent-color:#4f46e5}.sn-adv-td-expand{cursor:pointer}.sn-adv-expand-icon{display:inline-flex;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1));transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.sn-adv-expand-icon-open{--tw-rotate: 90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-text-opacity: 1;color:rgb(99 102 241 / var(--tw-text-opacity, 1))}.sn-adv-expanded-row td{padding:0}.sn-adv-expanded-content{border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:1rem;animation:slideDown .2s ease-out}.sn-adv-expanded-default{overflow-x:auto;border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:.75rem;font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.sn-adv-empty{padding-top:3rem;padding-bottom:3rem;text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.sn-adv-pagination{display:flex;align-items:center;justify-content:space-between;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));padding:1rem}.sn-adv-page-info{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.sn-adv-page-buttons{display:flex;align-items:center;gap:.25rem}.sn-adv-page-btn{display:inline-flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.sn-adv-page-btn:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.sn-adv-page-btn:disabled{cursor:not-allowed;opacity:.4}.sn-adv-page-btn-active{--tw-border-opacity: 1;border-color:rgb(79 70 229 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(79 70 229 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.sn-adv-page-btn-active:hover{--tw-bg-opacity: 1;background-color:rgb(67 56 202 / var(--tw-bg-opacity, 1))}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.selection\\:bg-indigo-500\\/30 *::selection{background-color:#6366f14d}.selection\\:text-indigo-900 *::selection{--tw-text-opacity: 1;color:rgb(49 46 129 / var(--tw-text-opacity, 1))}.selection\\:bg-indigo-500\\/30::selection{background-color:#6366f14d}.selection\\:text-indigo-900::selection{--tw-text-opacity: 1;color:rgb(49 46 129 / var(--tw-text-opacity, 1))}.hover\\:-translate-y-1:hover{--tw-translate-y: -.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:scale-\\[1\\.01\\]:hover{--tw-scale-x: 1.01;--tw-scale-y: 1.01;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:border-indigo-200:hover{--tw-border-opacity: 1;border-color:rgb(199 210 254 / var(--tw-border-opacity, 1))}.hover\\:border-indigo-300:hover{--tw-border-opacity: 1;border-color:rgb(165 180 252 / var(--tw-border-opacity, 1))}.hover\\:bg-indigo-50:hover{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-100:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-100\\/80:hover{background-color:#f1f5f9cc}.hover\\:bg-slate-200\\/50:hover{background-color:#e2e8f080}.hover\\:bg-slate-50:hover{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-700:hover{--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-800:hover{--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}.hover\\:bg-white:hover{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.hover\\:bg-white\\/90:hover{background-color:#ffffffe6}.hover\\:text-indigo-400:hover{--tw-text-opacity: 1;color:rgb(129 140 248 / var(--tw-text-opacity, 1))}.hover\\:text-slate-300:hover{--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.hover\\:text-slate-800:hover{--tw-text-opacity: 1;color:rgb(30 41 59 / var(--tw-text-opacity, 1))}.hover\\:text-slate-900:hover{--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.hover\\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\\:shadow-md:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\\:outline:hover{outline-style:solid}.focus\\:border-indigo-500:focus{--tw-border-opacity: 1;border-color:rgb(99 102 241 / var(--tw-border-opacity, 1))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\\:ring-indigo-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1))}.focus\\:ring-indigo-500\\/20:focus{--tw-ring-color: rgb(99 102 241 / .2)}.group\\/btn:hover .group-hover\\/btn\\:translate-x-1\\.5{--tw-translate-x: .375rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:scale-110{--tw-scale-x: 1.1;--tw-scale-y: 1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:scale-150{--tw-scale-x: 1.5;--tw-scale-y: 1.5;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:bg-indigo-50{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.group:hover .group-hover\\:bg-white\\/40{background-color:#fff6}.group:hover .group-hover\\:text-indigo-500{--tw-text-opacity: 1;color:rgb(99 102 241 / var(--tw-text-opacity, 1))}.group\\/code:hover .group-hover\\/code\\:opacity-100,.group:hover .group-hover\\:opacity-100{opacity:1}@media(min-width:640px){.sm\\:block{display:block}.sm\\:inline-block{display:inline-block}.sm\\:flex{display:flex}.sm\\:w-64{width:16rem}.sm\\:flex-row{flex-direction:row}.sm\\:items-center{align-items:center}.sm\\:p-8{padding:2rem}.sm\\:px-8{padding-left:2rem;padding-right:2rem}.sm\\:text-5xl{font-size:3rem;line-height:1}}@media(min-width:768px){.md\\:flex{display:flex}.md\\:p-16{padding:4rem}}@media(min-width:1024px){.lg\\:hidden{display:none}}@media(min-width:1280px){.xl\\:col-span-2{grid-column:span 2 / span 2}.xl\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] }); }
|
|
212
|
+
}
|
|
213
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SnAdvancedDatatableComponent, decorators: [{
|
|
214
|
+
type: Component,
|
|
215
|
+
args: [{ selector: 'sn-advanced-datatable', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"sn-adv-table-wrapper\" [class.sn-adv-table-bordered]=\"bordered\">\n\n <!-- Toolbar: Search + Page Size -->\n @if(searchable || pageSizeOptions.length > 1) {\n <div class=\"sn-adv-toolbar\">\n @if(searchable) {\n <div class=\"sn-adv-search\">\n <svg class=\"sn-adv-search-icon\" viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"16\" height=\"16\">\n <path fill-rule=\"evenodd\"\n d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\"\n clip-rule=\"evenodd\" />\n </svg>\n <input type=\"text\" class=\"sn-adv-search-input\" placeholder=\"Search all columns...\" [(ngModel)]=\"searchQuery\"\n (ngModelChange)=\"onSearchChange()\" />\n </div>\n }\n\n <div class=\"sn-adv-toolbar-right\">\n <span class=\"sn-adv-result-count\">{{ totalFilteredItems }} results</span>\n\n <select class=\"sn-adv-page-size-select\" [(ngModel)]=\"pageSize\" (ngModelChange)=\"onPageSizeChange()\">\n @for(opt of pageSizeOptions; track opt) {\n <option [value]=\"opt\">{{ opt }} per page</option>\n }\n </select>\n </div>\n </div>\n }\n\n <!-- Table -->\n <div class=\"sn-adv-table-scroll\">\n <table class=\"sn-adv-table\" [class.sn-adv-table-striped]=\"striped\" [class.sn-adv-table-hoverable]=\"hoverable\">\n <thead>\n <tr>\n <!-- Selection Checkbox Header -->\n @if(selectable) {\n <th class=\"sn-adv-th sn-adv-th-checkbox\">\n <input type=\"checkbox\" [checked]=\"allSelected\" (change)=\"toggleSelectAll()\"\n class=\"sn-adv-checkbox\" />\n </th>\n }\n\n <!-- Expand Toggle Header -->\n @if(expandable) {\n <th class=\"sn-adv-th sn-adv-th-expand\"></th>\n }\n\n <!-- Column Headers -->\n @for(col of columns; track col.key) {\n <th class=\"sn-adv-th\" [style.width]=\"col.width || 'auto'\" [style.text-align]=\"col.align || 'left'\"\n [class.sn-adv-th-sortable]=\"col.sortable !== false\" (click)=\"sort(col.key)\">\n <div class=\"sn-adv-th-content\">\n <span>{{ col.header }}</span>\n @if(col.sortable !== false) {\n <span class=\"sn-adv-sort-icon\">{{ getSortIcon(col.key) }}</span>\n }\n </div>\n </th>\n }\n </tr>\n\n <!-- Per-column filter row -->\n @if(filterable) {\n <tr class=\"sn-adv-filter-row\">\n @if(selectable) { <th></th> }\n @if(expandable) { <th></th> }\n @for(col of columns; track col.key) {\n <th class=\"sn-adv-th-filter\">\n @if(col.filterable !== false) {\n <input type=\"text\" class=\"sn-adv-filter-input\" [placeholder]=\"'Filter ' + col.header\"\n [(ngModel)]=\"columnFilters[col.key]\" (ngModelChange)=\"onFilterChange()\" />\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody>\n @for(row of paginatedData; track row; let i = $index) {\n @let globalIndex = (currentPage - 1) * pageSize + i;\n <tr class=\"sn-adv-tr\" [class.sn-adv-tr-selected]=\"isRowSelected(globalIndex)\">\n\n <!-- Selection Checkbox -->\n @if(selectable) {\n <td class=\"sn-adv-td sn-adv-td-checkbox\">\n <input type=\"checkbox\" [checked]=\"isRowSelected(globalIndex)\"\n (change)=\"toggleRowSelect(globalIndex)\" class=\"sn-adv-checkbox\" />\n </td>\n }\n\n <!-- Expand Toggle -->\n @if(expandable) {\n <td class=\"sn-adv-td sn-adv-td-expand\" (click)=\"toggleRowExpand(globalIndex)\">\n <span class=\"sn-adv-expand-icon\" [class.sn-adv-expand-icon-open]=\"isRowExpanded(globalIndex)\">\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"16\" height=\"16\">\n <path fill-rule=\"evenodd\"\n d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </span>\n </td>\n }\n\n <!-- Data Cells -->\n @for(col of columns; track col.key) {\n <td class=\"sn-adv-td\" [style.text-align]=\"col.align || 'left'\">\n {{ row[col.key] }}\n </td>\n }\n </tr>\n\n <!-- Expanded Row Content -->\n @if(expandable && isRowExpanded(globalIndex)) {\n <tr class=\"sn-adv-expanded-row\">\n <td [attr.colspan]=\"columns.length + (selectable ? 1 : 0) + (expandable ? 1 : 0)\">\n <div class=\"sn-adv-expanded-content\">\n @if(expandedRowTemplate) {\n <ng-container\n *ngTemplateOutlet=\"expandedRowTemplate; context: { $implicit: row, index: globalIndex }\"></ng-container>\n } @else {\n <pre class=\"sn-adv-expanded-default\">{{ row | json }}</pre>\n }\n </div>\n </td>\n </tr>\n }\n }\n\n <!-- Empty State -->\n @if(paginatedData.length === 0) {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectable ? 1 : 0) + (expandable ? 1 : 0)\"\n class=\"sn-adv-empty\">\n No data found.\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <!-- Pagination Footer -->\n @if(totalPages > 1) {\n <div class=\"sn-adv-pagination\">\n <span class=\"sn-adv-page-info\">\n Page {{ currentPage }} of {{ totalPages }}\n </span>\n <div class=\"sn-adv-page-buttons\">\n <button class=\"sn-adv-page-btn\" [disabled]=\"currentPage === 1\" (click)=\"prevPage()\">\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"14\" height=\"14\">\n <path fill-rule=\"evenodd\"\n d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n @for(p of getVisiblePages(); track p) {\n <button class=\"sn-adv-page-btn\" [class.sn-adv-page-btn-active]=\"p === currentPage\" (click)=\"goToPage(p)\">{{\n p }}</button>\n }\n <button class=\"sn-adv-page-btn\" [disabled]=\"currentPage === totalPages\" (click)=\"nextPage()\">\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"14\" height=\"14\">\n <path fill-rule=\"evenodd\"\n d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n </div>\n </div>\n }\n</div>", styles: ["*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.inset-y-0{top:0;bottom:0}.-bottom-12{bottom:-3rem}.-left-20{left:-5rem}.-left-8{left:-2rem}.-right-12{right:-3rem}.-right-20{right:-5rem}.-right-40{right:-10rem}.-top-20{top:-5rem}.-top-40{top:-10rem}.-top-8{top:-2rem}.left-0{left:0}.right-0{right:0}.right-4{right:1rem}.top-0{top:0}.top-1\\/2{top:50%}.top-4{top:1rem}.top-40{top:10rem}.-z-10{z-index:-10}.z-10{z-index:10}.z-20{z-index:20}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-6{margin-left:1.5rem}.ml-auto{margin-left:auto}.mr-1\\.5{margin-right:.375rem}.mr-2{margin-right:.5rem}.mr-4{margin-right:1rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-auto{margin-top:auto}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-0{height:0px}.h-1{height:.25rem}.h-10{height:2.5rem}.h-16{height:4rem}.h-20{height:5rem}.h-3{height:.75rem}.h-32{height:8rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-\\[400px\\]{height:400px}.h-\\[600px\\]{height:600px}.h-full{height:100%}.h-screen{height:100vh}.min-h-\\[400px\\]{min-height:400px}.w-0{width:0px}.w-1{width:.25rem}.w-10{width:2.5rem}.w-20{width:5rem}.w-3{width:.75rem}.w-32{width:8rem}.w-4{width:1rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-72{width:18rem}.w-\\[400px\\]{width:400px}.w-\\[600px\\]{width:600px}.w-auto{width:auto}.w-full{width:100%}.w-px{width:1px}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-\\[1400px\\]{max-width:1400px}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.-translate-y-1\\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-default{cursor:default}.cursor-help{cursor:help}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.select-none{-webkit-user-select:none;user-select:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.content-center{align-content:center}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-x-1\\.5>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.375rem * var(--tw-space-x-reverse));margin-left:calc(.375rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-0\\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.125rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem * var(--tw-space-y-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.self-center{align-self:center}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-\\[2rem\\]{border-radius:2rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-r-full{border-top-right-radius:9999px;border-bottom-right-radius:9999px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-amber-300\\/50{border-color:#fcd34d80}.border-gray-100{--tw-border-opacity: 1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1))}.border-indigo-100{--tw-border-opacity: 1;border-color:rgb(224 231 255 / var(--tw-border-opacity, 1))}.border-slate-100{--tw-border-opacity: 1;border-color:rgb(241 245 249 / var(--tw-border-opacity, 1))}.border-slate-200{--tw-border-opacity: 1;border-color:rgb(226 232 240 / var(--tw-border-opacity, 1))}.border-slate-200\\/50{border-color:#e2e8f080}.border-slate-200\\/60{border-color:#e2e8f099}.border-slate-700{--tw-border-opacity: 1;border-color:rgb(51 65 85 / var(--tw-border-opacity, 1))}.border-slate-800{--tw-border-opacity: 1;border-color:rgb(30 41 59 / var(--tw-border-opacity, 1))}.border-white{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))}.border-white\\/20{border-color:#fff3}.border-white\\/40{border-color:#fff6}.bg-amber-400{--tw-bg-opacity: 1;background-color:rgb(251 191 36 / var(--tw-bg-opacity, 1))}.bg-emerald-400{--tw-bg-opacity: 1;background-color:rgb(52 211 153 / var(--tw-bg-opacity, 1))}.bg-indigo-400\\/30{background-color:#818cf84d}.bg-indigo-50{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.bg-indigo-50\\/80{background-color:#eef2ffcc}.bg-indigo-500{--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity, 1))}.bg-indigo-500\\/5{background-color:#6366f10d}.bg-indigo-600{--tw-bg-opacity: 1;background-color:rgb(79 70 229 / var(--tw-bg-opacity, 1))}.bg-rose-400{--tw-bg-opacity: 1;background-color:rgb(251 113 133 / var(--tw-bg-opacity, 1))}.bg-slate-100{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}.bg-slate-200{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity, 1))}.bg-slate-300{--tw-bg-opacity: 1;background-color:rgb(203 213 225 / var(--tw-bg-opacity, 1))}.bg-slate-50{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity, 1))}.bg-slate-50\\/30{background-color:#f8fafc4d}.bg-slate-50\\/50{background-color:#f8fafc80}.bg-slate-50\\/80{background-color:#f8fafccc}.bg-slate-800{--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}.bg-slate-900{--tw-bg-opacity: 1;background-color:rgb(15 23 42 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.bg-violet-500\\/5{background-color:#8b5cf60d}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white\\/10{background-color:#ffffff1a}.bg-white\\/20{background-color:#fff3}.bg-white\\/70{background-color:#ffffffb3}.bg-white\\/80{background-color:#fffc}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-amber-200{--tw-gradient-from: #fde68a var(--tw-gradient-from-position);--tw-gradient-to: rgb(253 230 138 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-indigo-50\\/80{--tw-gradient-from: rgb(238 242 255 / .8) var(--tw-gradient-from-position);--tw-gradient-to: rgb(238 242 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-indigo-500{--tw-gradient-from: #6366f1 var(--tw-gradient-from-position);--tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-indigo-600{--tw-gradient-from: #4f46e5 var(--tw-gradient-from-position);--tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-slate-100{--tw-gradient-from: #f1f5f9 var(--tw-gradient-from-position);--tw-gradient-to: rgb(241 245 249 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.via-purple-500{--tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #a855f7 var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-purple-600{--tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #9333ea var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-white{--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-amber-100{--tw-gradient-to: #fef3c7 var(--tw-gradient-to-position)}.to-indigo-800{--tw-gradient-to: #3730a3 var(--tw-gradient-to-position)}.to-pink-500{--tw-gradient-to: #ec4899 var(--tw-gradient-to-position)}.to-slate-50{--tw-gradient-to: #f8fafc var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to: transparent var(--tw-gradient-to-position)}.to-violet-600{--tw-gradient-to: #7c3aed var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-2\\.5{padding:.625rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0{padding-top:0;padding-bottom:0}.py-0\\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3\\.5{padding-top:.875rem;padding-bottom:.875rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-0{padding-bottom:0}.pb-10{padding-bottom:2.5rem}.pb-2{padding-bottom:.5rem}.pl-3{padding-left:.75rem}.pl-9{padding-left:2.25rem}.pr-10{padding-right:2.5rem}.pr-2{padding-right:.5rem}.text-left{text-align:left}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.text-2xl{font-size:1.5rem;line-height:2rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.text-\\[9px\\]{font-size:9px}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-light{font-weight:300}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-amber-800{--tw-text-opacity: 1;color:rgb(146 64 14 / var(--tw-text-opacity, 1))}.text-blue-300{--tw-text-opacity: 1;color:rgb(147 197 253 / var(--tw-text-opacity, 1))}.text-blue-400{--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.text-emerald-300{--tw-text-opacity: 1;color:rgb(110 231 183 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-green-300{--tw-text-opacity: 1;color:rgb(134 239 172 / var(--tw-text-opacity, 1))}.text-indigo-100{--tw-text-opacity: 1;color:rgb(224 231 255 / var(--tw-text-opacity, 1))}.text-indigo-500{--tw-text-opacity: 1;color:rgb(99 102 241 / var(--tw-text-opacity, 1))}.text-indigo-600{--tw-text-opacity: 1;color:rgb(79 70 229 / var(--tw-text-opacity, 1))}.text-indigo-700{--tw-text-opacity: 1;color:rgb(67 56 202 / var(--tw-text-opacity, 1))}.text-orange-300{--tw-text-opacity: 1;color:rgb(253 186 116 / var(--tw-text-opacity, 1))}.text-pink-400{--tw-text-opacity: 1;color:rgb(244 114 182 / var(--tw-text-opacity, 1))}.text-slate-100{--tw-text-opacity: 1;color:rgb(241 245 249 / var(--tw-text-opacity, 1))}.text-slate-300{--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.text-slate-400{--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.text-slate-500{--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.text-slate-600{--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity, 1))}.text-slate-700{--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity, 1))}.text-slate-800{--tw-text-opacity: 1;color:rgb(30 41 59 / var(--tw-text-opacity, 1))}.text-slate-900{--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-yellow-200{--tw-text-opacity: 1;color:rgb(254 240 138 / var(--tw-text-opacity, 1))}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-70{opacity:.7}.opacity-\\[0\\.03\\]{opacity:.03}.mix-blend-multiply{mix-blend-mode:multiply}.shadow-\\[0_20px_40px_-15px_rgba\\(0\\,0\\,0\\,0\\.05\\)\\]{--tw-shadow: 0 20px 40px -15px rgba(0,0,0,.05);--tw-shadow-colored: 0 20px 40px -15px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\\[0_8px_32px_-12px_rgba\\(0\\,0\\,0\\,0\\.08\\)\\]{--tw-shadow: 0 8px 32px -12px rgba(0,0,0,.08);--tw-shadow-colored: 0 8px 32px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\\[4px_0_24px_-12px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\]{--tw-shadow: 4px 0 24px -12px rgba(0,0,0,.1);--tw-shadow-colored: 4px 0 24px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-inner{--tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / .05);--tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-indigo-100{--tw-shadow-color: #e0e7ff;--tw-shadow: var(--tw-shadow-colored)}.shadow-indigo-500\\/20{--tw-shadow-color: rgb(99 102 241 / .2);--tw-shadow: var(--tw-shadow-colored)}.shadow-indigo-500\\/30{--tw-shadow-color: rgb(99 102 241 / .3);--tw-shadow: var(--tw-shadow-colored)}.shadow-slate-200\\/50{--tw-shadow-color: rgb(226 232 240 / .5);--tw-shadow: var(--tw-shadow-colored)}.outline{outline-style:solid}.ring-1{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-slate-200\\/50{--tw-ring-color: rgb(226 232 240 / .5)}.ring-slate-200\\/60{--tw-ring-color: rgb(226 232 240 / .6)}.blur-2xl{--tw-blur: blur(40px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-3xl{--tw-blur: blur(64px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-md{--tw-blur: blur(12px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-sm{--tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / .05));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-3xl{--tw-backdrop-blur: blur(64px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-md{--tw-backdrop-blur: blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-xl{--tw-backdrop-blur: blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.duration-700{transition-duration:.7s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.sn-adv-table-wrapper{width:100%;overflow:hidden;border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.sn-adv-table-bordered .sn-adv-table{border-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.sn-adv-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));padding:1rem}.sn-adv-search{position:relative;display:flex;align-items:center}.sn-adv-search-icon{pointer-events:none;position:absolute;left:.75rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.sn-adv-search-input{width:16rem;border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:.5rem 1rem .5rem 2.25rem;font-size:.875rem;line-height:1.25rem;outline:2px solid transparent;outline-offset:2px;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.sn-adv-search-input:focus{--tw-border-opacity: 1;border-color:rgb(99 102 241 / var(--tw-border-opacity, 1));--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1))}.sn-adv-toolbar-right{display:flex;align-items:center;gap:1rem}.sn-adv-result-count{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.sn-adv-page-size-select{cursor:pointer;border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:.375rem .75rem;font-size:.875rem;line-height:1.25rem;outline:2px solid transparent;outline-offset:2px}.sn-adv-page-size-select:focus{--tw-border-opacity: 1;border-color:rgb(99 102 241 / var(--tw-border-opacity, 1))}.sn-adv-table-scroll{overflow-x:auto}.sn-adv-table{width:100%;border-collapse:collapse;font-size:.875rem;line-height:1.25rem}.sn-adv-th{-webkit-user-select:none;user-select:none;border-bottom-width:2px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:.75rem 1rem;text-align:left;font-size:.75rem;line-height:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.sn-adv-th-sortable{cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.sn-adv-th-sortable:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.sn-adv-th-content{display:flex;align-items:center;gap:.25rem}.sn-adv-sort-icon{font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.sn-adv-th-checkbox,.sn-adv-td-checkbox{width:3rem;text-align:center}.sn-adv-th-expand,.sn-adv-td-expand{width:2.5rem;text-align:center}.sn-adv-filter-row .sn-adv-th-filter{border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:.5rem}.sn-adv-filter-input{width:100%;border-radius:.25rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:.375rem .5rem;font-size:.75rem;line-height:1rem;outline:2px solid transparent;outline-offset:2px}.sn-adv-filter-input:focus{--tw-border-opacity: 1;border-color:rgb(99 102 241 / var(--tw-border-opacity, 1))}.sn-adv-tr{border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.sn-adv-table-striped .sn-adv-tr:nth-child(2n){--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.sn-adv-table-hoverable .sn-adv-tr:hover,.sn-adv-tr-selected{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.sn-adv-td{padding:.75rem 1rem;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.sn-adv-checkbox{height:1rem;width:1rem;cursor:pointer;border-radius:.25rem;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:rgb(79 70 229 / var(--tw-text-opacity, 1));accent-color:#4f46e5}.sn-adv-td-expand{cursor:pointer}.sn-adv-expand-icon{display:inline-flex;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1));transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.sn-adv-expand-icon-open{--tw-rotate: 90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-text-opacity: 1;color:rgb(99 102 241 / var(--tw-text-opacity, 1))}.sn-adv-expanded-row td{padding:0}.sn-adv-expanded-content{border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:1rem;animation:slideDown .2s ease-out}.sn-adv-expanded-default{overflow-x:auto;border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:.75rem;font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.sn-adv-empty{padding-top:3rem;padding-bottom:3rem;text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.sn-adv-pagination{display:flex;align-items:center;justify-content:space-between;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));padding:1rem}.sn-adv-page-info{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.sn-adv-page-buttons{display:flex;align-items:center;gap:.25rem}.sn-adv-page-btn{display:inline-flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.sn-adv-page-btn:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.sn-adv-page-btn:disabled{cursor:not-allowed;opacity:.4}.sn-adv-page-btn-active{--tw-border-opacity: 1;border-color:rgb(79 70 229 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(79 70 229 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.sn-adv-page-btn-active:hover{--tw-bg-opacity: 1;background-color:rgb(67 56 202 / var(--tw-bg-opacity, 1))}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.selection\\:bg-indigo-500\\/30 *::selection{background-color:#6366f14d}.selection\\:text-indigo-900 *::selection{--tw-text-opacity: 1;color:rgb(49 46 129 / var(--tw-text-opacity, 1))}.selection\\:bg-indigo-500\\/30::selection{background-color:#6366f14d}.selection\\:text-indigo-900::selection{--tw-text-opacity: 1;color:rgb(49 46 129 / var(--tw-text-opacity, 1))}.hover\\:-translate-y-1:hover{--tw-translate-y: -.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:scale-\\[1\\.01\\]:hover{--tw-scale-x: 1.01;--tw-scale-y: 1.01;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:border-indigo-200:hover{--tw-border-opacity: 1;border-color:rgb(199 210 254 / var(--tw-border-opacity, 1))}.hover\\:border-indigo-300:hover{--tw-border-opacity: 1;border-color:rgb(165 180 252 / var(--tw-border-opacity, 1))}.hover\\:bg-indigo-50:hover{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-100:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-100\\/80:hover{background-color:#f1f5f9cc}.hover\\:bg-slate-200\\/50:hover{background-color:#e2e8f080}.hover\\:bg-slate-50:hover{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-700:hover{--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-800:hover{--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}.hover\\:bg-white:hover{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.hover\\:bg-white\\/90:hover{background-color:#ffffffe6}.hover\\:text-indigo-400:hover{--tw-text-opacity: 1;color:rgb(129 140 248 / var(--tw-text-opacity, 1))}.hover\\:text-slate-300:hover{--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.hover\\:text-slate-800:hover{--tw-text-opacity: 1;color:rgb(30 41 59 / var(--tw-text-opacity, 1))}.hover\\:text-slate-900:hover{--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.hover\\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\\:shadow-md:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\\:outline:hover{outline-style:solid}.focus\\:border-indigo-500:focus{--tw-border-opacity: 1;border-color:rgb(99 102 241 / var(--tw-border-opacity, 1))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\\:ring-indigo-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1))}.focus\\:ring-indigo-500\\/20:focus{--tw-ring-color: rgb(99 102 241 / .2)}.group\\/btn:hover .group-hover\\/btn\\:translate-x-1\\.5{--tw-translate-x: .375rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:scale-110{--tw-scale-x: 1.1;--tw-scale-y: 1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:scale-150{--tw-scale-x: 1.5;--tw-scale-y: 1.5;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:bg-indigo-50{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.group:hover .group-hover\\:bg-white\\/40{background-color:#fff6}.group:hover .group-hover\\:text-indigo-500{--tw-text-opacity: 1;color:rgb(99 102 241 / var(--tw-text-opacity, 1))}.group\\/code:hover .group-hover\\/code\\:opacity-100,.group:hover .group-hover\\:opacity-100{opacity:1}@media(min-width:640px){.sm\\:block{display:block}.sm\\:inline-block{display:inline-block}.sm\\:flex{display:flex}.sm\\:w-64{width:16rem}.sm\\:flex-row{flex-direction:row}.sm\\:items-center{align-items:center}.sm\\:p-8{padding:2rem}.sm\\:px-8{padding-left:2rem;padding-right:2rem}.sm\\:text-5xl{font-size:3rem;line-height:1}}@media(min-width:768px){.md\\:flex{display:flex}.md\\:p-16{padding:4rem}}@media(min-width:1024px){.lg\\:hidden{display:none}}@media(min-width:1280px){.xl\\:col-span-2{grid-column:span 2 / span 2}.xl\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}\n"] }]
|
|
216
|
+
}], propDecorators: { columns: [{
|
|
217
|
+
type: Input
|
|
218
|
+
}], data: [{
|
|
219
|
+
type: Input
|
|
220
|
+
}], searchable: [{
|
|
221
|
+
type: Input
|
|
222
|
+
}], filterable: [{
|
|
223
|
+
type: Input
|
|
224
|
+
}], selectable: [{
|
|
225
|
+
type: Input
|
|
226
|
+
}], expandable: [{
|
|
227
|
+
type: Input
|
|
228
|
+
}], expandedRowTemplate: [{
|
|
229
|
+
type: Input
|
|
230
|
+
}], striped: [{
|
|
231
|
+
type: Input
|
|
232
|
+
}], hoverable: [{
|
|
233
|
+
type: Input
|
|
234
|
+
}], bordered: [{
|
|
235
|
+
type: Input
|
|
236
|
+
}], pageSize: [{
|
|
237
|
+
type: Input
|
|
238
|
+
}], pageSizeOptions: [{
|
|
239
|
+
type: Input
|
|
240
|
+
}], sorted: [{
|
|
241
|
+
type: Output
|
|
242
|
+
}], selectionChange: [{
|
|
243
|
+
type: Output
|
|
244
|
+
}], rowExpanded: [{
|
|
245
|
+
type: Output
|
|
246
|
+
}] } });
|
|
247
|
+
|
|
248
|
+
/*
|
|
249
|
+
* Public API Surface of sn-advanced-datatable
|
|
250
|
+
*/
|
|
251
|
+
|
|
252
|
+
/**
|
|
253
|
+
* Generated bundle index. Do not edit.
|
|
254
|
+
*/
|
|
255
|
+
|
|
256
|
+
export { SnAdvancedDatatableComponent };
|
|
257
|
+
//# sourceMappingURL=sn-advanced-datatable.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sn-advanced-datatable.mjs","sources":["../../../projects/sn-advanced-datatable/src/lib/sn-advanced-datatable.component.ts","../../../projects/sn-advanced-datatable/src/lib/sn-advanced-datatable.component.html","../../../projects/sn-advanced-datatable/src/public-api.ts","../../../projects/sn-advanced-datatable/src/sn-advanced-datatable.ts"],"sourcesContent":["import {\n Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, TemplateRef\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\n\nexport interface AdvTableColumn {\n header: string;\n key: string;\n sortable?: boolean;\n filterable?: boolean;\n width?: string;\n align?: 'left' | 'center' | 'right';\n}\n\nexport interface AdvTableRow {\n [key: string]: any;\n}\n\nexport interface AdvSortEvent {\n column: string;\n direction: 'asc' | 'desc';\n}\n\n@Component({\n selector: 'sn-advanced-datatable',\n standalone: true,\n imports: [CommonModule, FormsModule],\n templateUrl: './sn-advanced-datatable.component.html',\n styleUrls: ['./sn-advanced-datatable.component.scss'],\n})\nexport class SnAdvancedDatatableComponent implements OnInit, OnChanges {\n // --- Data ---\n @Input() columns: AdvTableColumn[] = [];\n @Input() data: AdvTableRow[] = [];\n\n // --- Features ---\n @Input() searchable: boolean = true;\n @Input() filterable: boolean = false;\n @Input() selectable: boolean = false;\n @Input() expandable: boolean = false;\n @Input() expandedRowTemplate: TemplateRef<any> | null = null;\n\n // --- Appearance ---\n @Input() striped: boolean = true;\n @Input() hoverable: boolean = true;\n @Input() bordered: boolean = false;\n @Input() pageSize: number = 10;\n @Input() pageSizeOptions: number[] = [5, 10, 25, 50];\n\n // --- Outputs ---\n @Output() sorted = new EventEmitter<AdvSortEvent>();\n @Output() selectionChange = new EventEmitter<AdvTableRow[]>();\n @Output() rowExpanded = new EventEmitter<AdvTableRow>();\n\n // --- Internal State ---\n processedData: AdvTableRow[] = [];\n paginatedData: AdvTableRow[] = [];\n currentPage: number = 1;\n totalPages: number = 1;\n totalFilteredItems: number = 0;\n\n sortColumn: string | null = null;\n sortDirection: 'asc' | 'desc' = 'asc';\n\n searchQuery: string = '';\n columnFilters: { [key: string]: string } = {};\n\n selectedRows: Set<number> = new Set();\n allSelected: boolean = false;\n\n expandedRows: Set<number> = new Set();\n\n ngOnInit(): void {\n this.processTable();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['data'] || changes['columns'] || changes['pageSize']) {\n this.processTable();\n }\n }\n\n // --- Searching ---\n onSearchChange(): void {\n this.currentPage = 1;\n this.processTable();\n }\n\n // --- Column Filtering ---\n onFilterChange(): void {\n this.currentPage = 1;\n this.processTable();\n }\n\n // --- Sorting ---\n sort(column: string): void {\n const col = this.columns.find(c => c.key === column);\n if (!col || col.sortable === false) return;\n\n if (this.sortColumn === column) {\n this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';\n } else {\n this.sortColumn = column;\n this.sortDirection = 'asc';\n }\n\n this.sorted.emit({ column, direction: this.sortDirection });\n this.processTable();\n }\n\n getSortIcon(column: string): string {\n if (this.sortColumn !== column) return '↕';\n return this.sortDirection === 'asc' ? '↑' : '↓';\n }\n\n // --- Selection ---\n toggleSelectAll(): void {\n if (this.allSelected) {\n this.selectedRows.clear();\n this.allSelected = false;\n } else {\n this.paginatedData.forEach((_, i) => {\n const globalIndex = (this.currentPage - 1) * this.pageSize + i;\n this.selectedRows.add(globalIndex);\n });\n this.allSelected = true;\n }\n this.emitSelection();\n }\n\n toggleRowSelect(globalIndex: number): void {\n if (this.selectedRows.has(globalIndex)) {\n this.selectedRows.delete(globalIndex);\n } else {\n this.selectedRows.add(globalIndex);\n }\n this.allSelected = this.paginatedData.every((_, i) => {\n return this.selectedRows.has((this.currentPage - 1) * this.pageSize + i);\n });\n this.emitSelection();\n }\n\n isRowSelected(globalIndex: number): boolean {\n return this.selectedRows.has(globalIndex);\n }\n\n private emitSelection(): void {\n const selected = Array.from(this.selectedRows).map(i => this.processedData[i]).filter(Boolean);\n this.selectionChange.emit(selected);\n }\n\n // --- Expansion ---\n toggleRowExpand(globalIndex: number): void {\n if (this.expandedRows.has(globalIndex)) {\n this.expandedRows.delete(globalIndex);\n } else {\n this.expandedRows.add(globalIndex);\n this.rowExpanded.emit(this.processedData[globalIndex]);\n }\n }\n\n isRowExpanded(globalIndex: number): boolean {\n return this.expandedRows.has(globalIndex);\n }\n\n // --- Pagination ---\n goToPage(page: number): void {\n if (page >= 1 && page <= this.totalPages) {\n this.currentPage = page;\n this.updatePaginatedData();\n }\n }\n\n nextPage(): void { this.goToPage(this.currentPage + 1); }\n prevPage(): void { this.goToPage(this.currentPage - 1); }\n\n onPageSizeChange(): void {\n this.currentPage = 1;\n this.processTable();\n }\n\n getVisiblePages(): number[] {\n const pages: number[] = [];\n const maxVisible = 5;\n let start = Math.max(1, this.currentPage - Math.floor(maxVisible / 2));\n let end = Math.min(this.totalPages, start + maxVisible - 1);\n\n if (end - start + 1 < maxVisible) {\n start = Math.max(1, end - maxVisible + 1);\n }\n\n for (let i = start; i <= end; i++) {\n pages.push(i);\n }\n return pages;\n }\n\n // --- Core Processing Pipeline ---\n private processTable(): void {\n let result = [...this.data];\n\n // 1. Global search filter\n if (this.searchQuery.trim()) {\n const query = this.searchQuery.toLowerCase();\n result = result.filter(row =>\n this.columns.some(col => {\n const val = row[col.key];\n return val !== null && val !== undefined && String(val).toLowerCase().includes(query);\n })\n );\n }\n\n // 2. Per-column filters\n if (this.filterable) {\n for (const col of this.columns) {\n const filter = this.columnFilters[col.key];\n if (filter && filter.trim()) {\n const filterLower = filter.toLowerCase();\n result = result.filter(row => {\n const val = row[col.key];\n return val !== null && val !== undefined && String(val).toLowerCase().includes(filterLower);\n });\n }\n }\n }\n\n // 3. Sort\n if (this.sortColumn) {\n const dir = this.sortDirection;\n result.sort((a, b) => {\n const aVal = a[this.sortColumn!];\n const bVal = b[this.sortColumn!];\n if (aVal === null || aVal === undefined) return 1;\n if (bVal === null || bVal === undefined) return -1;\n\n let cmp = 0;\n if (typeof aVal === 'string') cmp = aVal.localeCompare(bVal);\n else if (typeof aVal === 'number') cmp = aVal - bVal;\n else if (aVal instanceof Date && bVal instanceof Date) cmp = aVal.getTime() - bVal.getTime();\n\n return dir === 'asc' ? cmp : -cmp;\n });\n }\n\n this.processedData = result;\n this.totalFilteredItems = result.length;\n this.totalPages = Math.max(1, Math.ceil(result.length / this.pageSize));\n\n if (this.currentPage > this.totalPages) {\n this.currentPage = this.totalPages;\n }\n\n this.updatePaginatedData();\n }\n\n private updatePaginatedData(): void {\n const start = (this.currentPage - 1) * this.pageSize;\n this.paginatedData = this.processedData.slice(start, start + this.pageSize);\n }\n}\n","<div class=\"sn-adv-table-wrapper\" [class.sn-adv-table-bordered]=\"bordered\">\n\n <!-- Toolbar: Search + Page Size -->\n @if(searchable || pageSizeOptions.length > 1) {\n <div class=\"sn-adv-toolbar\">\n @if(searchable) {\n <div class=\"sn-adv-search\">\n <svg class=\"sn-adv-search-icon\" viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"16\" height=\"16\">\n <path fill-rule=\"evenodd\"\n d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\"\n clip-rule=\"evenodd\" />\n </svg>\n <input type=\"text\" class=\"sn-adv-search-input\" placeholder=\"Search all columns...\" [(ngModel)]=\"searchQuery\"\n (ngModelChange)=\"onSearchChange()\" />\n </div>\n }\n\n <div class=\"sn-adv-toolbar-right\">\n <span class=\"sn-adv-result-count\">{{ totalFilteredItems }} results</span>\n\n <select class=\"sn-adv-page-size-select\" [(ngModel)]=\"pageSize\" (ngModelChange)=\"onPageSizeChange()\">\n @for(opt of pageSizeOptions; track opt) {\n <option [value]=\"opt\">{{ opt }} per page</option>\n }\n </select>\n </div>\n </div>\n }\n\n <!-- Table -->\n <div class=\"sn-adv-table-scroll\">\n <table class=\"sn-adv-table\" [class.sn-adv-table-striped]=\"striped\" [class.sn-adv-table-hoverable]=\"hoverable\">\n <thead>\n <tr>\n <!-- Selection Checkbox Header -->\n @if(selectable) {\n <th class=\"sn-adv-th sn-adv-th-checkbox\">\n <input type=\"checkbox\" [checked]=\"allSelected\" (change)=\"toggleSelectAll()\"\n class=\"sn-adv-checkbox\" />\n </th>\n }\n\n <!-- Expand Toggle Header -->\n @if(expandable) {\n <th class=\"sn-adv-th sn-adv-th-expand\"></th>\n }\n\n <!-- Column Headers -->\n @for(col of columns; track col.key) {\n <th class=\"sn-adv-th\" [style.width]=\"col.width || 'auto'\" [style.text-align]=\"col.align || 'left'\"\n [class.sn-adv-th-sortable]=\"col.sortable !== false\" (click)=\"sort(col.key)\">\n <div class=\"sn-adv-th-content\">\n <span>{{ col.header }}</span>\n @if(col.sortable !== false) {\n <span class=\"sn-adv-sort-icon\">{{ getSortIcon(col.key) }}</span>\n }\n </div>\n </th>\n }\n </tr>\n\n <!-- Per-column filter row -->\n @if(filterable) {\n <tr class=\"sn-adv-filter-row\">\n @if(selectable) { <th></th> }\n @if(expandable) { <th></th> }\n @for(col of columns; track col.key) {\n <th class=\"sn-adv-th-filter\">\n @if(col.filterable !== false) {\n <input type=\"text\" class=\"sn-adv-filter-input\" [placeholder]=\"'Filter ' + col.header\"\n [(ngModel)]=\"columnFilters[col.key]\" (ngModelChange)=\"onFilterChange()\" />\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody>\n @for(row of paginatedData; track row; let i = $index) {\n @let globalIndex = (currentPage - 1) * pageSize + i;\n <tr class=\"sn-adv-tr\" [class.sn-adv-tr-selected]=\"isRowSelected(globalIndex)\">\n\n <!-- Selection Checkbox -->\n @if(selectable) {\n <td class=\"sn-adv-td sn-adv-td-checkbox\">\n <input type=\"checkbox\" [checked]=\"isRowSelected(globalIndex)\"\n (change)=\"toggleRowSelect(globalIndex)\" class=\"sn-adv-checkbox\" />\n </td>\n }\n\n <!-- Expand Toggle -->\n @if(expandable) {\n <td class=\"sn-adv-td sn-adv-td-expand\" (click)=\"toggleRowExpand(globalIndex)\">\n <span class=\"sn-adv-expand-icon\" [class.sn-adv-expand-icon-open]=\"isRowExpanded(globalIndex)\">\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"16\" height=\"16\">\n <path fill-rule=\"evenodd\"\n d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </span>\n </td>\n }\n\n <!-- Data Cells -->\n @for(col of columns; track col.key) {\n <td class=\"sn-adv-td\" [style.text-align]=\"col.align || 'left'\">\n {{ row[col.key] }}\n </td>\n }\n </tr>\n\n <!-- Expanded Row Content -->\n @if(expandable && isRowExpanded(globalIndex)) {\n <tr class=\"sn-adv-expanded-row\">\n <td [attr.colspan]=\"columns.length + (selectable ? 1 : 0) + (expandable ? 1 : 0)\">\n <div class=\"sn-adv-expanded-content\">\n @if(expandedRowTemplate) {\n <ng-container\n *ngTemplateOutlet=\"expandedRowTemplate; context: { $implicit: row, index: globalIndex }\"></ng-container>\n } @else {\n <pre class=\"sn-adv-expanded-default\">{{ row | json }}</pre>\n }\n </div>\n </td>\n </tr>\n }\n }\n\n <!-- Empty State -->\n @if(paginatedData.length === 0) {\n <tr>\n <td [attr.colspan]=\"columns.length + (selectable ? 1 : 0) + (expandable ? 1 : 0)\"\n class=\"sn-adv-empty\">\n No data found.\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <!-- Pagination Footer -->\n @if(totalPages > 1) {\n <div class=\"sn-adv-pagination\">\n <span class=\"sn-adv-page-info\">\n Page {{ currentPage }} of {{ totalPages }}\n </span>\n <div class=\"sn-adv-page-buttons\">\n <button class=\"sn-adv-page-btn\" [disabled]=\"currentPage === 1\" (click)=\"prevPage()\">\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"14\" height=\"14\">\n <path fill-rule=\"evenodd\"\n d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n @for(p of getVisiblePages(); track p) {\n <button class=\"sn-adv-page-btn\" [class.sn-adv-page-btn-active]=\"p === currentPage\" (click)=\"goToPage(p)\">{{\n p }}</button>\n }\n <button class=\"sn-adv-page-btn\" [disabled]=\"currentPage === totalPages\" (click)=\"nextPage()\">\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"14\" height=\"14\">\n <path fill-rule=\"evenodd\"\n d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n clip-rule=\"evenodd\" />\n </svg>\n </button>\n </div>\n </div>\n }\n</div>","/*\n * Public API Surface of sn-advanced-datatable\n */\n\nexport * from './lib/sn-advanced-datatable.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;MA+Ba,4BAA4B,CAAA;AAPzC,IAAA,WAAA,GAAA;;QASa,IAAA,CAAA,OAAO,GAAqB,EAAE;QAC9B,IAAA,CAAA,IAAI,GAAkB,EAAE;;QAGxB,IAAA,CAAA,UAAU,GAAY,IAAI;QAC1B,IAAA,CAAA,UAAU,GAAY,KAAK;QAC3B,IAAA,CAAA,UAAU,GAAY,KAAK;QAC3B,IAAA,CAAA,UAAU,GAAY,KAAK;QAC3B,IAAA,CAAA,mBAAmB,GAA4B,IAAI;;QAGnD,IAAA,CAAA,OAAO,GAAY,IAAI;QACvB,IAAA,CAAA,SAAS,GAAY,IAAI;QACzB,IAAA,CAAA,QAAQ,GAAY,KAAK;QACzB,IAAA,CAAA,QAAQ,GAAW,EAAE;QACrB,IAAA,CAAA,eAAe,GAAa,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;;AAG1C,QAAA,IAAA,CAAA,MAAM,GAAG,IAAI,YAAY,EAAgB;AACzC,QAAA,IAAA,CAAA,eAAe,GAAG,IAAI,YAAY,EAAiB;AACnD,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAe;;QAGvD,IAAA,CAAA,aAAa,GAAkB,EAAE;QACjC,IAAA,CAAA,aAAa,GAAkB,EAAE;QACjC,IAAA,CAAA,WAAW,GAAW,CAAC;QACvB,IAAA,CAAA,UAAU,GAAW,CAAC;QACtB,IAAA,CAAA,kBAAkB,GAAW,CAAC;QAE9B,IAAA,CAAA,UAAU,GAAkB,IAAI;QAChC,IAAA,CAAA,aAAa,GAAmB,KAAK;QAErC,IAAA,CAAA,WAAW,GAAW,EAAE;QACxB,IAAA,CAAA,aAAa,GAA8B,EAAE;AAE7C,QAAA,IAAA,CAAA,YAAY,GAAgB,IAAI,GAAG,EAAE;QACrC,IAAA,CAAA,WAAW,GAAY,KAAK;AAE5B,QAAA,IAAA,CAAA,YAAY,GAAgB,IAAI,GAAG,EAAE;AA6LxC,IAAA;IA3LG,QAAQ,GAAA;QACJ,IAAI,CAAC,YAAY,EAAE;IACvB;AAEA,IAAA,WAAW,CAAC,OAAsB,EAAA;AAC9B,QAAA,IAAI,OAAO,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,SAAS,CAAC,IAAI,OAAO,CAAC,UAAU,CAAC,EAAE;YAC9D,IAAI,CAAC,YAAY,EAAE;QACvB;IACJ;;IAGA,cAAc,GAAA;AACV,QAAA,IAAI,CAAC,WAAW,GAAG,CAAC;QACpB,IAAI,CAAC,YAAY,EAAE;IACvB;;IAGA,cAAc,GAAA;AACV,QAAA,IAAI,CAAC,WAAW,GAAG,CAAC;QACpB,IAAI,CAAC,YAAY,EAAE;IACvB;;AAGA,IAAA,IAAI,CAAC,MAAc,EAAA;AACf,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,MAAM,CAAC;AACpD,QAAA,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,QAAQ,KAAK,KAAK;YAAE;AAEpC,QAAA,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM,EAAE;AAC5B,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,KAAK,KAAK,GAAG,MAAM,GAAG,KAAK;QACtE;aAAO;AACH,YAAA,IAAI,CAAC,UAAU,GAAG,MAAM;AACxB,YAAA,IAAI,CAAC,aAAa,GAAG,KAAK;QAC9B;AAEA,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC;QAC3D,IAAI,CAAC,YAAY,EAAE;IACvB;AAEA,IAAA,WAAW,CAAC,MAAc,EAAA;AACtB,QAAA,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM;AAAE,YAAA,OAAO,GAAG;AAC1C,QAAA,OAAO,IAAI,CAAC,aAAa,KAAK,KAAK,GAAG,GAAG,GAAG,GAAG;IACnD;;IAGA,eAAe,GAAA;AACX,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AAClB,YAAA,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;AACzB,YAAA,IAAI,CAAC,WAAW,GAAG,KAAK;QAC5B;aAAO;YACH,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI;AAChC,gBAAA,MAAM,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC;AAC9D,gBAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC;AACtC,YAAA,CAAC,CAAC;AACF,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI;QAC3B;QACA,IAAI,CAAC,aAAa,EAAE;IACxB;AAEA,IAAA,eAAe,CAAC,WAAmB,EAAA;QAC/B,IAAI,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;AACpC,YAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,WAAW,CAAC;QACzC;aAAO;AACH,YAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC;QACtC;AACA,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI;YACjD,OAAO,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;AAC5E,QAAA,CAAC,CAAC;QACF,IAAI,CAAC,aAAa,EAAE;IACxB;AAEA,IAAA,aAAa,CAAC,WAAmB,EAAA;QAC7B,OAAO,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC;IAC7C;IAEQ,aAAa,GAAA;AACjB,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;AAC9F,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC;IACvC;;AAGA,IAAA,eAAe,CAAC,WAAmB,EAAA;QAC/B,IAAI,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;AACpC,YAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,WAAW,CAAC;QACzC;aAAO;AACH,YAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC;AAClC,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QAC1D;IACJ;AAEA,IAAA,aAAa,CAAC,WAAmB,EAAA;QAC7B,OAAO,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC;IAC7C;;AAGA,IAAA,QAAQ,CAAC,IAAY,EAAA;QACjB,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACtC,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI;YACvB,IAAI,CAAC,mBAAmB,EAAE;QAC9B;IACJ;AAEA,IAAA,QAAQ,GAAA,EAAW,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC;AACxD,IAAA,QAAQ,GAAA,EAAW,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC;IAExD,gBAAgB,GAAA;AACZ,QAAA,IAAI,CAAC,WAAW,GAAG,CAAC;QACpB,IAAI,CAAC,YAAY,EAAE;IACvB;IAEA,eAAe,GAAA;QACX,MAAM,KAAK,GAAa,EAAE;QAC1B,MAAM,UAAU,GAAG,CAAC;QACpB,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;AACtE,QAAA,IAAI,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,GAAG,UAAU,GAAG,CAAC,CAAC;QAE3D,IAAI,GAAG,GAAG,KAAK,GAAG,CAAC,GAAG,UAAU,EAAE;AAC9B,YAAA,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,GAAG,UAAU,GAAG,CAAC,CAAC;QAC7C;AAEA,QAAA,KAAK,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE,EAAE;AAC/B,YAAA,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;QACjB;AACA,QAAA,OAAO,KAAK;IAChB;;IAGQ,YAAY,GAAA;QAChB,IAAI,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;;AAG3B,QAAA,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,EAAE;YACzB,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE;AAC5C,YAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,IACtB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,IAAG;gBACpB,MAAM,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC;gBACxB,OAAO,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC;YACzF,CAAC,CAAC,CACL;QACL;;AAGA,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACjB,YAAA,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,OAAO,EAAE;gBAC5B,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,CAAC;AAC1C,gBAAA,IAAI,MAAM,IAAI,MAAM,CAAC,IAAI,EAAE,EAAE;AACzB,oBAAA,MAAM,WAAW,GAAG,MAAM,CAAC,WAAW,EAAE;AACxC,oBAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,IAAG;wBACzB,MAAM,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC;wBACxB,OAAO,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC;AAC/F,oBAAA,CAAC,CAAC;gBACN;YACJ;QACJ;;AAGA,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACjB,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa;YAC9B,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI;gBACjB,MAAM,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,UAAW,CAAC;gBAChC,MAAM,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,UAAW,CAAC;AAChC,gBAAA,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,SAAS;AAAE,oBAAA,OAAO,CAAC;AACjD,gBAAA,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,SAAS;oBAAE,OAAO,CAAC,CAAC;gBAElD,IAAI,GAAG,GAAG,CAAC;gBACX,IAAI,OAAO,IAAI,KAAK,QAAQ;AAAE,oBAAA,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;qBACvD,IAAI,OAAO,IAAI,KAAK,QAAQ;AAAE,oBAAA,GAAG,GAAG,IAAI,GAAG,IAAI;AAC/C,qBAAA,IAAI,IAAI,YAAY,IAAI,IAAI,IAAI,YAAY,IAAI;oBAAE,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE;AAE5F,gBAAA,OAAO,GAAG,KAAK,KAAK,GAAG,GAAG,GAAG,CAAC,GAAG;AACrC,YAAA,CAAC,CAAC;QACN;AAEA,QAAA,IAAI,CAAC,aAAa,GAAG,MAAM;AAC3B,QAAA,IAAI,CAAC,kBAAkB,GAAG,MAAM,CAAC,MAAM;QACvC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;QAEvE,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE;AACpC,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU;QACtC;QAEA,IAAI,CAAC,mBAAmB,EAAE;IAC9B;IAEQ,mBAAmB,GAAA;AACvB,QAAA,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ;AACpD,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC;IAC/E;8GApOS,4BAA4B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA5B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,4BAA4B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,MAAA,EAAA,UAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,mBAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,SAAA,EAAA,SAAA,EAAA,WAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC/BzC,umQA0KM,EAAA,MAAA,EAAA,CAAA,82pCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED/IQ,YAAY,qMAAE,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,uBAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,0BAAA,EAAA,QAAA,EAAA,6GAAA,EAAA,MAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAI1B,4BAA4B,EAAA,UAAA,EAAA,CAAA;kBAPxC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,uBAAuB,cACrB,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,WAAW,CAAC,EAAA,QAAA,EAAA,umQAAA,EAAA,MAAA,EAAA,CAAA,82pCAAA,CAAA,EAAA;;sBAMnC;;sBACA;;sBAGA;;sBACA;;sBACA;;sBACA;;sBACA;;sBAGA;;sBACA;;sBACA;;sBACA;;sBACA;;sBAGA;;sBACA;;sBACA;;;AErDL;;AAEG;;ACFH;;AAEG;;;;"}
|
package/package.json
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "sn-advanced-datatable",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"peerDependencies": {
|
|
5
|
+
"@angular/common": "^21.2.0",
|
|
6
|
+
"@angular/core": "^21.2.0"
|
|
7
|
+
},
|
|
8
|
+
"dependencies": {
|
|
9
|
+
"tslib": "^2.3.0"
|
|
10
|
+
},
|
|
11
|
+
"sideEffects": false,
|
|
12
|
+
"module": "fesm2022/sn-advanced-datatable.mjs",
|
|
13
|
+
"typings": "types/sn-advanced-datatable.d.ts",
|
|
14
|
+
"exports": {
|
|
15
|
+
"./package.json": {
|
|
16
|
+
"default": "./package.json"
|
|
17
|
+
},
|
|
18
|
+
".": {
|
|
19
|
+
"types": "./types/sn-advanced-datatable.d.ts",
|
|
20
|
+
"default": "./fesm2022/sn-advanced-datatable.mjs"
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { OnInit, OnChanges, TemplateRef, EventEmitter, SimpleChanges } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
interface AdvTableColumn {
|
|
5
|
+
header: string;
|
|
6
|
+
key: string;
|
|
7
|
+
sortable?: boolean;
|
|
8
|
+
filterable?: boolean;
|
|
9
|
+
width?: string;
|
|
10
|
+
align?: 'left' | 'center' | 'right';
|
|
11
|
+
}
|
|
12
|
+
interface AdvTableRow {
|
|
13
|
+
[key: string]: any;
|
|
14
|
+
}
|
|
15
|
+
interface AdvSortEvent {
|
|
16
|
+
column: string;
|
|
17
|
+
direction: 'asc' | 'desc';
|
|
18
|
+
}
|
|
19
|
+
declare class SnAdvancedDatatableComponent implements OnInit, OnChanges {
|
|
20
|
+
columns: AdvTableColumn[];
|
|
21
|
+
data: AdvTableRow[];
|
|
22
|
+
searchable: boolean;
|
|
23
|
+
filterable: boolean;
|
|
24
|
+
selectable: boolean;
|
|
25
|
+
expandable: boolean;
|
|
26
|
+
expandedRowTemplate: TemplateRef<any> | null;
|
|
27
|
+
striped: boolean;
|
|
28
|
+
hoverable: boolean;
|
|
29
|
+
bordered: boolean;
|
|
30
|
+
pageSize: number;
|
|
31
|
+
pageSizeOptions: number[];
|
|
32
|
+
sorted: EventEmitter<AdvSortEvent>;
|
|
33
|
+
selectionChange: EventEmitter<AdvTableRow[]>;
|
|
34
|
+
rowExpanded: EventEmitter<AdvTableRow>;
|
|
35
|
+
processedData: AdvTableRow[];
|
|
36
|
+
paginatedData: AdvTableRow[];
|
|
37
|
+
currentPage: number;
|
|
38
|
+
totalPages: number;
|
|
39
|
+
totalFilteredItems: number;
|
|
40
|
+
sortColumn: string | null;
|
|
41
|
+
sortDirection: 'asc' | 'desc';
|
|
42
|
+
searchQuery: string;
|
|
43
|
+
columnFilters: {
|
|
44
|
+
[key: string]: string;
|
|
45
|
+
};
|
|
46
|
+
selectedRows: Set<number>;
|
|
47
|
+
allSelected: boolean;
|
|
48
|
+
expandedRows: Set<number>;
|
|
49
|
+
ngOnInit(): void;
|
|
50
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
51
|
+
onSearchChange(): void;
|
|
52
|
+
onFilterChange(): void;
|
|
53
|
+
sort(column: string): void;
|
|
54
|
+
getSortIcon(column: string): string;
|
|
55
|
+
toggleSelectAll(): void;
|
|
56
|
+
toggleRowSelect(globalIndex: number): void;
|
|
57
|
+
isRowSelected(globalIndex: number): boolean;
|
|
58
|
+
private emitSelection;
|
|
59
|
+
toggleRowExpand(globalIndex: number): void;
|
|
60
|
+
isRowExpanded(globalIndex: number): boolean;
|
|
61
|
+
goToPage(page: number): void;
|
|
62
|
+
nextPage(): void;
|
|
63
|
+
prevPage(): void;
|
|
64
|
+
onPageSizeChange(): void;
|
|
65
|
+
getVisiblePages(): number[];
|
|
66
|
+
private processTable;
|
|
67
|
+
private updatePaginatedData;
|
|
68
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SnAdvancedDatatableComponent, never>;
|
|
69
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SnAdvancedDatatableComponent, "sn-advanced-datatable", never, { "columns": { "alias": "columns"; "required": false; }; "data": { "alias": "data"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "filterable": { "alias": "filterable"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "expandable": { "alias": "expandable"; "required": false; }; "expandedRowTemplate": { "alias": "expandedRowTemplate"; "required": false; }; "striped": { "alias": "striped"; "required": false; }; "hoverable": { "alias": "hoverable"; "required": false; }; "bordered": { "alias": "bordered"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; }, { "sorted": "sorted"; "selectionChange": "selectionChange"; "rowExpanded": "rowExpanded"; }, never, never, true, never>;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
export { SnAdvancedDatatableComponent };
|
|
73
|
+
export type { AdvSortEvent, AdvTableColumn, AdvTableRow };
|