cloud-ide-element 1.1.21 → 1.1.24
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/fesm2022/cloud-ide-element.mjs +598 -537
- package/fesm2022/cloud-ide-element.mjs.map +1 -1
- package/index.d.ts +26 -0
- package/package.json +1 -1
|
@@ -6145,39 +6145,39 @@ class ExportService {
|
|
|
6145
6145
|
}).join('');
|
|
6146
6146
|
return `<tr>${cells}</tr>`;
|
|
6147
6147
|
}).join('');
|
|
6148
|
-
const html = `<!DOCTYPE html>
|
|
6149
|
-
<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel">
|
|
6150
|
-
<head>
|
|
6151
|
-
<meta charset="UTF-8">
|
|
6152
|
-
<!--[if gte mso 9]><xml>
|
|
6153
|
-
<x:ExcelWorkbook>
|
|
6154
|
-
<x:ExcelWorksheets>
|
|
6155
|
-
<x:ExcelWorksheet>
|
|
6156
|
-
<x:Name>Export</x:Name>
|
|
6157
|
-
<x:WorksheetOptions>
|
|
6158
|
-
<x:DefaultRowHeight>400</x:DefaultRowHeight>
|
|
6159
|
-
</x:WorksheetOptions>
|
|
6160
|
-
</x:ExcelWorksheet>
|
|
6161
|
-
</x:ExcelWorksheets>
|
|
6162
|
-
</x:ExcelWorkbook>
|
|
6163
|
-
</xml><![endif]-->
|
|
6164
|
-
<title>Data Export</title>
|
|
6165
|
-
</head>
|
|
6166
|
-
<body>
|
|
6167
|
-
<table border="1" style="font-family: Arial, sans-serif; font-size: 12px; border-collapse: collapse; width: 100%;">
|
|
6168
|
-
<thead>
|
|
6169
|
-
<tr>
|
|
6170
|
-
${headerCells}
|
|
6171
|
-
</tr>
|
|
6172
|
-
</thead>
|
|
6173
|
-
<tbody>
|
|
6174
|
-
${dataRows}
|
|
6175
|
-
</tbody>
|
|
6176
|
-
</table>
|
|
6177
|
-
<div style="margin-top: 20px; font-size: 10px; color: #666;">
|
|
6178
|
-
Generated: ${currentDate} at ${currentTime} | Total Records: ${data.length}
|
|
6179
|
-
</div>
|
|
6180
|
-
</body>
|
|
6148
|
+
const html = `<!DOCTYPE html>
|
|
6149
|
+
<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel">
|
|
6150
|
+
<head>
|
|
6151
|
+
<meta charset="UTF-8">
|
|
6152
|
+
<!--[if gte mso 9]><xml>
|
|
6153
|
+
<x:ExcelWorkbook>
|
|
6154
|
+
<x:ExcelWorksheets>
|
|
6155
|
+
<x:ExcelWorksheet>
|
|
6156
|
+
<x:Name>Export</x:Name>
|
|
6157
|
+
<x:WorksheetOptions>
|
|
6158
|
+
<x:DefaultRowHeight>400</x:DefaultRowHeight>
|
|
6159
|
+
</x:WorksheetOptions>
|
|
6160
|
+
</x:ExcelWorksheet>
|
|
6161
|
+
</x:ExcelWorksheets>
|
|
6162
|
+
</x:ExcelWorkbook>
|
|
6163
|
+
</xml><![endif]-->
|
|
6164
|
+
<title>Data Export</title>
|
|
6165
|
+
</head>
|
|
6166
|
+
<body>
|
|
6167
|
+
<table border="1" style="font-family: Arial, sans-serif; font-size: 12px; border-collapse: collapse; width: 100%;">
|
|
6168
|
+
<thead>
|
|
6169
|
+
<tr>
|
|
6170
|
+
${headerCells}
|
|
6171
|
+
</tr>
|
|
6172
|
+
</thead>
|
|
6173
|
+
<tbody>
|
|
6174
|
+
${dataRows}
|
|
6175
|
+
</tbody>
|
|
6176
|
+
</table>
|
|
6177
|
+
<div style="margin-top: 20px; font-size: 10px; color: #666;">
|
|
6178
|
+
Generated: ${currentDate} at ${currentTime} | Total Records: ${data.length}
|
|
6179
|
+
</div>
|
|
6180
|
+
</body>
|
|
6181
6181
|
</html>`;
|
|
6182
6182
|
return html;
|
|
6183
6183
|
}
|
|
@@ -6193,96 +6193,96 @@ class ExportService {
|
|
|
6193
6193
|
const cells = columns.map(col => `<td style="${this.getPDFCellStyle()}">${row[col.key] || ''}</td>`).join('');
|
|
6194
6194
|
return `<tr>${cells}</tr>`;
|
|
6195
6195
|
}).join('');
|
|
6196
|
-
const html = `<!DOCTYPE html>
|
|
6197
|
-
<html>
|
|
6198
|
-
<head>
|
|
6199
|
-
<meta charset="UTF-8">
|
|
6200
|
-
<title>Export</title>
|
|
6201
|
-
<style>
|
|
6202
|
-
body {
|
|
6203
|
-
font-family: Arial, sans-serif;
|
|
6204
|
-
margin: 20px;
|
|
6205
|
-
font-size: 12px;
|
|
6206
|
-
}
|
|
6207
|
-
.header {
|
|
6208
|
-
text-align: center;
|
|
6209
|
-
margin-bottom: 20px;
|
|
6210
|
-
border-bottom: 2px solid #333;
|
|
6211
|
-
padding-bottom: 10px;
|
|
6212
|
-
}
|
|
6213
|
-
.header h1 {
|
|
6214
|
-
margin: 0;
|
|
6215
|
-
font-size: 18px;
|
|
6216
|
-
color: #333;
|
|
6217
|
-
}
|
|
6218
|
-
.info {
|
|
6219
|
-
margin-bottom: 15px;
|
|
6220
|
-
font-size: 11px;
|
|
6221
|
-
color: #666;
|
|
6222
|
-
}
|
|
6223
|
-
table {
|
|
6224
|
-
width: 100%;
|
|
6225
|
-
border-collapse: collapse;
|
|
6226
|
-
margin-top: 10px;
|
|
6227
|
-
}
|
|
6228
|
-
th {
|
|
6229
|
-
background-color: #f0f0f0;
|
|
6230
|
-
font-weight: bold;
|
|
6231
|
-
padding: 8px;
|
|
6232
|
-
text-align: left;
|
|
6233
|
-
border: 1px solid #ccc;
|
|
6234
|
-
}
|
|
6235
|
-
td {
|
|
6236
|
-
padding: 6px 8px;
|
|
6237
|
-
border: 1px solid #ccc;
|
|
6238
|
-
}
|
|
6239
|
-
tr:nth-child(even) {
|
|
6240
|
-
background-color: #f9f9f9;
|
|
6241
|
-
}
|
|
6242
|
-
.footer {
|
|
6243
|
-
margin-top: 20px;
|
|
6244
|
-
text-align: center;
|
|
6245
|
-
font-size: 10px;
|
|
6246
|
-
color: #666;
|
|
6247
|
-
border-top: 1px solid #ccc;
|
|
6248
|
-
padding-top: 10px;
|
|
6249
|
-
}
|
|
6250
|
-
@media print {
|
|
6251
|
-
body {
|
|
6252
|
-
margin: 0;
|
|
6253
|
-
}
|
|
6254
|
-
.no-print {
|
|
6255
|
-
display: none;
|
|
6256
|
-
}
|
|
6257
|
-
}
|
|
6258
|
-
</style>
|
|
6259
|
-
</head>
|
|
6260
|
-
<body>
|
|
6261
|
-
<div class="header">
|
|
6262
|
-
<h1>Data Export</h1>
|
|
6263
|
-
<div class="info">
|
|
6264
|
-
<strong>Generated:</strong> ${currentDate} at ${currentTime}
|
|
6265
|
-
</div>
|
|
6266
|
-
<div class="info">
|
|
6267
|
-
<strong>Total Records:</strong> ${data.length}
|
|
6268
|
-
</div>
|
|
6269
|
-
</div>
|
|
6270
|
-
|
|
6271
|
-
<table>
|
|
6272
|
-
<thead>
|
|
6273
|
-
<tr>
|
|
6274
|
-
${headerCells}
|
|
6275
|
-
</tr>
|
|
6276
|
-
</thead>
|
|
6277
|
-
<tbody>
|
|
6278
|
-
${dataRows}
|
|
6279
|
-
</tbody>
|
|
6280
|
-
</table>
|
|
6281
|
-
|
|
6282
|
-
<div class="footer">
|
|
6283
|
-
Page generated on ${currentDate} at ${currentTime}
|
|
6284
|
-
</div>
|
|
6285
|
-
</body>
|
|
6196
|
+
const html = `<!DOCTYPE html>
|
|
6197
|
+
<html>
|
|
6198
|
+
<head>
|
|
6199
|
+
<meta charset="UTF-8">
|
|
6200
|
+
<title>Export</title>
|
|
6201
|
+
<style>
|
|
6202
|
+
body {
|
|
6203
|
+
font-family: Arial, sans-serif;
|
|
6204
|
+
margin: 20px;
|
|
6205
|
+
font-size: 12px;
|
|
6206
|
+
}
|
|
6207
|
+
.header {
|
|
6208
|
+
text-align: center;
|
|
6209
|
+
margin-bottom: 20px;
|
|
6210
|
+
border-bottom: 2px solid #333;
|
|
6211
|
+
padding-bottom: 10px;
|
|
6212
|
+
}
|
|
6213
|
+
.header h1 {
|
|
6214
|
+
margin: 0;
|
|
6215
|
+
font-size: 18px;
|
|
6216
|
+
color: #333;
|
|
6217
|
+
}
|
|
6218
|
+
.info {
|
|
6219
|
+
margin-bottom: 15px;
|
|
6220
|
+
font-size: 11px;
|
|
6221
|
+
color: #666;
|
|
6222
|
+
}
|
|
6223
|
+
table {
|
|
6224
|
+
width: 100%;
|
|
6225
|
+
border-collapse: collapse;
|
|
6226
|
+
margin-top: 10px;
|
|
6227
|
+
}
|
|
6228
|
+
th {
|
|
6229
|
+
background-color: #f0f0f0;
|
|
6230
|
+
font-weight: bold;
|
|
6231
|
+
padding: 8px;
|
|
6232
|
+
text-align: left;
|
|
6233
|
+
border: 1px solid #ccc;
|
|
6234
|
+
}
|
|
6235
|
+
td {
|
|
6236
|
+
padding: 6px 8px;
|
|
6237
|
+
border: 1px solid #ccc;
|
|
6238
|
+
}
|
|
6239
|
+
tr:nth-child(even) {
|
|
6240
|
+
background-color: #f9f9f9;
|
|
6241
|
+
}
|
|
6242
|
+
.footer {
|
|
6243
|
+
margin-top: 20px;
|
|
6244
|
+
text-align: center;
|
|
6245
|
+
font-size: 10px;
|
|
6246
|
+
color: #666;
|
|
6247
|
+
border-top: 1px solid #ccc;
|
|
6248
|
+
padding-top: 10px;
|
|
6249
|
+
}
|
|
6250
|
+
@media print {
|
|
6251
|
+
body {
|
|
6252
|
+
margin: 0;
|
|
6253
|
+
}
|
|
6254
|
+
.no-print {
|
|
6255
|
+
display: none;
|
|
6256
|
+
}
|
|
6257
|
+
}
|
|
6258
|
+
</style>
|
|
6259
|
+
</head>
|
|
6260
|
+
<body>
|
|
6261
|
+
<div class="header">
|
|
6262
|
+
<h1>Data Export</h1>
|
|
6263
|
+
<div class="info">
|
|
6264
|
+
<strong>Generated:</strong> ${currentDate} at ${currentTime}
|
|
6265
|
+
</div>
|
|
6266
|
+
<div class="info">
|
|
6267
|
+
<strong>Total Records:</strong> ${data.length}
|
|
6268
|
+
</div>
|
|
6269
|
+
</div>
|
|
6270
|
+
|
|
6271
|
+
<table>
|
|
6272
|
+
<thead>
|
|
6273
|
+
<tr>
|
|
6274
|
+
${headerCells}
|
|
6275
|
+
</tr>
|
|
6276
|
+
</thead>
|
|
6277
|
+
<tbody>
|
|
6278
|
+
${dataRows}
|
|
6279
|
+
</tbody>
|
|
6280
|
+
</table>
|
|
6281
|
+
|
|
6282
|
+
<div class="footer">
|
|
6283
|
+
Page generated on ${currentDate} at ${currentTime}
|
|
6284
|
+
</div>
|
|
6285
|
+
</body>
|
|
6286
6286
|
</html>`;
|
|
6287
6287
|
return html;
|
|
6288
6288
|
}
|
|
@@ -8143,124 +8143,124 @@ class CideEleConfirmationModalComponent {
|
|
|
8143
8143
|
this.customData.set(data);
|
|
8144
8144
|
}
|
|
8145
8145
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleConfirmationModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8146
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideEleConfirmationModalComponent, isStandalone: true, selector: "cide-ele-confirmation-modal", ngImport: i0, template: `
|
|
8147
|
-
<!-- Backdrop -->
|
|
8148
|
-
<div
|
|
8149
|
-
*ngIf="hasActiveConfirmation()"
|
|
8150
|
-
class="confirmation-backdrop"
|
|
8151
|
-
(click)="onBackdropClick($event)">
|
|
8152
|
-
</div>
|
|
8153
|
-
|
|
8154
|
-
<!-- Modal -->
|
|
8155
|
-
<div
|
|
8156
|
-
*ngIf="hasActiveConfirmation()"
|
|
8157
|
-
class="confirmation-modal"
|
|
8158
|
-
style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10001;">
|
|
8159
|
-
|
|
8160
|
-
<!-- Modal Header -->
|
|
8161
|
-
<div class="modal-header" [class]="getHeaderClass()">
|
|
8162
|
-
<div class="header-content">
|
|
8163
|
-
<div class="icon-container" [class]="getIconClass()">
|
|
8164
|
-
<cide-ele-icon
|
|
8165
|
-
size="lg">
|
|
8166
|
-
{{ currentRequest()?.icon || 'info' }}
|
|
8167
|
-
</cide-ele-icon>
|
|
8168
|
-
</div>
|
|
8169
|
-
<h2 class="modal-title">{{ currentRequest()?.title }}</h2>
|
|
8170
|
-
</div>
|
|
8171
|
-
</div>
|
|
8172
|
-
|
|
8173
|
-
<!-- Modal Body -->
|
|
8174
|
-
<div class="modal-body">
|
|
8175
|
-
<p class="modal-message">{{ currentRequest()?.message }}</p>
|
|
8176
|
-
|
|
8177
|
-
<!-- Custom Template Slot -->
|
|
8178
|
-
<div *ngIf="currentRequest()?.customTemplate" class="custom-content">
|
|
8179
|
-
<ng-container
|
|
8180
|
-
*ngTemplateOutlet="currentRequest()?.customTemplate!; context: { $implicit: customData }">
|
|
8181
|
-
</ng-container>
|
|
8182
|
-
</div>
|
|
8183
|
-
</div>
|
|
8184
|
-
|
|
8185
|
-
<!-- Modal Footer -->
|
|
8186
|
-
<div class="modal-footer">
|
|
8187
|
-
<button
|
|
8188
|
-
type="button"
|
|
8189
|
-
class="btn btn-secondary"
|
|
8190
|
-
(click)="onCancel()">
|
|
8191
|
-
{{ currentRequest()?.cancelText || 'Cancel' }}
|
|
8192
|
-
</button>
|
|
8193
|
-
|
|
8194
|
-
<button
|
|
8195
|
-
type="button"
|
|
8196
|
-
class="btn"
|
|
8197
|
-
[class]="getConfirmButtonClass()"
|
|
8198
|
-
(click)="onConfirm()">
|
|
8199
|
-
{{ currentRequest()?.confirmText || 'Confirm' }}
|
|
8200
|
-
</button>
|
|
8201
|
-
</div>
|
|
8202
|
-
</div>
|
|
8146
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideEleConfirmationModalComponent, isStandalone: true, selector: "cide-ele-confirmation-modal", ngImport: i0, template: `
|
|
8147
|
+
<!-- Backdrop -->
|
|
8148
|
+
<div
|
|
8149
|
+
*ngIf="hasActiveConfirmation()"
|
|
8150
|
+
class="confirmation-backdrop"
|
|
8151
|
+
(click)="onBackdropClick($event)">
|
|
8152
|
+
</div>
|
|
8153
|
+
|
|
8154
|
+
<!-- Modal -->
|
|
8155
|
+
<div
|
|
8156
|
+
*ngIf="hasActiveConfirmation()"
|
|
8157
|
+
class="confirmation-modal"
|
|
8158
|
+
style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10001;">
|
|
8159
|
+
|
|
8160
|
+
<!-- Modal Header -->
|
|
8161
|
+
<div class="modal-header" [class]="getHeaderClass()">
|
|
8162
|
+
<div class="header-content">
|
|
8163
|
+
<div class="icon-container" [class]="getIconClass()">
|
|
8164
|
+
<cide-ele-icon
|
|
8165
|
+
size="lg">
|
|
8166
|
+
{{ currentRequest()?.icon || 'info' }}
|
|
8167
|
+
</cide-ele-icon>
|
|
8168
|
+
</div>
|
|
8169
|
+
<h2 class="modal-title">{{ currentRequest()?.title }}</h2>
|
|
8170
|
+
</div>
|
|
8171
|
+
</div>
|
|
8172
|
+
|
|
8173
|
+
<!-- Modal Body -->
|
|
8174
|
+
<div class="modal-body">
|
|
8175
|
+
<p class="modal-message">{{ currentRequest()?.message }}</p>
|
|
8176
|
+
|
|
8177
|
+
<!-- Custom Template Slot -->
|
|
8178
|
+
<div *ngIf="currentRequest()?.customTemplate" class="custom-content">
|
|
8179
|
+
<ng-container
|
|
8180
|
+
*ngTemplateOutlet="currentRequest()?.customTemplate!; context: { $implicit: customData }">
|
|
8181
|
+
</ng-container>
|
|
8182
|
+
</div>
|
|
8183
|
+
</div>
|
|
8184
|
+
|
|
8185
|
+
<!-- Modal Footer -->
|
|
8186
|
+
<div class="modal-footer">
|
|
8187
|
+
<button
|
|
8188
|
+
type="button"
|
|
8189
|
+
class="btn btn-secondary"
|
|
8190
|
+
(click)="onCancel()">
|
|
8191
|
+
{{ currentRequest()?.cancelText || 'Cancel' }}
|
|
8192
|
+
</button>
|
|
8193
|
+
|
|
8194
|
+
<button
|
|
8195
|
+
type="button"
|
|
8196
|
+
class="btn"
|
|
8197
|
+
[class]="getConfirmButtonClass()"
|
|
8198
|
+
(click)="onConfirm()">
|
|
8199
|
+
{{ currentRequest()?.confirmText || 'Confirm' }}
|
|
8200
|
+
</button>
|
|
8201
|
+
</div>
|
|
8202
|
+
</div>
|
|
8203
8203
|
`, isInline: true, styles: [".confirmation-backdrop{position:fixed;inset:0;background-color:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10000;display:flex;align-items:center;justify-content:center}.confirmation-modal{background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-width:480px;width:90%;max-height:90vh;overflow:hidden;z-index:10001;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.modal-header{padding:24px 24px 16px;border-bottom:1px solid #e5e7eb}.header-content{display:flex;align-items:center;gap:16px}.icon-container{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon-container.danger{background-color:#fef2f2;color:#dc2626}.icon-container.warning{background-color:#fffbeb;color:#d97706}.icon-container.info{background-color:#eff6ff;color:#2563eb}.icon-container.success{background-color:#f0fdf4;color:#16a34a}.modal-title{margin:0;font-size:20px;font-weight:600;color:#111827;line-height:1.4}.modal-body{padding:16px 24px 24px}.modal-message{margin:0 0 16px;font-size:16px;line-height:1.5;color:#6b7280}.custom-content{margin-top:16px;padding-top:16px;border-top:1px solid #f3f4f6}.modal-footer{padding:16px 24px 24px;display:flex;gap:12px;justify-content:flex-end;border-top:1px solid #e5e7eb}.btn{padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;border:none;cursor:pointer;transition:all .2s ease;min-width:80px}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-secondary{background-color:#f9fafb;color:#374151;border:1px solid #d1d5db}.btn-secondary:hover{background-color:#f3f4f6;border-color:#9ca3af}.btn-primary{background-color:#2563eb;color:#fff}.btn-primary:hover{background-color:#1d4ed8}.btn-danger{background-color:#dc2626;color:#fff}.btn-danger:hover{background-color:#b91c1c}.btn-warning{background-color:#d97706;color:#fff}.btn-warning:hover{background-color:#b45309}.btn-success{background-color:#16a34a;color:#fff}.btn-success:hover{background-color:#15803d}@media (max-width: 640px){.confirmation-modal{width:95%;margin:20px}.modal-header{padding:20px 20px 12px}.modal-body{padding:12px 20px 20px}.modal-footer{padding:12px 20px 20px;flex-direction:column-reverse}.btn{width:100%;justify-content:center}.header-content{flex-direction:column;text-align:center;gap:12px}.modal-title{font-size:18px}}.btn:focus{outline:2px solid #2563eb;outline-offset:2px}.modal-enter{opacity:0;transform:scale(.95) translateY(-10px)}.modal-enter-active{opacity:1;transform:scale(1) translateY(0);transition:all .2s ease-out}.modal-exit{opacity:1;transform:scale(1) translateY(0)}.modal-exit-active{opacity:0;transform:scale(.95) translateY(-10px);transition:all .15s ease-in}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
|
|
8204
8204
|
}
|
|
8205
8205
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleConfirmationModalComponent, decorators: [{
|
|
8206
8206
|
type: Component,
|
|
8207
|
-
args: [{ selector: 'cide-ele-confirmation-modal', standalone: true, imports: [CommonModule, CideIconComponent], template: `
|
|
8208
|
-
<!-- Backdrop -->
|
|
8209
|
-
<div
|
|
8210
|
-
*ngIf="hasActiveConfirmation()"
|
|
8211
|
-
class="confirmation-backdrop"
|
|
8212
|
-
(click)="onBackdropClick($event)">
|
|
8213
|
-
</div>
|
|
8214
|
-
|
|
8215
|
-
<!-- Modal -->
|
|
8216
|
-
<div
|
|
8217
|
-
*ngIf="hasActiveConfirmation()"
|
|
8218
|
-
class="confirmation-modal"
|
|
8219
|
-
style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10001;">
|
|
8220
|
-
|
|
8221
|
-
<!-- Modal Header -->
|
|
8222
|
-
<div class="modal-header" [class]="getHeaderClass()">
|
|
8223
|
-
<div class="header-content">
|
|
8224
|
-
<div class="icon-container" [class]="getIconClass()">
|
|
8225
|
-
<cide-ele-icon
|
|
8226
|
-
size="lg">
|
|
8227
|
-
{{ currentRequest()?.icon || 'info' }}
|
|
8228
|
-
</cide-ele-icon>
|
|
8229
|
-
</div>
|
|
8230
|
-
<h2 class="modal-title">{{ currentRequest()?.title }}</h2>
|
|
8231
|
-
</div>
|
|
8232
|
-
</div>
|
|
8233
|
-
|
|
8234
|
-
<!-- Modal Body -->
|
|
8235
|
-
<div class="modal-body">
|
|
8236
|
-
<p class="modal-message">{{ currentRequest()?.message }}</p>
|
|
8237
|
-
|
|
8238
|
-
<!-- Custom Template Slot -->
|
|
8239
|
-
<div *ngIf="currentRequest()?.customTemplate" class="custom-content">
|
|
8240
|
-
<ng-container
|
|
8241
|
-
*ngTemplateOutlet="currentRequest()?.customTemplate!; context: { $implicit: customData }">
|
|
8242
|
-
</ng-container>
|
|
8243
|
-
</div>
|
|
8244
|
-
</div>
|
|
8245
|
-
|
|
8246
|
-
<!-- Modal Footer -->
|
|
8247
|
-
<div class="modal-footer">
|
|
8248
|
-
<button
|
|
8249
|
-
type="button"
|
|
8250
|
-
class="btn btn-secondary"
|
|
8251
|
-
(click)="onCancel()">
|
|
8252
|
-
{{ currentRequest()?.cancelText || 'Cancel' }}
|
|
8253
|
-
</button>
|
|
8254
|
-
|
|
8255
|
-
<button
|
|
8256
|
-
type="button"
|
|
8257
|
-
class="btn"
|
|
8258
|
-
[class]="getConfirmButtonClass()"
|
|
8259
|
-
(click)="onConfirm()">
|
|
8260
|
-
{{ currentRequest()?.confirmText || 'Confirm' }}
|
|
8261
|
-
</button>
|
|
8262
|
-
</div>
|
|
8263
|
-
</div>
|
|
8207
|
+
args: [{ selector: 'cide-ele-confirmation-modal', standalone: true, imports: [CommonModule, CideIconComponent], template: `
|
|
8208
|
+
<!-- Backdrop -->
|
|
8209
|
+
<div
|
|
8210
|
+
*ngIf="hasActiveConfirmation()"
|
|
8211
|
+
class="confirmation-backdrop"
|
|
8212
|
+
(click)="onBackdropClick($event)">
|
|
8213
|
+
</div>
|
|
8214
|
+
|
|
8215
|
+
<!-- Modal -->
|
|
8216
|
+
<div
|
|
8217
|
+
*ngIf="hasActiveConfirmation()"
|
|
8218
|
+
class="confirmation-modal"
|
|
8219
|
+
style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10001;">
|
|
8220
|
+
|
|
8221
|
+
<!-- Modal Header -->
|
|
8222
|
+
<div class="modal-header" [class]="getHeaderClass()">
|
|
8223
|
+
<div class="header-content">
|
|
8224
|
+
<div class="icon-container" [class]="getIconClass()">
|
|
8225
|
+
<cide-ele-icon
|
|
8226
|
+
size="lg">
|
|
8227
|
+
{{ currentRequest()?.icon || 'info' }}
|
|
8228
|
+
</cide-ele-icon>
|
|
8229
|
+
</div>
|
|
8230
|
+
<h2 class="modal-title">{{ currentRequest()?.title }}</h2>
|
|
8231
|
+
</div>
|
|
8232
|
+
</div>
|
|
8233
|
+
|
|
8234
|
+
<!-- Modal Body -->
|
|
8235
|
+
<div class="modal-body">
|
|
8236
|
+
<p class="modal-message">{{ currentRequest()?.message }}</p>
|
|
8237
|
+
|
|
8238
|
+
<!-- Custom Template Slot -->
|
|
8239
|
+
<div *ngIf="currentRequest()?.customTemplate" class="custom-content">
|
|
8240
|
+
<ng-container
|
|
8241
|
+
*ngTemplateOutlet="currentRequest()?.customTemplate!; context: { $implicit: customData }">
|
|
8242
|
+
</ng-container>
|
|
8243
|
+
</div>
|
|
8244
|
+
</div>
|
|
8245
|
+
|
|
8246
|
+
<!-- Modal Footer -->
|
|
8247
|
+
<div class="modal-footer">
|
|
8248
|
+
<button
|
|
8249
|
+
type="button"
|
|
8250
|
+
class="btn btn-secondary"
|
|
8251
|
+
(click)="onCancel()">
|
|
8252
|
+
{{ currentRequest()?.cancelText || 'Cancel' }}
|
|
8253
|
+
</button>
|
|
8254
|
+
|
|
8255
|
+
<button
|
|
8256
|
+
type="button"
|
|
8257
|
+
class="btn"
|
|
8258
|
+
[class]="getConfirmButtonClass()"
|
|
8259
|
+
(click)="onConfirm()">
|
|
8260
|
+
{{ currentRequest()?.confirmText || 'Confirm' }}
|
|
8261
|
+
</button>
|
|
8262
|
+
</div>
|
|
8263
|
+
</div>
|
|
8264
8264
|
`, styles: [".confirmation-backdrop{position:fixed;inset:0;background-color:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10000;display:flex;align-items:center;justify-content:center}.confirmation-modal{background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-width:480px;width:90%;max-height:90vh;overflow:hidden;z-index:10001;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.modal-header{padding:24px 24px 16px;border-bottom:1px solid #e5e7eb}.header-content{display:flex;align-items:center;gap:16px}.icon-container{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon-container.danger{background-color:#fef2f2;color:#dc2626}.icon-container.warning{background-color:#fffbeb;color:#d97706}.icon-container.info{background-color:#eff6ff;color:#2563eb}.icon-container.success{background-color:#f0fdf4;color:#16a34a}.modal-title{margin:0;font-size:20px;font-weight:600;color:#111827;line-height:1.4}.modal-body{padding:16px 24px 24px}.modal-message{margin:0 0 16px;font-size:16px;line-height:1.5;color:#6b7280}.custom-content{margin-top:16px;padding-top:16px;border-top:1px solid #f3f4f6}.modal-footer{padding:16px 24px 24px;display:flex;gap:12px;justify-content:flex-end;border-top:1px solid #e5e7eb}.btn{padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;border:none;cursor:pointer;transition:all .2s ease;min-width:80px}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-secondary{background-color:#f9fafb;color:#374151;border:1px solid #d1d5db}.btn-secondary:hover{background-color:#f3f4f6;border-color:#9ca3af}.btn-primary{background-color:#2563eb;color:#fff}.btn-primary:hover{background-color:#1d4ed8}.btn-danger{background-color:#dc2626;color:#fff}.btn-danger:hover{background-color:#b91c1c}.btn-warning{background-color:#d97706;color:#fff}.btn-warning:hover{background-color:#b45309}.btn-success{background-color:#16a34a;color:#fff}.btn-success:hover{background-color:#15803d}@media (max-width: 640px){.confirmation-modal{width:95%;margin:20px}.modal-header{padding:20px 20px 12px}.modal-body{padding:12px 20px 20px}.modal-footer{padding:12px 20px 20px;flex-direction:column-reverse}.btn{width:100%;justify-content:center}.header-content{flex-direction:column;text-align:center;gap:12px}.modal-title{font-size:18px}}.btn:focus{outline:2px solid #2563eb;outline-offset:2px}.modal-enter{opacity:0;transform:scale(.95) translateY(-10px)}.modal-enter-active{opacity:1;transform:scale(1) translateY(0);transition:all .2s ease-out}.modal-exit{opacity:1;transform:scale(1) translateY(0)}.modal-exit-active{opacity:0;transform:scale(.95) translateY(-10px);transition:all .15s ease-in}\n"] }]
|
|
8265
8265
|
}] });
|
|
8266
8266
|
|
|
@@ -8565,6 +8565,7 @@ class CideEleDataGridComponent {
|
|
|
8565
8565
|
filterSearchTerm = signal('', ...(ngDevMode ? [{ debugName: "filterSearchTerm" }] : [])); // Search term for filter values
|
|
8566
8566
|
// Export menu state
|
|
8567
8567
|
showExportMenu = signal(false, ...(ngDevMode ? [{ debugName: "showExportMenu" }] : [])); // Show/hide export format dropdown
|
|
8568
|
+
showFilterDropdown = signal(false, ...(ngDevMode ? [{ debugName: "showFilterDropdown" }] : [])); // Show/hide filter dropdown
|
|
8568
8569
|
// Export service
|
|
8569
8570
|
exportService = inject(ExportService);
|
|
8570
8571
|
// Computed properties
|
|
@@ -10357,6 +10358,52 @@ class CideEleDataGridComponent {
|
|
|
10357
10358
|
closeExportMenu() {
|
|
10358
10359
|
this.showExportMenu.set(false);
|
|
10359
10360
|
}
|
|
10361
|
+
/**
|
|
10362
|
+
* Toggle filter dropdown visibility
|
|
10363
|
+
*/
|
|
10364
|
+
toggleFilterDropdown(event) {
|
|
10365
|
+
if (event) {
|
|
10366
|
+
event.stopPropagation();
|
|
10367
|
+
}
|
|
10368
|
+
this.showFilterDropdown.set(!this.showFilterDropdown());
|
|
10369
|
+
}
|
|
10370
|
+
/**
|
|
10371
|
+
* Clear all filters
|
|
10372
|
+
*/
|
|
10373
|
+
clearAllFilters() {
|
|
10374
|
+
this.columnFilters.set([]);
|
|
10375
|
+
this.applyFiltersToData();
|
|
10376
|
+
this.emitEvent('columnFilter', [], undefined);
|
|
10377
|
+
}
|
|
10378
|
+
/**
|
|
10379
|
+
* Get column header by key
|
|
10380
|
+
*/
|
|
10381
|
+
getColumnHeader(columnKey) {
|
|
10382
|
+
const column = this.mergedConfig().columns.find(c => c.key === columnKey);
|
|
10383
|
+
return column?.header || columnKey;
|
|
10384
|
+
}
|
|
10385
|
+
/**
|
|
10386
|
+
* Remove a specific filter
|
|
10387
|
+
*/
|
|
10388
|
+
removeFilter(columnKey) {
|
|
10389
|
+
const filters = this.columnFilters();
|
|
10390
|
+
const filteredFilters = filters.filter(f => f.columnKey !== columnKey);
|
|
10391
|
+
this.columnFilters.set(filteredFilters);
|
|
10392
|
+
this.applyFiltersToData();
|
|
10393
|
+
this.emitEvent('columnFilter', filteredFilters, undefined);
|
|
10394
|
+
}
|
|
10395
|
+
/**
|
|
10396
|
+
* Check if value is an array (helper for template)
|
|
10397
|
+
*/
|
|
10398
|
+
isArray(value) {
|
|
10399
|
+
return Array.isArray(value);
|
|
10400
|
+
}
|
|
10401
|
+
/**
|
|
10402
|
+
* Get array length (helper for template)
|
|
10403
|
+
*/
|
|
10404
|
+
getArrayLength(value) {
|
|
10405
|
+
return Array.isArray(value) ? value.length : 0;
|
|
10406
|
+
}
|
|
10360
10407
|
/**
|
|
10361
10408
|
* Handle export format selection
|
|
10362
10409
|
*/
|
|
@@ -10392,7 +10439,7 @@ class CideEleDataGridComponent {
|
|
|
10392
10439
|
this.closeExportMenu();
|
|
10393
10440
|
}
|
|
10394
10441
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleDataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10395
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleDataGridComponent, isStandalone: true, selector: "cide-ele-data-grid", inputs: { config: "config", templateRenderers: "templateRenderers", customFormatters: "customFormatters", actionHandlers: "actionHandlers", serverSidePagination: "serverSidePagination", totalServerItems: "totalServerItems", currentServerPage: "currentServerPage", currentServerPageSize: "currentServerPageSize", dragDropEnabled: "dragDropEnabled" }, outputs: { gridEvent: "gridEvent" }, usesOnChanges: true, ngImport: i0, template: " <!-- Data Grid Component -->\r\n <div class=\"data-grid-container tw-bg-white tw-shadow tw-rounded-lg tw-overflow-visible tw-flex tw-flex-col\" \r\n [ngClass]=\"[\r\n mergedConfig().tableClass || '',\r\n mergedConfig().fullHeight ? 'tw-h-full' : '',\r\n isDragDropEnabled() ? 'drag-drop-enabled' : '',\r\n isTreeEnabled() ? 'tree-enabled' : ''\r\n ]\">\r\n \r\n <!-- Header Section -->\r\n @if (mergedConfig().title || mergedConfig().subtitle) {\r\n <div class=\"tw-px-3 tw-py-2 tw-border-b tw-border-gray-200\">\r\n @if (mergedConfig().title) {\r\n <h3 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">\r\n {{ mergedConfig().title }}\r\n </h3>\r\n }\r\n @if (mergedConfig().subtitle) {\r\n <p class=\"tw-text-sm tw-text-gray-600 tw-mt-0.5\">\r\n {{ mergedConfig().subtitle }}\r\n </p>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Search Section -->\r\n @if (searchConfig.enabled) {\r\n <div class=\"tw-px-3 tw-py-1.5 tw-border-b tw-border-gray-200\">\r\n <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n <!-- Left Side: Search Input and Action Icons -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-1.5\">\r\n <!-- Search Input - Apple Style -->\r\n <div class=\"tw-max-w-md data-grid-search-input\">\r\n <cide-ele-input [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\" id=\"search-input\" type=\"text\"\r\n [ngModel]=\"searchQuery()\"\r\n (ngModelChange)=\"updateSearchQuery($event)\"\r\n [placeholder]=\"searchConfig.placeholder\"\r\n [disabled]=\"loading() || isRefreshing()\"\r\n leadingIcon=\"search\"\r\n fill=\"outline\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n \r\n <!-- Action Icons (Filter, Sort, Download) - Apple Style Compact -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-1 data-grid-action-buttons\">\r\n <!-- Filter Button -->\r\n <button type=\"button\"\r\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200\"\r\n title=\"Filter\"\r\n (click)=\"onActionClick(null, { key: 'filter', label: 'Filter', icon: 'filter_list', variant: 'ghost', onClick: 'filter' })\">\r\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">filter_list</cide-ele-icon>\r\n </button>\r\n \r\n <!-- Download/Export Button with Dropdown -->\r\n <div class=\"tw-relative\">\r\n <button type=\"button\"\r\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200\"\r\n title=\"Export\"\r\n (click)=\"toggleExportMenu($event)\">\r\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">file_download</cide-ele-icon>\r\n </button>\r\n \r\n <!-- Export Dropdown Menu - Improved Design -->\r\n @if (showExportMenu()) {\r\n <div class=\"tw-absolute tw-right-0 tw-mt-2 tw-w-56 tw-bg-white tw-rounded-lg tw-shadow-xl tw-border tw-border-gray-200 tw-z-50 tw-overflow-hidden\"\r\n (click)=\"$event.stopPropagation()\">\r\n <div class=\"tw-py-1.5\">\r\n <div class=\"tw-px-3 tw-py-2 tw-bg-gray-50 tw-border-b tw-border-gray-200\">\r\n <span class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-tracking-wider\">Export Options</span>\r\n </div>\r\n <button type=\"button\"\r\n class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-green-50 hover:tw-text-green-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\r\n (click)=\"exportData('csv')\">\r\n <div class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-green-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-green-600\">description</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-font-medium\">CSV</div>\r\n <div class=\"tw-text-xs tw-text-gray-500\">Comma separated values</div>\r\n </div>\r\n </button>\r\n <button type=\"button\"\r\n class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-blue-50 hover:tw-text-blue-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\r\n (click)=\"exportData('excel')\">\r\n <div class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">table_chart</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-font-medium\">Excel</div>\r\n <div class=\"tw-text-xs tw-text-gray-500\">Microsoft Excel format</div>\r\n </div>\r\n </button>\r\n <button type=\"button\"\r\n class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-red-50 hover:tw-text-red-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\r\n (click)=\"exportData('pdf')\">\r\n <div class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-red-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-red-600\">picture_as_pdf</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-font-medium\">PDF</div>\r\n <div class=\"tw-text-xs tw-text-gray-500\">Portable document format</div>\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Right Side: Drag Order Actions -->\r\n @if (isDragDropEnabled() && (isDragging() || hasOrderChanged())) {\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <button cideEleButton \r\n variant=\"outline\" \r\n size=\"sm\" \r\n type=\"button\"\r\n (click)=\"onActionClick(null, { key: 'reset-order', label: 'Reset Order', icon: 'undo', variant: 'outline', onClick: 'resetOrder' })\"\r\n class=\"tw-text-blue-700 tw-border-blue-300 hover:tw-bg-blue-100\">\r\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">undo</cide-ele-icon>\r\n Reset Order\r\n </button>\r\n <button cideEleButton \r\n variant=\"primary\" \r\n size=\"sm\" \r\n type=\"button\"\r\n (click)=\"onActionClick(null, { key: 'save-order', label: 'Save Order', icon: 'save', variant: 'primary', onClick: 'saveOrder' })\"\r\n class=\"tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white\">\r\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">save</cide-ele-icon>\r\n Save Order\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Table Section -->\r\n <div class=\"tw-overflow-x-auto tw-relative\"\r\n [ngClass]=\"{\r\n 'tw-flex-1 tw-min-h-0': mergedConfig().fullHeight,\r\n 'tw-overflow-y-auto': scrollConfig?.enabled,\r\n 'tw-max-h-full': scrollConfig?.enabled\r\n }\"\r\n [style.maxHeight]=\"scrollConfig?.enabled ? scrollConfig?.maxHeight : null\"\r\n [style.minHeight]=\"scrollConfig?.enabled ? scrollConfig?.minHeight : null\">\r\n <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 tw-h-full tw-table-fixed\"\r\n [class.empty-table]=\"displayedData.length === 0\"\r\n [ngClass]=\"{\r\n 'tw-table-striped': mergedConfig().striped,\r\n 'tw-border': mergedConfig().bordered,\r\n 'tw-table-sm': mergedConfig().compact\r\n }\"\r\n style=\"table-layout: fixed;\">\r\n \r\n <!-- Table Header -->\r\n <thead class=\"tw-bg-gray-50\" \r\n [ngClass]=\"[\r\n mergedConfig().headerClass || '',\r\n scrollConfig?.enabled && scrollConfig?.stickyHeader ? 'tw-sticky tw-top-0 tw-z-10' : ''\r\n ]\">\r\n <tr>\r\n @for (column of visibleColumns(); track column.key) {\r\n <th\r\n class=\"tw-px-3 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-500 tw-uppercase tw-tracking-wider tw-relative\"\r\n [ngClass]=\"[\r\n getColumnWidthClass(column.width),\r\n getColumnMaxWidthClass(column.width),\r\n column.align === 'center' ? 'tw-text-center' : '',\r\n column.align === 'right' ? 'tw-text-right' : ''\r\n ]\"\r\n [title]=\"column.header\">\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-gap-1\">\r\n <span class=\"tw-truncate tw-flex-1\">{{ column.header }}</span>\r\n \r\n <!-- Active Filter Indicator -->\r\n @if (isColumnFiltered(column.key)) {\r\n <div class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded tw-bg-blue-100 tw-text-blue-700 tw-text-xs tw-font-medium tw-mr-1\">\r\n <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-mr-0.5\">filter_alt</cide-ele-icon>\r\n {{ getActiveFilterCount(column.key) }}\r\n </div>\r\n }\r\n \r\n <!-- Column Menu Trigger (Three Dots Icon) -->\r\n @if (mergedConfig().columnMenu?.enabled) {\r\n <button\r\n type=\"button\"\r\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-rounded tw-text-gray-600 hover:tw-text-gray-800 hover:tw-bg-gray-100 tw-transition-all column-menu-trigger\"\r\n [class.tw-text-blue-600]=\"isColumnMenuOpen(column.key) || isColumnFiltered(column.key)\"\r\n [class.tw-bg-blue-50]=\"isColumnFiltered(column.key)\"\r\n (click)=\"toggleColumnMenu(column.key, $event)\"\r\n title=\"Column options\">\r\n <cide-ele-icon class=\"tw-w-5 tw-h-4\">more_vert</cide-ele-icon>\r\n </button>\r\n }\r\n </div>\r\n\r\n <!-- Column Menu Dropdown -->\r\n @if (isColumnMenuOpen(column.key)) {\r\n <div class=\"column-menu-dropdown tw-absolute tw-z-50 tw-mt-2 tw-w-56 tw-rounded-lg tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5\">\r\n <div class=\"tw-py-1\">\r\n <!-- Sort Options -->\r\n @if (mergedConfig().columnMenu?.showSort && column.sortable !== false) {\r\n <button\r\n type=\"button\"\r\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n (click)=\"onColumnSort(column, 'asc')\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_upward</cide-ele-icon>\r\n Ascending\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n (click)=\"onColumnSort(column, 'desc')\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_downward</cide-ele-icon>\r\n Descending\r\n </button>\r\n <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\r\n }\r\n\r\n <!-- Filter Option -->\r\n @if (mergedConfig().columnMenu?.showFilter && column.filterable !== false) {\r\n <!-- Check if there's a custom filter renderer template -->\r\n @if (column.filterRenderer && templateRenderers[column.filterRenderer]) {\r\n <div class=\"tw-px-4 tw-py-2\">\r\n <ng-container [ngTemplateOutlet]=\"$any(templateRenderers[column.filterRenderer])\"\r\n [ngTemplateOutletContext]=\"{ $implicit: column, column: column, onFilter: onColumnFilter.bind(this) }\">\r\n </ng-container>\r\n </div>\r\n } @else {\r\n <!-- Excel-style Filter Button -->\r\n <button\r\n type=\"button\"\r\n class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n [class.tw-bg-blue-50]=\"isFilterPanelOpen(column.key)\"\r\n (click)=\"toggleFilterPanel(column.key, $event)\">\r\n <div class=\"tw-flex tw-items-center\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">filter_list</cide-ele-icon>\r\n Filter\r\n </div>\r\n <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-gray-400\">\r\n {{ isFilterPanelOpen(column.key) ? 'expand_less' : 'expand_more' }}\r\n </cide-ele-icon>\r\n </button>\r\n \r\n <!-- Excel-style Filter Panel -->\r\n @if (isFilterPanelOpen(column.key)) {\r\n <div class=\"tw-px-2 tw-py-2 tw-bg-gray-50\" (click)=\"$event.stopPropagation()\">\r\n <!-- Search box -->\r\n <div class=\"tw-px-2 tw-mb-2\">\r\n <input\r\n type=\"text\"\r\n class=\"tw-w-full tw-px-2 tw-py-1 tw-text-xs tw-border tw-border-gray-300 tw-rounded focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-blue-500\"\r\n placeholder=\"Search...\"\r\n [(ngModel)]=\"filterSearchTerm\"\r\n (click)=\"$event.stopPropagation()\">\r\n </div>\r\n \r\n <!-- Select All / Deselect All -->\r\n <div class=\"tw-px-2 tw-mb-1 tw-flex tw-gap-2\">\r\n <button\r\n type=\"button\"\r\n class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-700\"\r\n (click)=\"selectAllFilterValues(column); $event.stopPropagation()\">\r\n Select All\r\n </button>\r\n <span class=\"tw-text-xs tw-text-gray-400\">|</span>\r\n <button\r\n type=\"button\"\r\n class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-700\"\r\n (click)=\"deselectAllFilterValues(column); $event.stopPropagation()\">\r\n Clear\r\n </button>\r\n </div>\r\n \r\n <!-- Filter values list -->\r\n <div class=\"tw-max-h-48 tw-overflow-y-auto\">\r\n @for (item of getUniqueColumnValues(column); track item.value) {\r\n <label class=\"tw-flex tw-items-center tw-px-2 tw-py-1 tw-text-xs hover:tw-bg-white tw-cursor-pointer tw-rounded\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"tw-mr-2 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500\"\r\n [checked]=\"item.checked\"\r\n (change)=\"toggleFilterValue(column, item.value, $any($event.target).checked)\"\r\n (click)=\"$event.stopPropagation()\">\r\n <span class=\"tw-flex-1 tw-truncate\">{{ item.label }}</span>\r\n <span class=\"tw-text-gray-400 tw-ml-1\">({{ item.count }})</span>\r\n </label>\r\n }\r\n </div>\r\n </div>\r\n }\r\n }\r\n <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\r\n }\r\n\r\n <!-- Autosize Option -->\r\n @if (mergedConfig().columnMenu?.showAutosize) {\r\n <button\r\n type=\"button\"\r\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n (click)=\"onColumnAutosize(column)\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">fit_screen</cide-ele-icon>\r\n Autosize\r\n </button>\r\n }\r\n\r\n <!-- Group By Column Option -->\r\n @if (mergedConfig().columnMenu?.showGroupBy && column.groupable !== false) {\r\n <button\r\n type=\"button\"\r\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n (click)=\"onColumnGroupBy(column)\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">group_work</cide-ele-icon>\r\n Group By Column\r\n </button>\r\n }\r\n\r\n <!-- Manage Columns Option -->\r\n @if (mergedConfig().columnMenu?.showManageColumns) {\r\n <button\r\n type=\"button\"\r\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n (click)=\"onManageColumns()\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">view_column</cide-ele-icon>\r\n Manage Columns\r\n </button>\r\n }\r\n\r\n <!-- Reset Columns Option -->\r\n @if (mergedConfig().columnMenu?.showResetColumns) {\r\n <button\r\n type=\"button\"\r\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n (click)=\"onColumnReset()\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">refresh</cide-ele-icon>\r\n Reset Columns\r\n </button>\r\n }\r\n\r\n <!-- Hide Column Option -->\r\n @if (mergedConfig().columnMenu?.showHideColumn && column.hideable !== false) {\r\n <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\r\n <button\r\n type=\"button\"\r\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n (click)=\"onColumnHide(column)\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">visibility_off</cide-ele-icon>\r\n Hide Column\r\n </button>\r\n }\r\n\r\n <!-- Aggregation Select Option -->\r\n @if (mergedConfig().columnMenu?.showAggregation && column.aggregatable !== false) {\r\n <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\r\n <div class=\"tw-px-4 tw-py-2 tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase\">Aggregation</div>\r\n <button\r\n type=\"button\"\r\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n (click)=\"onColumnAggregation(column, 'sum')\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">functions</cide-ele-icon>\r\n Sum\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n (click)=\"onColumnAggregation(column, 'avg')\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">analytics</cide-ele-icon>\r\n Average\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n (click)=\"onColumnAggregation(column, 'count')\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">tag</cide-ele-icon>\r\n Count\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n (click)=\"onColumnAggregation(column, 'min')\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_downward</cide-ele-icon>\r\n Min\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n (click)=\"onColumnAggregation(column, 'max')\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_upward</cide-ele-icon>\r\n Max\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n\r\n <!-- Table Body -->\r\n <tbody class=\"tw-bg-white tw-divide-y tw-divide-gray-200\">\r\n @if (loading() || isRefreshing() || pageChangeLoading()) {\r\n <!-- Skeleton Loading Rows -->\r\n @for (skeletonItem of getSkeletonArray(); track $index) {\r\n <tr class=\"tw-animate-pulse tw-border-b tw-border-gray-200\">\r\n @for (column of columns; track column.key) {\r\n <td class=\"tw-px-3 tw-py-2 tw-whitespace-nowrap\"\r\n [ngClass]=\"[\r\n getColumnWidthClass(column.width),\r\n getColumnMaxWidthClass(column.width)\r\n ]\">\r\n <div class=\"tw-h-2 tw-bg-gray-200 tw-rounded tw-w-3/4\"></div>\r\n </td>\r\n }\r\n </tr>\r\n }\r\n } @else {\r\n @for (item of displayedData; track trackByFn($index, item)) {\r\n <tr class=\"tw-group hover:tw-bg-gray-50 tw-border-b-2 tw-border-gray-200\"\r\n [ngClass]=\"[\r\n mergedConfig().rowClass || '',\r\n isRefreshing() ? 'tw-opacity-60 tw-pointer-events-none' : '',\r\n isDragDropEnabled() ? 'tw-cursor-move tw-border-2 tw-border-transparent' : '',\r\n !isDragDropEnabled() ? 'tw-transition-colors tw-duration-150' : '',\r\n isTreeEnabled() ? getTreeLevelClass(item) : ''\r\n ]\"\r\n [style.border-color]=\"isDragOverRow === $index ? '#3b82f6' : 'transparent'\"\r\n [style.background-color]=\"isDragOverRow === $index ? '#eff6ff' : ''\"\r\n (click)=\"onRowClick(item)\"\r\n (keydown.enter)=\"onRowClick(item)\"\r\n (keydown.space)=\"onRowClick(item)\"\r\n [class.tw-cursor-pointer]=\"mergedConfig().onRowClick && !isDragDropEnabled()\"\r\n [tabindex]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 0 : -1\"\r\n [attr.role]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'button' : null\"\r\n [attr.aria-label]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'Select row' : null\"\r\n [draggable]=\"isDragDropEnabled()\"\r\n (dragstart)=\"onDragStart($event, item, $index)\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event, item, $index)\"\r\n (dragend)=\"onDragEnd($event)\">\r\n \r\n @for (column of columns; track column.key) {\r\n <td class=\"tw-pr-3 tw-py-1 tw-relative\"\r\n [ngClass]=\"[\r\n getColumnWidthClass(column.width),\r\n getColumnMaxWidthClass(column.width),\r\n mergedConfig().cellClass || '',\r\n column.align === 'center' ? 'tw-text-center' : '',\r\n column.align === 'right' ? 'tw-text-right' : '',\r\n column.truncate !== false ? 'tw-whitespace-nowrap' : 'tw-whitespace-normal'\r\n ]\"\r\n [style.paddingLeft]=\"isTreeEnabled() && $index === 0 ? getTreeIndentStyle(item) : '12px'\"\r\n [style.maxWidth]=\"getColumnMaxWidthClass(column.width) === 'tw-max-w-xs' ? '200px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-sm' ? '300px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-md' ? '400px' : 'none'\"\r\n [style.minWidth]=\"isTreeEnabled() && $index === 0 ? '150px' : '100px'\">\r\n <!-- Tree Expand/Collapse Button (only for first column when tree is enabled) -->\r\n @if (isTreeEnabled() && $index === 0) {\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <!-- Tree Indentation -->\r\n <div class=\"tw-flex tw-items-center\">\r\n @if (hasChildren(item)) {\r\n <button \r\n variant=\"outline\"\r\n size=\"xs\"\r\n type=\"button\"\r\n (click)=\"onActionClick(item, { key: 'toggle-expand', label: 'Toggle', icon: '', variant: 'ghost', onClick: 'toggle-expand' }); $event.stopPropagation()\"\r\n class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-text-gray-500 hover:tw-text-gray-700 tw-rounded\"\r\n [class.tw-transition-colors]=\"!isDragDropEnabled()\"\r\n [title]=\"isItemExpanded(item) ? 'Collapse' : 'Expand'\">\r\n <cide-ele-icon \r\n class=\"tw-w-3 tw-h-3\"\r\n [class.tw-transition-transform]=\"!isDragDropEnabled()\"\r\n [class.tw-rotate-90]=\"isItemExpanded(item)\"\r\n size=\"xs\">\r\n chevron_right\r\n </cide-ele-icon>\r\n </button>\r\n } @else {\r\n <div class=\"tw-w-8 tw-h-5 tw-flex tw-items-center tw-justify-center\">\r\n <!-- <div class=\"tw-w-1 tw-h-1 tw-bg-gray-300 tw-rounded-full\"></div> -->\r\n </div>\r\n }\r\n </div>\r\n \r\n <!-- Cell Content -->\r\n <div class=\"tw-flex-1 tw-w-full\">\r\n @if (column.type === 'text') {\r\n <p class=\"tw-text-sm tw-text-gray-900\"\r\n [class.tw-truncate]=\"column.truncate\"\r\n [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\r\n {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\r\n </p>\r\n } @else if (column.type === 'number') {\r\n <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\r\n {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\r\n </span>\r\n } @else if (column.type === 'date') {\r\n <span class=\"tw-text-sm tw-text-gray-600\">\r\n {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\r\n </span>\r\n } @else if (column.type === 'boolean') {\r\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\r\n [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\r\n {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\r\n </span>\r\n } @else if (column.type === 'status' && column.statusConfig) {\r\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\r\n [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\r\n {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\r\n </span>\r\n } @else if (column.type === 'actions' && column.actions) {\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n @for (action of column.actions; track action.key) {\r\n <button\r\n cideEleButton\r\n [variant]=\"action.variant || 'ghost'\"\r\n size=\"xs\"\r\n type=\"button\"\r\n (click)=\"onActionClick(item, action); $event.stopPropagation()\"\r\n [title]=\"action.tooltip || action.label\"\r\n [disabled]=\"isRefreshing()\"\r\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\r\n [class.tw-transition-colors]=\"!isDragDropEnabled()\"\r\n [ngClass]=\"{\r\n 'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\r\n 'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\r\n 'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\r\n 'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\r\n }\">\r\n @if (action.icon) {\r\n <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n <path d=\"M10 12l-5-5h10l-5 5z\"/>\r\n </svg>\r\n }\r\n {{ action.label }}\r\n </button>\r\n }\r\n </div>\r\n } @else if (column.type === 'custom') {\r\n <!-- Template Renderer -->\r\n @if (column.renderer && isTemplateRenderer(column.renderer)) {\r\n <ng-container \r\n [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\r\n [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\r\n </ng-container>\r\n }\r\n <!-- Default rendering -->\r\n @else {\r\n <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Regular cell content (non-tree or non-first column) -->\r\n @if (column.type === 'text') {\r\n <p class=\"tw-text-sm tw-text-gray-900\"\r\n [class.tw-truncate]=\"column.truncate\"\r\n [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\r\n {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\r\n </p>\r\n } @else if (column.type === 'number') {\r\n <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\r\n {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\r\n </span>\r\n } @else if (column.type === 'date') {\r\n <span class=\"tw-text-sm tw-text-gray-600\">\r\n {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\r\n </span>\r\n } @else if (column.type === 'boolean') {\r\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\r\n [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\r\n {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\r\n </span>\r\n } @else if (column.type === 'status' && column.statusConfig) {\r\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\r\n [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\r\n {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\r\n </span>\r\n } @else if (column.type === 'actions' && column.actions) {\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n @for (action of column.actions; track action.key) {\r\n <button\r\n cideEleButton\r\n [variant]=\"action.variant || 'ghost'\"\r\n size=\"xs\"\r\n type=\"button\"\r\n (click)=\"onActionClick(item, action); $event.stopPropagation()\"\r\n [title]=\"action.tooltip || action.label\"\r\n [disabled]=\"isRefreshing()\"\r\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\r\n [class.tw-transition-colors]=\"!isDragDropEnabled()\"\r\n [ngClass]=\"{\r\n 'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\r\n 'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\r\n 'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\r\n 'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\r\n }\">\r\n @if (action.icon) {\r\n <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n <path d=\"M10 12l-5-5h10l-5 5z\"/>\r\n </svg>\r\n }\r\n {{ action.label }}\r\n </button>\r\n }\r\n </div>\r\n } @else if (column.type === 'custom') {\r\n <!-- Template Renderer -->\r\n @if (column.renderer && isTemplateRenderer(column.renderer)) {\r\n <ng-container \r\n [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\r\n [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\r\n </ng-container>\r\n }\r\n <!-- Default rendering -->\r\n @else {\r\n <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\r\n }\r\n }\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n \r\n <!-- Empty State -->\r\n @if (displayedData.length === 0) {\r\n <tr class=\"tw-h-full\">\r\n <td [attr.colspan]=\"columns.length\" class=\"tw-px-6 tw-py-22 tw-text-center tw-h-full tw-align-middle\">\r\n <div class=\"tw-text-gray-500 tw-flex tw-flex-col tw-items-center tw-justify-center tw-min-h-[300px]\">\r\n <svg class=\"tw-mx-auto tw-h-12 tw-w-12 tw-text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"></path>\r\n </svg>\r\n <h3 class=\"tw-mt-2 tw-text-sm tw-font-medium tw-text-gray-900\">No data found</h3>\r\n <p class=\"tw-mt-1 tw-text-sm tw-text-gray-500\">\r\n @if (searchQuery()) {\r\n No results match your search criteria.\r\n } @else {\r\n There are no items to display.\r\n }\r\n </p>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <!-- Pagination Section -->\r\n @if (paginationConfig.enabled && totalItems() > 0) {\r\n <div class=\"tw-px-3 tw-py-0 tw-border-t tw-border-gray-200 tw-bg-white tw-relative tw-z-20\"\r\n [class.tw-opacity-60]=\"isRefreshing()\">\r\n \r\n <!-- Results Info and Page Size -->\r\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-1 sm:tw-space-y-0\">\r\n \r\n <!-- Results Info -->\r\n @if (paginationConfig.showPageInfo) {\r\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n <p class=\"tw-text-sm tw-text-gray-700\">\r\n Showing {{ getItemRangeText() }} results\r\n </p>\r\n \r\n <!-- Page Size Selector -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-500\">view_list</cide-ele-icon>\r\n <span class=\"tw-text-sm tw-text-gray-700\">Per page:</span>\r\n <div class=\"tw-w-16 tw-relative\">\r\n <cide-ele-select\r\n [labelHide]=\"true\"\r\n [ngModel]=\"pageSize()\"\r\n (ngModelChange)=\"updatePageSize($event)\"\r\n [options]=\"getPageSizeOptions()\"\r\n [disabled]=\"isRefreshing()\"\r\n fill=\"outline\"\r\n size=\"xs\"\r\n class=\"tw-z-30\">\r\n </cide-ele-select>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Pagination Controls -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n \r\n <!-- Previous/Next and Page Numbers -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\r\n \r\n <!-- First Page -->\r\n <button\r\n type=\"button\"\r\n (click)=\"onPageChange(1)\"\r\n [disabled]=\"currentPage() === 1 || isRefreshing()\"\r\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n title=\"First page\">\r\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">first_page</cide-ele-icon>\r\n </button>\r\n \r\n <!-- Previous Page -->\r\n <button\r\n type=\"button\"\r\n (click)=\"previousPage()\"\r\n [disabled]=\"!hasPreviousPage() || isRefreshing()\"\r\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n title=\"Previous page\">\r\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">chevron_left</cide-ele-icon>\r\n </button>\r\n \r\n <!-- Page Numbers -->\r\n @for (page of getEnhancedPageNumbers(); track page) {\r\n @if (page === '...') {\r\n <span class=\"tw-px-2 tw-py-2 tw-text-sm tw-text-gray-500\">...</span>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n (click)=\"onPageChange(page)\"\r\n [disabled]=\"isRefreshing()\"\r\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-p-0 tw-rounded tw-text-xs tw-font-medium tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n [ngClass]=\"{\r\n 'tw-bg-blue-600 tw-text-white hover:tw-bg-blue-700': currentPage() === page,\r\n 'tw-bg-white tw-text-gray-700 tw-border tw-border-gray-300 hover:tw-bg-gray-50': currentPage() !== page\r\n }\"\r\n [title]=\"'Page ' + page\">\r\n {{ page }}\r\n </button>\r\n }\r\n }\r\n \r\n <!-- Next Page -->\r\n <button\r\n type=\"button\"\r\n (click)=\"nextPage()\"\r\n [disabled]=\"!hasNextPage() || isRefreshing()\"\r\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n title=\"Next page\">\r\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">chevron_right</cide-ele-icon>\r\n </button>\r\n \r\n <!-- Last Page -->\r\n <button\r\n type=\"button\"\r\n (click)=\"onPageChange(totalPages())\"\r\n [disabled]=\"currentPage() === totalPages() || isRefreshing()\"\r\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n title=\"Last page\">\r\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">last_page</cide-ele-icon>\r\n </button>\r\n \r\n </div>\r\n\r\n <!-- Quick Jump and Refresh -->\r\n @if (paginationConfig.showQuickJump || paginationConfig.showRefresh) {\r\n <div class=\"tw-flex tw-items-center tw-space-x-1 tw-border-l tw-border-gray-200 tw-pl-2\">\r\n \r\n <!-- Quick Jump -->\r\n @if (paginationConfig.showQuickJump) {\r\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\r\n <span class=\"tw-text-sm tw-text-gray-700\">Go to:</span>\r\n <div class=\"tw-w-16\">\r\n <cide-ele-input id=\"jump-to-page-input\" type=\"number\" [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\"\r\n [(ngModel)]=\"jumpToPage\" [min]=\"1\" [max]=\"totalPages()\"\r\n [disabled]=\"isRefreshing()\"\r\n size=\"xs\"\r\n (keydown.enter)=\"onJumpToPage()\">\r\n </cide-ele-input>\r\n </div>\r\n <button\r\n type=\"button\"\r\n (click)=\"onJumpToPage()\"\r\n [disabled]=\"isRefreshing()\"\r\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-p-0 tw-rounded tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-700 tw-border tw-border-gray-300 hover:tw-bg-gray-200 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n title=\"Go to page\">\r\n Go\r\n </button>\r\n </div>\r\n }\r\n \r\n <!-- Refresh Button -->\r\n @if (paginationConfig.showRefresh) {\r\n <button\r\n type=\"button\"\r\n (click)=\"onRefresh()\"\r\n [disabled]=\"isRefreshing()\"\r\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n title=\"Refresh\">\r\n @if (isRefreshing()) {\r\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4 tw-animate-spin\">refresh</cide-ele-icon>\r\n } @else {\r\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">refresh</cide-ele-icon>\r\n }\r\n </button>\r\n }\r\n </div>\r\n }\r\n \r\n </div>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".data-grid-container{width:100%;display:flex;flex-direction:column;min-height:400px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;color:#1f2937;background-color:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #0000000a,0 1px 2px #00000005;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.data-grid-container.tw-h-full{height:100%;min-height:100%}.data-grid-container .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}.data-grid-container .tw-overflow-x-auto.tw-flex-1{flex:1;min-height:0}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar{height:6px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af}.data-grid-container table{min-height:300px;border-collapse:separate;border-spacing:0;width:100%;background-color:#fff}.data-grid-container thead{background:linear-gradient(180deg,#fafafa,#f7f7f7);border-bottom:1px solid rgba(0,0,0,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.data-grid-container thead th{background:transparent;color:#6b7280;font-weight:500;font-size:12px;text-transform:none;letter-spacing:-.01em;padding:4px 10px;border-bottom:1px solid rgba(0,0,0,.06);text-align:left;white-space:nowrap;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container thead th:first-child{padding-left:12px}.data-grid-container thead th:last-child{padding-right:12px}.data-grid-container thead th:hover{background-color:#00000005}.data-grid-container thead th .column-menu-trigger{opacity:1;transition:all .2s cubic-bezier(.4,0,.2,1);margin-left:4px;cursor:pointer;padding:2px;border-radius:4px}.data-grid-container thead th .column-menu-trigger:hover{background-color:#0000000f}.data-grid-container tbody{background-color:#fff}.data-grid-container tbody td{padding:6px 10px;border-bottom:1px solid rgba(0,0,0,.03);color:#1f2937;font-size:13px;vertical-align:middle;line-height:1.5;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container tbody td:first-child{padding-left:12px}.data-grid-container tbody td:last-child{padding-right:12px}.data-grid-container tbody tr{background-color:#fff;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container tbody tr:hover{background-color:#00000005;transform:scale(1.001)}.data-grid-container tbody tr:hover td{border-bottom-color:#0000000a}.data-grid-container tbody tr:active{background-color:#00000008;transform:scale(.999)}.data-grid-container.tw-h-full table,.data-grid-container.tw-h-full tbody{height:100%}.data-grid-container.tw-table-striped tbody tr:nth-child(2n){background-color:#00000004}.data-grid-container.tw-table-striped tbody tr:nth-child(2n):hover{background-color:#00000008;transform:scale(1.001)}.data-grid-container.tw-table-sm thead th{padding:8px 10px;font-size:11px}.data-grid-container.tw-table-sm thead th:first-child{padding-left:16px}.data-grid-container.tw-table-sm thead th:last-child{padding-right:16px}.data-grid-container.tw-table-sm tbody td{padding:8px 10px;font-size:12px;line-height:1.4}.data-grid-container.tw-table-sm tbody td:first-child{padding-left:16px}.data-grid-container.tw-table-sm tbody td:last-child{padding-right:16px}.data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:#e5f3ff}.data-grid-container.loading-overlay{position:relative}.data-grid-container.loading-overlay:after{content:\"\";position:absolute;inset:0;background:#ffffffd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;animation:fadeIn .2s cubic-bezier(.4,0,.2,1)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.data-grid-container .tw-animate-pulse div{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.data-grid-container .data-grid-action-buttons button{position:relative;border:1px solid rgba(0,0,0,.08);background:transparent;outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:6px;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-action-buttons button cide-ele-icon{color:#6b7280;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-action-buttons button:hover:not(:disabled){background-color:#0000000a;border-color:#0000001f}.data-grid-container .data-grid-action-buttons button:hover:not(:disabled) cide-ele-icon{color:#374151;transform:scale(1.05)}.data-grid-container .data-grid-action-buttons button:active:not(:disabled){background-color:#00000014;border-color:#00000026;transform:scale(.95)}.data-grid-container .data-grid-action-buttons button:active:not(:disabled) cide-ele-icon{transform:scale(.98)}.data-grid-container .data-grid-action-buttons button:focus-visible{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f61f}.data-grid-container .data-grid-action-buttons button:disabled{cursor:not-allowed;opacity:.3;background:transparent!important;border-color:#0000000d}.data-grid-container .action-buttons{display:flex;gap:.25rem}.data-grid-container .action-buttons button{transition:all .15s ease-in-out}.data-grid-container .action-buttons button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.data-grid-container .action-buttons button:disabled{cursor:not-allowed;opacity:.5}.data-grid-container .pagination-controls{padding:12px 20px;border-top:1px solid rgba(0,0,0,.06);background:linear-gradient(180deg,#fafafa,#f7f7f7)}.data-grid-container .pagination-controls button{transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:6px}.data-grid-container .pagination-controls button:hover:not(:disabled){background-color:#0000000a;transform:scale(1.02)}.data-grid-container .pagination-controls button:active:not(:disabled){transform:scale(.98);background-color:#00000014}.data-grid-container .pagination-controls button:disabled{cursor:not-allowed;opacity:.3}.data-grid-container .pagination-controls button.active{background-color:#3b82f61a;color:#3b82f6;font-weight:500;box-shadow:0 0 0 1px #3b82f633}.data-grid-container .pagination-controls input[type=number]{transition:all .2s cubic-bezier(.4,0,.2,1);border:1px solid rgba(0,0,0,.06);border-radius:6px}.data-grid-container .pagination-controls input[type=number]:hover{border-color:#0000001a}.data-grid-container .pagination-controls input[type=number]:focus{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f614;background-color:#fff}.data-grid-container .status-badge{font-weight:500;letter-spacing:-.01em;padding:4px 12px;border-radius:12px;font-size:12px;display:inline-flex;align-items:center;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .status-badge.active{background-color:#34d39926;color:#059669;border:1px solid rgba(52,211,153,.3)}.data-grid-container .status-badge.active:hover{background-color:#34d39933}.data-grid-container .status-badge.inactive{background-color:#f8717126;color:#dc2626;border:1px solid rgba(248,113,113,.3)}.data-grid-container .status-badge.inactive:hover{background-color:#f8717133}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper{transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper:hover:not(:has(input:disabled)){background-color:#00000005}.data-grid-container .data-grid-search-input ::ng-deep input{font-size:13px;font-weight:400;color:#1f2937;transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:8px}.data-grid-container .data-grid-search-input ::ng-deep input::placeholder{color:#9ca3af;font-weight:400}.data-grid-container .data-grid-search-input ::ng-deep input:focus{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f614;background-color:#fff}.data-grid-container .data-grid-search-input ::ng-deep input:disabled{background-color:#00000005;color:#9ca3af;cursor:not-allowed}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-leading-icon cide-ele-icon{color:#9ca3af;transition:color .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-search-input ::ng-deep input:focus~.cide-input-leading-icon cide-ele-icon,.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper:has(input:focus) .cide-input-leading-icon cide-ele-icon{color:#6b7280}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]{border:1px solid #e5e7eb;background-color:#fafafa;border-radius:8px}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]:hover:not(:has(input:disabled)){border-color:#d1d5db;background-color:#fff}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]:has(input:focus){border-color:#3b82f64d;background-color:#fff}.data-grid-container .search-input{position:relative}.data-grid-container .search-input input{transition:all .15s ease-in-out}.data-grid-container .search-input input:focus{box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .search-input .search-icon{pointer-events:none}.data-grid-container .column-menu-dropdown{animation:dropdownFadeIn .15s cubic-bezier(.4,0,.2,1);box-shadow:0 10px 25px #0000001a,0 4px 10px #0000000d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.05)}.data-grid-container .column-menu-dropdown button{font-size:13px;font-weight:400;letter-spacing:-.01em;text-align:left;transition:all .15s cubic-bezier(.4,0,.2,1)}.data-grid-container .column-menu-dropdown button:hover{background-color:#3b82f60d;color:#1f2937}.data-grid-container .column-menu-dropdown button:hover cide-ele-icon{color:#3b82f6}.data-grid-container .column-menu-dropdown button:active{background-color:#3b82f61a;transform:scale(.98)}.data-grid-container .column-menu-dropdown .tw-uppercase{letter-spacing:.05em}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.data-grid-container .empty-state{padding:4rem 2rem;text-align:center}.data-grid-container .empty-state svg{margin:0 auto 1.5rem;opacity:.3;transition:all .3s cubic-bezier(.4,0,.2,1)}.data-grid-container .empty-state svg:hover{opacity:.5;transform:scale(1.05)}.data-grid-container .empty-state h3{margin-bottom:.75rem;font-weight:600;color:#374151;font-size:16px;letter-spacing:-.01em}.data-grid-container .empty-state p{color:#6b7280;font-size:14px;line-height:1.5}.data-grid-container.tw-h-full tbody tr:only-child td{height:100%;vertical-align:middle}.data-grid-container.tw-h-full table.empty-table{height:100%}.data-grid-container.tw-h-full tbody tr:only-child{height:100%}@media (max-width: 640px){.data-grid-container .tw-px-6{padding-left:1rem;padding-right:1rem}.data-grid-container .pagination-controls{flex-direction:column;gap:1rem}.data-grid-container .pagination-controls .flex{justify-content:center}.data-grid-container .pagination-info{display:none}.data-grid-container .search-actions{flex-direction:column;gap:1rem}}@media (prefers-color-scheme: dark){.data-grid-container.dark-mode{background-color:#1f2937;color:#f9fafb}.data-grid-container.dark-mode table{background-color:#1f2937}.data-grid-container.dark-mode thead{background-color:#374151}.data-grid-container.dark-mode tbody tr{border-color:#374151}.data-grid-container.dark-mode tbody tr:hover{background-color:#374151}.data-grid-container.dark-mode .tw-text-gray-900{color:#f9fafb!important}.data-grid-container.dark-mode .tw-text-gray-600{color:#d1d5db!important}.data-grid-container.dark-mode .tw-text-gray-500{color:#9ca3af!important}}.data-grid-container.drag-drop-enabled tbody tr{transition:all .2s ease}.data-grid-container.drag-drop-enabled tbody tr:hover{background-color:#f3f4f6}.data-grid-container.drag-drop-enabled tbody tr.tw-opacity-50{background-color:#dbeafecc;border:2px dashed #3b82f6;border-radius:4px}.data-grid-container.drag-drop-enabled tbody tr.tw-bg-blue-50{background-color:#eff6ffe6}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]{cursor:move;position:relative}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:hover{background-color:#f8fafc;box-shadow:0 1px 3px #0000001a}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:active{cursor:grabbing}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]{position:relative}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]:before{content:\"\";position:absolute;top:-2px;left:0;right:0;height:2px;background:linear-gradient(90deg,#3b82f6,#60a5fa);z-index:10}.data-grid-container.tree-enabled tbody tr td:first-child{position:relative}.data-grid-container.tree-enabled tbody tr td:first-child button{transition:all .15s ease}.data-grid-container.tree-enabled tbody tr td:first-child button:hover{background-color:#f3f4f6;border-radius:2px}.data-grid-container.tree-enabled tbody tr td:first-child button svg{transition:transform .2s ease}.data-grid-container.tree-enabled tbody tr[style*=padding-left]{border-left:2px solid transparent}.data-grid-container.tree-enabled tbody tr[style*=padding-left]:hover{border-left-color:#e5e7eb}.tree-level-0{border-bottom:2px solid #e5e7eb!important;background-color:#fff}.tree-level-0:hover{background-color:#f5f5f5!important}.tree-level-0 td:first-child{font-weight:600}.tree-level-1{border-bottom:1px solid #d1d5db!important;background-color:#fafafa}.tree-level-1:hover{background-color:#f1f5f9!important}.tree-level-1 td:first-child{font-weight:500}.tree-level-2{border-bottom:1px solid #d1d5db!important;background-color:#f9fafb}.tree-level-2:hover{background-color:#f3f4f6!important}.tree-level-2 td:first-child{font-weight:400}.tree-level-deep{border-bottom:1px solid #e5e7eb!important;background-color:#fefefe}.tree-level-deep:hover{background-color:#f9fafb!important}.tree-level-deep td:first-child{font-weight:300}table td{box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}table td.tw-overflow-hidden{overflow:hidden;text-overflow:ellipsis}table td:first-child{min-width:150px}table td:first-child>div{display:flex;align-items:center;min-width:0}table td:first-child>div .tw-flex{min-width:0}table td .tw-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { 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.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: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }] });
|
|
10442
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleDataGridComponent, isStandalone: true, selector: "cide-ele-data-grid", inputs: { config: "config", templateRenderers: "templateRenderers", customFormatters: "customFormatters", actionHandlers: "actionHandlers", serverSidePagination: "serverSidePagination", totalServerItems: "totalServerItems", currentServerPage: "currentServerPage", currentServerPageSize: "currentServerPageSize", dragDropEnabled: "dragDropEnabled" }, outputs: { gridEvent: "gridEvent" }, usesOnChanges: true, ngImport: i0, template: " <!-- Data Grid Component -->\n <div class=\"data-grid-container tw-bg-white tw-shadow tw-rounded-lg tw-overflow-visible tw-flex tw-flex-col\" \n [ngClass]=\"[\n mergedConfig().tableClass || '',\n mergedConfig().fullHeight ? 'tw-h-full' : '',\n isDragDropEnabled() ? 'drag-drop-enabled' : '',\n isTreeEnabled() ? 'tree-enabled' : ''\n ]\">\n \n <!-- Header Section -->\n @if (mergedConfig().title || mergedConfig().subtitle) {\n <div class=\"tw-px-3 tw-py-2 tw-border-b tw-border-gray-200\">\n @if (mergedConfig().title) {\n <h3 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">\n {{ mergedConfig().title }}\n </h3>\n }\n @if (mergedConfig().subtitle) {\n <p class=\"tw-text-sm tw-text-gray-600 tw-mt-0.5\">\n {{ mergedConfig().subtitle }}\n </p>\n }\n </div>\n }\n\n <!-- Search Section -->\n @if (searchConfig.enabled) {\n <div class=\"tw-px-3 tw-py-1.5 tw-border-b tw-border-gray-200\">\n <div class=\"tw-flex tw-items-center tw-justify-between\">\n <!-- Left Side: Search Input and Action Icons -->\n <div class=\"tw-flex tw-items-center tw-space-x-1.5\">\n <!-- Search Input - Apple Style -->\n <div class=\"tw-max-w-md data-grid-search-input\">\n <cide-ele-input [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\" id=\"search-input\" type=\"text\"\n [ngModel]=\"searchQuery()\"\n (ngModelChange)=\"updateSearchQuery($event)\"\n [placeholder]=\"searchConfig.placeholder\"\n [disabled]=\"loading() || isRefreshing()\"\n leadingIcon=\"search\"\n fill=\"outline\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Action Icons (Filter, Sort, Download) - Apple Style Compact -->\n <div class=\"tw-flex tw-items-center tw-space-x-1 data-grid-action-buttons\">\n <!-- Filter Button with Dropdown -->\n <div class=\"tw-relative\">\n <button type=\"button\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-blue-600 hover:tw-bg-blue-50 tw-transition-all tw-duration-200 tw-relative\"\n [class.tw-text-blue-600]=\"columnFilters().length > 0\"\n [class.tw-bg-blue-50]=\"columnFilters().length > 0\"\n title=\"Filter\"\n (click)=\"toggleFilterDropdown()\">\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">filter_list</cide-ele-icon>\n @if (columnFilters().length > 0) {\n <span class=\"tw-absolute -tw-top-1 -tw-right-1 tw-inline-flex tw-items-center tw-justify-center tw-w-4 tw-h-4 tw-text-xs tw-font-semibold tw-text-white tw-bg-blue-600 tw-rounded-full tw-border tw-border-white\">\n {{ columnFilters().length }}\n </span>\n }\n </button>\n \n <!-- Filter Dropdown Menu -->\n @if (showFilterDropdown()) {\n <div class=\"tw-absolute tw-left-0 tw-mt-2 tw-w-80 tw-bg-white tw-rounded-lg tw-shadow-xl tw-border tw-border-gray-200 tw-z-50 tw-overflow-hidden\"\n (click)=\"$event.stopPropagation()\">\n <div class=\"tw-py-1.5\">\n <div class=\"tw-px-3 tw-py-2 tw-bg-gray-50 tw-border-b tw-border-gray-200 tw-flex tw-items-center tw-justify-between\">\n <span class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-tracking-wider\">Active Filters</span>\n @if (columnFilters().length > 0) {\n <button type=\"button\" \n class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-800 tw-font-medium\"\n (click)=\"clearAllFilters()\">\n Clear All\n </button>\n }\n </div>\n @if (columnFilters().length === 0) {\n <div class=\"tw-px-4 tw-py-6 tw-text-center\">\n <cide-ele-icon class=\"tw-w-12 tw-h-12 tw-text-gray-300 tw-mx-auto tw-mb-2\">filter_list</cide-ele-icon>\n <p class=\"tw-text-sm tw-text-gray-500\">No filters applied</p>\n <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Use column filters to narrow down your results</p>\n </div>\n } @else {\n <div class=\"tw-max-h-96 tw-overflow-y-auto\">\n @for (filter of columnFilters(); track filter.columnKey) {\n <div class=\"tw-px-4 tw-py-3 hover:tw-bg-gray-50 tw-border-b tw-border-gray-100 last:tw-border-b-0\">\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-2\">\n <div class=\"tw-flex-1 tw-min-w-0\">\n <div class=\"tw-text-xs tw-font-semibold tw-text-gray-600 tw-mb-1\">{{ getColumnHeader(filter.columnKey) }}</div>\n <div class=\"tw-text-sm tw-text-gray-700 tw-flex tw-items-center tw-gap-1\">\n @if (filter.operator === 'in' && isArray(filter.value)) {\n <span class=\"tw-inline-flex tw-items-center tw-gap-1\">\n <cide-ele-icon class=\"tw-w-3 tw-h-3\">check_circle</cide-ele-icon>\n {{ getArrayLength(filter.value) }} selected\n </span>\n } @else {\n <span>{{ $any(filter.value) }}</span>\n }\n </div>\n </div>\n <button type=\"button\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-rounded tw-text-gray-400 hover:tw-text-red-600 hover:tw-bg-red-50 tw-transition-colors\"\n (click)=\"removeFilter(filter.columnKey)\"\n title=\"Remove filter\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">close</cide-ele-icon>\n </button>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n </div>\n \n <!-- Download/Export Button with Dropdown -->\n <div class=\"tw-relative\">\n <button type=\"button\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200\"\n title=\"Export\"\n (click)=\"toggleExportMenu($event)\">\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">file_download</cide-ele-icon>\n </button>\n \n <!-- Export Dropdown Menu - Improved Design -->\n @if (showExportMenu()) {\n <div class=\"tw-absolute tw-right-0 tw-mt-2 tw-w-56 tw-bg-white tw-rounded-lg tw-shadow-xl tw-border tw-border-gray-200 tw-z-50 tw-overflow-hidden\"\n (click)=\"$event.stopPropagation()\">\n <div class=\"tw-py-1.5\">\n <div class=\"tw-px-3 tw-py-2 tw-bg-gray-50 tw-border-b tw-border-gray-200\">\n <span class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-tracking-wider\">Export Options</span>\n </div>\n <button type=\"button\"\n class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-green-50 hover:tw-text-green-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n (click)=\"exportData('csv')\">\n <div class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-green-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-green-600\">description</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-font-medium\">CSV</div>\n <div class=\"tw-text-xs tw-text-gray-500\">Comma separated values</div>\n </div>\n </button>\n <button type=\"button\"\n class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-blue-50 hover:tw-text-blue-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n (click)=\"exportData('excel')\">\n <div class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">table_chart</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-font-medium\">Excel</div>\n <div class=\"tw-text-xs tw-text-gray-500\">Microsoft Excel format</div>\n </div>\n </button>\n <button type=\"button\"\n class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-red-50 hover:tw-text-red-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n (click)=\"exportData('pdf')\">\n <div class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-red-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-red-600\">picture_as_pdf</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-font-medium\">PDF</div>\n <div class=\"tw-text-xs tw-text-gray-500\">Portable document format</div>\n </div>\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n \n <!-- Right Side: Drag Order Actions -->\n @if (isDragDropEnabled() && (isDragging() || hasOrderChanged())) {\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <button cideEleButton \n variant=\"outline\" \n size=\"sm\" \n type=\"button\"\n (click)=\"onActionClick(null, { key: 'reset-order', label: 'Reset Order', icon: 'undo', variant: 'outline', onClick: 'resetOrder' })\"\n class=\"tw-text-blue-700 tw-border-blue-300 hover:tw-bg-blue-100\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">undo</cide-ele-icon>\n Reset Order\n </button>\n <button cideEleButton \n variant=\"primary\" \n size=\"sm\" \n type=\"button\"\n (click)=\"onActionClick(null, { key: 'save-order', label: 'Save Order', icon: 'save', variant: 'primary', onClick: 'saveOrder' })\"\n class=\"tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">save</cide-ele-icon>\n Save Order\n </button>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Table Section -->\n <div class=\"tw-overflow-x-auto tw-relative\"\n [ngClass]=\"{\n 'tw-flex-1 tw-min-h-0': mergedConfig().fullHeight,\n 'tw-overflow-y-auto': scrollConfig?.enabled,\n 'tw-max-h-full': scrollConfig?.enabled\n }\"\n [style.maxHeight]=\"scrollConfig?.enabled ? scrollConfig?.maxHeight : null\"\n [style.minHeight]=\"scrollConfig?.enabled ? scrollConfig?.minHeight : null\">\n <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 tw-h-full tw-table-fixed\"\n [class.empty-table]=\"displayedData.length === 0\"\n [ngClass]=\"{\n 'tw-table-striped': mergedConfig().striped,\n 'tw-border': mergedConfig().bordered,\n 'tw-table-sm': mergedConfig().compact\n }\"\n style=\"table-layout: fixed;\">\n \n <!-- Table Header -->\n <thead class=\"tw-bg-gray-50\" \n [ngClass]=\"[\n mergedConfig().headerClass || '',\n scrollConfig?.enabled && scrollConfig?.stickyHeader ? 'tw-sticky tw-top-0 tw-z-10' : ''\n ]\">\n <tr>\n @for (column of visibleColumns(); track column.key) {\n <th\n class=\"tw-px-3 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-500 tw-uppercase tw-tracking-wider tw-relative\"\n [ngClass]=\"[\n getColumnWidthClass(column.width),\n getColumnMaxWidthClass(column.width),\n column.align === 'center' ? 'tw-text-center' : '',\n column.align === 'right' ? 'tw-text-right' : ''\n ]\"\n [title]=\"column.header\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-gap-1\">\n <span class=\"tw-truncate tw-flex-1\">{{ column.header }}</span>\n \n <!-- Active Filter Indicator -->\n @if (isColumnFiltered(column.key)) {\n <div class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded tw-bg-blue-100 tw-text-blue-700 tw-text-xs tw-font-medium tw-mr-1\">\n <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-mr-0.5\">filter_alt</cide-ele-icon>\n {{ getActiveFilterCount(column.key) }}\n </div>\n }\n \n <!-- Column Menu Trigger (Three Dots Icon) -->\n @if (mergedConfig().columnMenu?.enabled) {\n <button\n type=\"button\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-rounded tw-text-gray-600 hover:tw-text-gray-800 hover:tw-bg-gray-100 tw-transition-all column-menu-trigger\"\n [class.tw-text-blue-600]=\"isColumnMenuOpen(column.key) || isColumnFiltered(column.key)\"\n [class.tw-bg-blue-50]=\"isColumnFiltered(column.key)\"\n (click)=\"toggleColumnMenu(column.key, $event)\"\n title=\"Column options\">\n <cide-ele-icon class=\"tw-w-5 tw-h-4\">more_vert</cide-ele-icon>\n </button>\n }\n </div>\n\n <!-- Column Menu Dropdown -->\n @if (isColumnMenuOpen(column.key)) {\n <div class=\"column-menu-dropdown tw-absolute tw-z-50 tw-mt-2 tw-w-56 tw-rounded-lg tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5\">\n <div class=\"tw-py-1\">\n <!-- Sort Options -->\n @if (mergedConfig().columnMenu?.showSort && column.sortable !== false) {\n <button\n type=\"button\"\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n (click)=\"onColumnSort(column, 'asc')\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_upward</cide-ele-icon>\n Ascending\n </button>\n <button\n type=\"button\"\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n (click)=\"onColumnSort(column, 'desc')\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_downward</cide-ele-icon>\n Descending\n </button>\n <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n }\n\n <!-- Filter Option -->\n @if (mergedConfig().columnMenu?.showFilter && column.filterable !== false) {\n <!-- Check if there's a custom filter renderer template -->\n @if (column.filterRenderer && templateRenderers[column.filterRenderer]) {\n <div class=\"tw-px-4 tw-py-2\">\n <ng-container [ngTemplateOutlet]=\"$any(templateRenderers[column.filterRenderer])\"\n [ngTemplateOutletContext]=\"{ $implicit: column, column: column, onFilter: onColumnFilter.bind(this) }\">\n </ng-container>\n </div>\n } @else {\n <!-- Excel-style Filter Button -->\n <button\n type=\"button\"\n class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n [class.tw-bg-blue-50]=\"isFilterPanelOpen(column.key)\"\n (click)=\"toggleFilterPanel(column.key, $event)\">\n <div class=\"tw-flex tw-items-center\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">filter_list</cide-ele-icon>\n Filter\n </div>\n <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-gray-400\">\n {{ isFilterPanelOpen(column.key) ? 'expand_less' : 'expand_more' }}\n </cide-ele-icon>\n </button>\n \n <!-- Excel-style Filter Panel -->\n @if (isFilterPanelOpen(column.key)) {\n <div class=\"tw-px-2 tw-py-2 tw-bg-gray-50\" (click)=\"$event.stopPropagation()\">\n <!-- Search box -->\n <div class=\"tw-px-2 tw-mb-2\">\n <input\n type=\"text\"\n class=\"tw-w-full tw-px-2 tw-py-1 tw-text-xs tw-border tw-border-gray-300 tw-rounded focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-blue-500\"\n placeholder=\"Search...\"\n [(ngModel)]=\"filterSearchTerm\"\n (click)=\"$event.stopPropagation()\">\n </div>\n \n <!-- Select All / Deselect All -->\n <div class=\"tw-px-2 tw-mb-1 tw-flex tw-gap-2\">\n <button\n type=\"button\"\n class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-700\"\n (click)=\"selectAllFilterValues(column); $event.stopPropagation()\">\n Select All\n </button>\n <span class=\"tw-text-xs tw-text-gray-400\">|</span>\n <button\n type=\"button\"\n class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-700\"\n (click)=\"deselectAllFilterValues(column); $event.stopPropagation()\">\n Clear\n </button>\n </div>\n \n <!-- Filter values list -->\n <div class=\"tw-max-h-48 tw-overflow-y-auto\">\n @for (item of getUniqueColumnValues(column); track item.value) {\n <label class=\"tw-flex tw-items-center tw-px-2 tw-py-1 tw-text-xs hover:tw-bg-white tw-cursor-pointer tw-rounded\">\n <input\n type=\"checkbox\"\n class=\"tw-mr-2 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500\"\n [checked]=\"item.checked\"\n (change)=\"toggleFilterValue(column, item.value, $any($event.target).checked)\"\n (click)=\"$event.stopPropagation()\">\n <span class=\"tw-flex-1 tw-truncate\">{{ item.label }}</span>\n <span class=\"tw-text-gray-400 tw-ml-1\">({{ item.count }})</span>\n </label>\n }\n </div>\n </div>\n }\n }\n <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n }\n\n <!-- Autosize Option -->\n @if (mergedConfig().columnMenu?.showAutosize) {\n <button\n type=\"button\"\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n (click)=\"onColumnAutosize(column)\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">fit_screen</cide-ele-icon>\n Autosize\n </button>\n }\n\n <!-- Group By Column Option -->\n @if (mergedConfig().columnMenu?.showGroupBy && column.groupable !== false) {\n <button\n type=\"button\"\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n (click)=\"onColumnGroupBy(column)\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">group_work</cide-ele-icon>\n Group By Column\n </button>\n }\n\n <!-- Manage Columns Option -->\n @if (mergedConfig().columnMenu?.showManageColumns) {\n <button\n type=\"button\"\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n (click)=\"onManageColumns()\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">view_column</cide-ele-icon>\n Manage Columns\n </button>\n }\n\n <!-- Reset Columns Option -->\n @if (mergedConfig().columnMenu?.showResetColumns) {\n <button\n type=\"button\"\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n (click)=\"onColumnReset()\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">refresh</cide-ele-icon>\n Reset Columns\n </button>\n }\n\n <!-- Hide Column Option -->\n @if (mergedConfig().columnMenu?.showHideColumn && column.hideable !== false) {\n <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n <button\n type=\"button\"\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n (click)=\"onColumnHide(column)\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">visibility_off</cide-ele-icon>\n Hide Column\n </button>\n }\n\n <!-- Aggregation Select Option -->\n @if (mergedConfig().columnMenu?.showAggregation && column.aggregatable !== false) {\n <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n <div class=\"tw-px-4 tw-py-2 tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase\">Aggregation</div>\n <button\n type=\"button\"\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n (click)=\"onColumnAggregation(column, 'sum')\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">functions</cide-ele-icon>\n Sum\n </button>\n <button\n type=\"button\"\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n (click)=\"onColumnAggregation(column, 'avg')\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">analytics</cide-ele-icon>\n Average\n </button>\n <button\n type=\"button\"\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n (click)=\"onColumnAggregation(column, 'count')\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">tag</cide-ele-icon>\n Count\n </button>\n <button\n type=\"button\"\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n (click)=\"onColumnAggregation(column, 'min')\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_downward</cide-ele-icon>\n Min\n </button>\n <button\n type=\"button\"\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n (click)=\"onColumnAggregation(column, 'max')\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_upward</cide-ele-icon>\n Max\n </button>\n }\n </div>\n </div>\n }\n </th>\n }\n </tr>\n </thead>\n\n <!-- Table Body -->\n <tbody class=\"tw-bg-white tw-divide-y tw-divide-gray-200\">\n @if (loading() || isRefreshing() || pageChangeLoading()) {\n <!-- Skeleton Loading Rows -->\n @for (skeletonItem of getSkeletonArray(); track $index) {\n <tr class=\"tw-animate-pulse tw-border-b tw-border-gray-200\">\n @for (column of columns; track column.key) {\n <td class=\"tw-px-3 tw-py-2 tw-whitespace-nowrap\"\n [ngClass]=\"[\n getColumnWidthClass(column.width),\n getColumnMaxWidthClass(column.width)\n ]\">\n <div class=\"tw-h-2 tw-bg-gray-200 tw-rounded tw-w-3/4\"></div>\n </td>\n }\n </tr>\n }\n } @else {\n @for (item of displayedData; track trackByFn($index, item)) {\n <tr class=\"tw-group hover:tw-bg-gray-50 tw-border-b-2 tw-border-gray-200\"\n [ngClass]=\"[\n mergedConfig().rowClass || '',\n isRefreshing() ? 'tw-opacity-60 tw-pointer-events-none' : '',\n isDragDropEnabled() ? 'tw-cursor-move tw-border-2 tw-border-transparent' : '',\n !isDragDropEnabled() ? 'tw-transition-colors tw-duration-150' : '',\n isTreeEnabled() ? getTreeLevelClass(item) : ''\n ]\"\n [style.border-color]=\"isDragOverRow === $index ? '#3b82f6' : 'transparent'\"\n [style.background-color]=\"isDragOverRow === $index ? '#eff6ff' : ''\"\n (click)=\"onRowClick(item)\"\n (keydown.enter)=\"onRowClick(item)\"\n (keydown.space)=\"onRowClick(item)\"\n [class.tw-cursor-pointer]=\"mergedConfig().onRowClick && !isDragDropEnabled()\"\n [tabindex]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 0 : -1\"\n [attr.role]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'button' : null\"\n [attr.aria-label]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'Select row' : null\"\n [draggable]=\"isDragDropEnabled()\"\n (dragstart)=\"onDragStart($event, item, $index)\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event, item, $index)\"\n (dragend)=\"onDragEnd($event)\">\n \n @for (column of columns; track column.key) {\n <td class=\"tw-pr-3 tw-py-1 tw-relative\"\n [ngClass]=\"[\n getColumnWidthClass(column.width),\n getColumnMaxWidthClass(column.width),\n mergedConfig().cellClass || '',\n column.align === 'center' ? 'tw-text-center' : '',\n column.align === 'right' ? 'tw-text-right' : '',\n column.truncate !== false ? 'tw-whitespace-nowrap' : 'tw-whitespace-normal'\n ]\"\n [style.paddingLeft]=\"isTreeEnabled() && $index === 0 ? getTreeIndentStyle(item) : '12px'\"\n [style.maxWidth]=\"getColumnMaxWidthClass(column.width) === 'tw-max-w-xs' ? '200px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-sm' ? '300px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-md' ? '400px' : 'none'\"\n [style.minWidth]=\"isTreeEnabled() && $index === 0 ? '150px' : '100px'\">\n <!-- Tree Expand/Collapse Button (only for first column when tree is enabled) -->\n @if (isTreeEnabled() && $index === 0) {\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <!-- Tree Indentation -->\n <div class=\"tw-flex tw-items-center\">\n @if (hasChildren(item)) {\n <button \n variant=\"outline\"\n size=\"xs\"\n type=\"button\"\n (click)=\"onActionClick(item, { key: 'toggle-expand', label: 'Toggle', icon: '', variant: 'ghost', onClick: 'toggle-expand' }); $event.stopPropagation()\"\n class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-text-gray-500 hover:tw-text-gray-700 tw-rounded\"\n [class.tw-transition-colors]=\"!isDragDropEnabled()\"\n [title]=\"isItemExpanded(item) ? 'Collapse' : 'Expand'\">\n <cide-ele-icon \n class=\"tw-w-3 tw-h-3\"\n [class.tw-transition-transform]=\"!isDragDropEnabled()\"\n [class.tw-rotate-90]=\"isItemExpanded(item)\"\n size=\"xs\">\n chevron_right\n </cide-ele-icon>\n </button>\n } @else {\n <div class=\"tw-w-8 tw-h-5 tw-flex tw-items-center tw-justify-center\">\n <!-- <div class=\"tw-w-1 tw-h-1 tw-bg-gray-300 tw-rounded-full\"></div> -->\n </div>\n }\n </div>\n \n <!-- Cell Content -->\n <div class=\"tw-flex-1 tw-w-full\">\n @if (column.type === 'text') {\n <p class=\"tw-text-sm tw-text-gray-900\"\n [class.tw-truncate]=\"column.truncate\"\n [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\n {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n </p>\n } @else if (column.type === 'number') {\n <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\n {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n </span>\n } @else if (column.type === 'date') {\n <span class=\"tw-text-sm tw-text-gray-600\">\n {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n </span>\n } @else if (column.type === 'boolean') {\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\n </span>\n } @else if (column.type === 'status' && column.statusConfig) {\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\n {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\n </span>\n } @else if (column.type === 'actions' && column.actions) {\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n @for (action of column.actions; track action.key) {\n <button\n cideEleButton\n [variant]=\"action.variant || 'ghost'\"\n size=\"xs\"\n type=\"button\"\n (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n [title]=\"action.tooltip || action.label\"\n [disabled]=\"isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\n [class.tw-transition-colors]=\"!isDragDropEnabled()\"\n [ngClass]=\"{\n 'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\n 'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\n 'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\n 'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\n }\">\n @if (action.icon) {\n <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M10 12l-5-5h10l-5 5z\"/>\n </svg>\n }\n {{ action.label }}\n </button>\n }\n </div>\n } @else if (column.type === 'custom') {\n <!-- Template Renderer -->\n @if (column.renderer && isTemplateRenderer(column.renderer)) {\n <ng-container \n [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n </ng-container>\n }\n <!-- Default rendering -->\n @else {\n <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n }\n }\n </div>\n </div>\n } @else {\n <!-- Regular cell content (non-tree or non-first column) -->\n @if (column.type === 'text') {\n <p class=\"tw-text-sm tw-text-gray-900\"\n [class.tw-truncate]=\"column.truncate\"\n [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\n {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n </p>\n } @else if (column.type === 'number') {\n <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\n {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n </span>\n } @else if (column.type === 'date') {\n <span class=\"tw-text-sm tw-text-gray-600\">\n {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n </span>\n } @else if (column.type === 'boolean') {\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\n </span>\n } @else if (column.type === 'status' && column.statusConfig) {\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\n {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\n </span>\n } @else if (column.type === 'actions' && column.actions) {\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n @for (action of column.actions; track action.key) {\n <button\n cideEleButton\n [variant]=\"action.variant || 'ghost'\"\n size=\"xs\"\n type=\"button\"\n (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n [title]=\"action.tooltip || action.label\"\n [disabled]=\"isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\n [class.tw-transition-colors]=\"!isDragDropEnabled()\"\n [ngClass]=\"{\n 'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\n 'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\n 'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\n 'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\n }\">\n @if (action.icon) {\n <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M10 12l-5-5h10l-5 5z\"/>\n </svg>\n }\n {{ action.label }}\n </button>\n }\n </div>\n } @else if (column.type === 'custom') {\n <!-- Template Renderer -->\n @if (column.renderer && isTemplateRenderer(column.renderer)) {\n <ng-container \n [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n </ng-container>\n }\n <!-- Default rendering -->\n @else {\n <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n }\n }\n }\n </td>\n }\n </tr>\n }\n \n <!-- Empty State -->\n @if (displayedData.length === 0) {\n <tr class=\"tw-h-full\">\n <td [attr.colspan]=\"columns.length\" class=\"tw-px-6 tw-py-22 tw-text-center tw-h-full tw-align-middle\">\n <div class=\"tw-text-gray-500 tw-flex tw-flex-col tw-items-center tw-justify-center tw-min-h-[300px]\">\n <svg class=\"tw-mx-auto tw-h-12 tw-w-12 tw-text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"></path>\n </svg>\n <h3 class=\"tw-mt-2 tw-text-sm tw-font-medium tw-text-gray-900\">No data found</h3>\n <p class=\"tw-mt-1 tw-text-sm tw-text-gray-500\">\n @if (searchQuery()) {\n No results match your search criteria.\n } @else {\n There are no items to display.\n }\n </p>\n </div>\n </td>\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n\n <!-- Pagination Section -->\n @if (paginationConfig.enabled && totalItems() > 0) {\n <div class=\"tw-px-3 tw-py-0 tw-border-t tw-border-gray-200 tw-bg-white tw-relative tw-z-20\"\n [class.tw-opacity-60]=\"isRefreshing()\">\n \n <!-- Results Info and Page Size -->\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-1 sm:tw-space-y-0\">\n \n <!-- Results Info -->\n @if (paginationConfig.showPageInfo) {\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <p class=\"tw-text-sm tw-text-gray-700\">\n Showing {{ getItemRangeText() }} results\n </p>\n \n <!-- Page Size Selector -->\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-500\">view_list</cide-ele-icon>\n <span class=\"tw-text-sm tw-text-gray-700\">Per page:</span>\n <div class=\"tw-w-16 tw-relative\">\n <cide-ele-select\n [labelHide]=\"true\"\n [ngModel]=\"pageSize()\"\n (ngModelChange)=\"updatePageSize($event)\"\n [options]=\"getPageSizeOptions()\"\n [disabled]=\"isRefreshing()\"\n fill=\"outline\"\n size=\"xs\"\n class=\"tw-z-30\">\n </cide-ele-select>\n </div>\n </div>\n </div>\n }\n\n <!-- Pagination Controls -->\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n \n <!-- Previous/Next and Page Numbers -->\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\n \n <!-- First Page -->\n <button\n type=\"button\"\n (click)=\"onPageChange(1)\"\n [disabled]=\"currentPage() === 1 || isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n title=\"First page\">\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">first_page</cide-ele-icon>\n </button>\n \n <!-- Previous Page -->\n <button\n type=\"button\"\n (click)=\"previousPage()\"\n [disabled]=\"!hasPreviousPage() || isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n title=\"Previous page\">\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">chevron_left</cide-ele-icon>\n </button>\n \n <!-- Page Numbers -->\n @for (page of getEnhancedPageNumbers(); track page) {\n @if (page === '...') {\n <span class=\"tw-px-2 tw-py-2 tw-text-sm tw-text-gray-500\">...</span>\n } @else {\n <button\n type=\"button\"\n (click)=\"onPageChange(page)\"\n [disabled]=\"isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-p-0 tw-rounded tw-text-xs tw-font-medium tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n [ngClass]=\"{\n 'tw-bg-blue-600 tw-text-white hover:tw-bg-blue-700': currentPage() === page,\n 'tw-bg-white tw-text-gray-700 tw-border tw-border-gray-300 hover:tw-bg-gray-50': currentPage() !== page\n }\"\n [title]=\"'Page ' + page\">\n {{ page }}\n </button>\n }\n }\n \n <!-- Next Page -->\n <button\n type=\"button\"\n (click)=\"nextPage()\"\n [disabled]=\"!hasNextPage() || isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n title=\"Next page\">\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">chevron_right</cide-ele-icon>\n </button>\n \n <!-- Last Page -->\n <button\n type=\"button\"\n (click)=\"onPageChange(totalPages())\"\n [disabled]=\"currentPage() === totalPages() || isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n title=\"Last page\">\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">last_page</cide-ele-icon>\n </button>\n \n </div>\n\n <!-- Quick Jump and Refresh -->\n @if (paginationConfig.showQuickJump || paginationConfig.showRefresh) {\n <div class=\"tw-flex tw-items-center tw-space-x-1 tw-border-l tw-border-gray-200 tw-pl-2\">\n \n <!-- Quick Jump -->\n @if (paginationConfig.showQuickJump) {\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\n <span class=\"tw-text-sm tw-text-gray-700\">Go to:</span>\n <div class=\"tw-w-16\">\n <cide-ele-input id=\"jump-to-page-input\" type=\"number\" [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\"\n [(ngModel)]=\"jumpToPage\" [min]=\"1\" [max]=\"totalPages()\"\n [disabled]=\"isRefreshing()\"\n size=\"xs\"\n (keydown.enter)=\"onJumpToPage()\">\n </cide-ele-input>\n </div>\n <button\n type=\"button\"\n (click)=\"onJumpToPage()\"\n [disabled]=\"isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-p-0 tw-rounded tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-700 tw-border tw-border-gray-300 hover:tw-bg-gray-200 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n title=\"Go to page\">\n Go\n </button>\n </div>\n }\n \n <!-- Refresh Button -->\n @if (paginationConfig.showRefresh) {\n <button\n type=\"button\"\n (click)=\"onRefresh()\"\n [disabled]=\"isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n title=\"Refresh\">\n @if (isRefreshing()) {\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4 tw-animate-spin\">refresh</cide-ele-icon>\n } @else {\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">refresh</cide-ele-icon>\n }\n </button>\n }\n </div>\n }\n \n </div>\n </div>\n </div>\n }\n</div>\n", styles: [".data-grid-container{width:100%;display:flex;flex-direction:column;min-height:400px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;color:#1f2937;background-color:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #0000000a,0 1px 2px #00000005;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.data-grid-container.tw-h-full{height:100%;min-height:100%}.data-grid-container .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}.data-grid-container .tw-overflow-x-auto.tw-flex-1{flex:1;min-height:0}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar{height:6px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af}.data-grid-container table{min-height:300px;border-collapse:separate;border-spacing:0;width:100%;background-color:#fff}.data-grid-container thead{background:linear-gradient(180deg,#fafafa,#f7f7f7);border-bottom:1px solid rgba(0,0,0,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.data-grid-container thead th{background:transparent;color:#6b7280;font-weight:500;font-size:12px;text-transform:none;letter-spacing:-.01em;padding:4px 10px;border-bottom:1px solid rgba(0,0,0,.06);text-align:left;white-space:nowrap;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container thead th:first-child{padding-left:12px}.data-grid-container thead th:last-child{padding-right:12px}.data-grid-container thead th:hover{background-color:#00000005}.data-grid-container thead th .column-menu-trigger{opacity:1;transition:all .2s cubic-bezier(.4,0,.2,1);margin-left:4px;cursor:pointer;padding:2px;border-radius:4px}.data-grid-container thead th .column-menu-trigger:hover{background-color:#0000000f}.data-grid-container tbody{background-color:#fff}.data-grid-container tbody td{padding:6px 10px;border-bottom:1px solid rgba(0,0,0,.03);color:#1f2937;font-size:13px;vertical-align:middle;line-height:1.5;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container tbody td:first-child{padding-left:12px}.data-grid-container tbody td:last-child{padding-right:12px}.data-grid-container tbody tr{background-color:#fff;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container tbody tr:hover{background-color:#00000005;transform:scale(1.001)}.data-grid-container tbody tr:hover td{border-bottom-color:#0000000a}.data-grid-container tbody tr:active{background-color:#00000008;transform:scale(.999)}.data-grid-container.tw-h-full table,.data-grid-container.tw-h-full tbody{height:100%}.data-grid-container.tw-table-striped tbody tr:nth-child(2n){background-color:#00000004}.data-grid-container.tw-table-striped tbody tr:nth-child(2n):hover{background-color:#00000008;transform:scale(1.001)}.data-grid-container.tw-table-sm thead th{padding:8px 10px;font-size:11px}.data-grid-container.tw-table-sm thead th:first-child{padding-left:16px}.data-grid-container.tw-table-sm thead th:last-child{padding-right:16px}.data-grid-container.tw-table-sm tbody td{padding:8px 10px;font-size:12px;line-height:1.4}.data-grid-container.tw-table-sm tbody td:first-child{padding-left:16px}.data-grid-container.tw-table-sm tbody td:last-child{padding-right:16px}.data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:#e5f3ff}.data-grid-container.loading-overlay{position:relative}.data-grid-container.loading-overlay:after{content:\"\";position:absolute;inset:0;background:#ffffffd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;animation:fadeIn .2s cubic-bezier(.4,0,.2,1)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.data-grid-container .tw-animate-pulse div{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.data-grid-container .data-grid-action-buttons button{position:relative;border:1px solid rgba(0,0,0,.08);background:transparent;outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:6px;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-action-buttons button cide-ele-icon{color:#6b7280;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-action-buttons button:hover:not(:disabled){background-color:#0000000a;border-color:#0000001f}.data-grid-container .data-grid-action-buttons button:hover:not(:disabled) cide-ele-icon{color:#374151;transform:scale(1.05)}.data-grid-container .data-grid-action-buttons button:active:not(:disabled){background-color:#00000014;border-color:#00000026;transform:scale(.95)}.data-grid-container .data-grid-action-buttons button:active:not(:disabled) cide-ele-icon{transform:scale(.98)}.data-grid-container .data-grid-action-buttons button:focus-visible{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f61f}.data-grid-container .data-grid-action-buttons button:disabled{cursor:not-allowed;opacity:.3;background:transparent!important;border-color:#0000000d}.data-grid-container .action-buttons{display:flex;gap:.25rem}.data-grid-container .action-buttons button{transition:all .15s ease-in-out}.data-grid-container .action-buttons button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.data-grid-container .action-buttons button:disabled{cursor:not-allowed;opacity:.5}.data-grid-container .pagination-controls{padding:12px 20px;border-top:1px solid rgba(0,0,0,.06);background:linear-gradient(180deg,#fafafa,#f7f7f7)}.data-grid-container .pagination-controls button{transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:6px}.data-grid-container .pagination-controls button:hover:not(:disabled){background-color:#0000000a;transform:scale(1.02)}.data-grid-container .pagination-controls button:active:not(:disabled){transform:scale(.98);background-color:#00000014}.data-grid-container .pagination-controls button:disabled{cursor:not-allowed;opacity:.3}.data-grid-container .pagination-controls button.active{background-color:#3b82f61a;color:#3b82f6;font-weight:500;box-shadow:0 0 0 1px #3b82f633}.data-grid-container .pagination-controls input[type=number]{transition:all .2s cubic-bezier(.4,0,.2,1);border:1px solid rgba(0,0,0,.06);border-radius:6px}.data-grid-container .pagination-controls input[type=number]:hover{border-color:#0000001a}.data-grid-container .pagination-controls input[type=number]:focus{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f614;background-color:#fff}.data-grid-container .status-badge{font-weight:500;letter-spacing:-.01em;padding:4px 12px;border-radius:12px;font-size:12px;display:inline-flex;align-items:center;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .status-badge.active{background-color:#34d39926;color:#059669;border:1px solid rgba(52,211,153,.3)}.data-grid-container .status-badge.active:hover{background-color:#34d39933}.data-grid-container .status-badge.inactive{background-color:#f8717126;color:#dc2626;border:1px solid rgba(248,113,113,.3)}.data-grid-container .status-badge.inactive:hover{background-color:#f8717133}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper{transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper:hover:not(:has(input:disabled)){background-color:#00000005}.data-grid-container .data-grid-search-input ::ng-deep input{font-size:13px;font-weight:400;color:#1f2937;transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:8px}.data-grid-container .data-grid-search-input ::ng-deep input::placeholder{color:#9ca3af;font-weight:400}.data-grid-container .data-grid-search-input ::ng-deep input:focus{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f614;background-color:#fff}.data-grid-container .data-grid-search-input ::ng-deep input:disabled{background-color:#00000005;color:#9ca3af;cursor:not-allowed}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-leading-icon cide-ele-icon{color:#9ca3af;transition:color .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-search-input ::ng-deep input:focus~.cide-input-leading-icon cide-ele-icon,.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper:has(input:focus) .cide-input-leading-icon cide-ele-icon{color:#6b7280}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]{border:1px solid #e5e7eb;background-color:#fafafa;border-radius:8px}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]:hover:not(:has(input:disabled)){border-color:#d1d5db;background-color:#fff}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]:has(input:focus){border-color:#3b82f64d;background-color:#fff}.data-grid-container .search-input{position:relative}.data-grid-container .search-input input{transition:all .15s ease-in-out}.data-grid-container .search-input input:focus{box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .search-input .search-icon{pointer-events:none}.data-grid-container .column-menu-dropdown{animation:dropdownFadeIn .15s cubic-bezier(.4,0,.2,1);box-shadow:0 10px 25px #0000001a,0 4px 10px #0000000d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.05)}.data-grid-container .column-menu-dropdown button{font-size:13px;font-weight:400;letter-spacing:-.01em;text-align:left;transition:all .15s cubic-bezier(.4,0,.2,1)}.data-grid-container .column-menu-dropdown button:hover{background-color:#3b82f60d;color:#1f2937}.data-grid-container .column-menu-dropdown button:hover cide-ele-icon{color:#3b82f6}.data-grid-container .column-menu-dropdown button:active{background-color:#3b82f61a;transform:scale(.98)}.data-grid-container .column-menu-dropdown .tw-uppercase{letter-spacing:.05em}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.data-grid-container .empty-state{padding:4rem 2rem;text-align:center}.data-grid-container .empty-state svg{margin:0 auto 1.5rem;opacity:.3;transition:all .3s cubic-bezier(.4,0,.2,1)}.data-grid-container .empty-state svg:hover{opacity:.5;transform:scale(1.05)}.data-grid-container .empty-state h3{margin-bottom:.75rem;font-weight:600;color:#374151;font-size:16px;letter-spacing:-.01em}.data-grid-container .empty-state p{color:#6b7280;font-size:14px;line-height:1.5}.data-grid-container.tw-h-full tbody tr:only-child td{height:100%;vertical-align:middle}.data-grid-container.tw-h-full table.empty-table{height:100%}.data-grid-container.tw-h-full tbody tr:only-child{height:100%}@media (max-width: 640px){.data-grid-container .tw-px-6{padding-left:1rem;padding-right:1rem}.data-grid-container .pagination-controls{flex-direction:column;gap:1rem}.data-grid-container .pagination-controls .flex{justify-content:center}.data-grid-container .pagination-info{display:none}.data-grid-container .search-actions{flex-direction:column;gap:1rem}}@media (prefers-color-scheme: dark){.data-grid-container.dark-mode{background-color:#1f2937;color:#f9fafb}.data-grid-container.dark-mode table{background-color:#1f2937}.data-grid-container.dark-mode thead{background-color:#374151}.data-grid-container.dark-mode tbody tr{border-color:#374151}.data-grid-container.dark-mode tbody tr:hover{background-color:#374151}.data-grid-container.dark-mode .tw-text-gray-900{color:#f9fafb!important}.data-grid-container.dark-mode .tw-text-gray-600{color:#d1d5db!important}.data-grid-container.dark-mode .tw-text-gray-500{color:#9ca3af!important}}.data-grid-container.drag-drop-enabled tbody tr{transition:all .2s ease}.data-grid-container.drag-drop-enabled tbody tr:hover{background-color:#f3f4f6}.data-grid-container.drag-drop-enabled tbody tr.tw-opacity-50{background-color:#dbeafecc;border:2px dashed #3b82f6;border-radius:4px}.data-grid-container.drag-drop-enabled tbody tr.tw-bg-blue-50{background-color:#eff6ffe6}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]{cursor:move;position:relative}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:hover{background-color:#f8fafc;box-shadow:0 1px 3px #0000001a}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:active{cursor:grabbing}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]{position:relative}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]:before{content:\"\";position:absolute;top:-2px;left:0;right:0;height:2px;background:linear-gradient(90deg,#3b82f6,#60a5fa);z-index:10}.data-grid-container.tree-enabled tbody tr td:first-child{position:relative}.data-grid-container.tree-enabled tbody tr td:first-child button{transition:all .15s ease}.data-grid-container.tree-enabled tbody tr td:first-child button:hover{background-color:#f3f4f6;border-radius:2px}.data-grid-container.tree-enabled tbody tr td:first-child button svg{transition:transform .2s ease}.data-grid-container.tree-enabled tbody tr[style*=padding-left]{border-left:2px solid transparent}.data-grid-container.tree-enabled tbody tr[style*=padding-left]:hover{border-left-color:#e5e7eb}.tree-level-0{border-bottom:2px solid #e5e7eb!important;background-color:#fff}.tree-level-0:hover{background-color:#f5f5f5!important}.tree-level-0 td:first-child{font-weight:600}.tree-level-1{border-bottom:1px solid #d1d5db!important;background-color:#fafafa}.tree-level-1:hover{background-color:#f1f5f9!important}.tree-level-1 td:first-child{font-weight:500}.tree-level-2{border-bottom:1px solid #d1d5db!important;background-color:#f9fafb}.tree-level-2:hover{background-color:#f3f4f6!important}.tree-level-2 td:first-child{font-weight:400}.tree-level-deep{border-bottom:1px solid #e5e7eb!important;background-color:#fefefe}.tree-level-deep:hover{background-color:#f9fafb!important}.tree-level-deep td:first-child{font-weight:300}table td{box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}table td.tw-overflow-hidden{overflow:hidden;text-overflow:ellipsis}table td:first-child{min-width:150px}table td:first-child>div{display:flex;align-items:center;min-width:0}table td:first-child>div .tw-flex{min-width:0}table td .tw-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { 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.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: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }] });
|
|
10396
10443
|
}
|
|
10397
10444
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleDataGridComponent, decorators: [{
|
|
10398
10445
|
type: Component,
|
|
@@ -10404,7 +10451,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
10404
10451
|
CideSelectComponent,
|
|
10405
10452
|
CideIconComponent,
|
|
10406
10453
|
CideEleButtonComponent
|
|
10407
|
-
], template: " <!-- Data Grid Component -->\r\n <div class=\"data-grid-container tw-bg-white tw-shadow tw-rounded-lg tw-overflow-visible tw-flex tw-flex-col\" \r\n [ngClass]=\"[\r\n mergedConfig().tableClass || '',\r\n mergedConfig().fullHeight ? 'tw-h-full' : '',\r\n isDragDropEnabled() ? 'drag-drop-enabled' : '',\r\n isTreeEnabled() ? 'tree-enabled' : ''\r\n ]\">\r\n \r\n <!-- Header Section -->\r\n @if (mergedConfig().title || mergedConfig().subtitle) {\r\n <div class=\"tw-px-3 tw-py-2 tw-border-b tw-border-gray-200\">\r\n @if (mergedConfig().title) {\r\n <h3 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">\r\n {{ mergedConfig().title }}\r\n </h3>\r\n }\r\n @if (mergedConfig().subtitle) {\r\n <p class=\"tw-text-sm tw-text-gray-600 tw-mt-0.5\">\r\n {{ mergedConfig().subtitle }}\r\n </p>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Search Section -->\r\n @if (searchConfig.enabled) {\r\n <div class=\"tw-px-3 tw-py-1.5 tw-border-b tw-border-gray-200\">\r\n <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n <!-- Left Side: Search Input and Action Icons -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-1.5\">\r\n <!-- Search Input - Apple Style -->\r\n <div class=\"tw-max-w-md data-grid-search-input\">\r\n <cide-ele-input [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\" id=\"search-input\" type=\"text\"\r\n [ngModel]=\"searchQuery()\"\r\n (ngModelChange)=\"updateSearchQuery($event)\"\r\n [placeholder]=\"searchConfig.placeholder\"\r\n [disabled]=\"loading() || isRefreshing()\"\r\n leadingIcon=\"search\"\r\n fill=\"outline\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n \r\n <!-- Action Icons (Filter, Sort, Download) - Apple Style Compact -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-1 data-grid-action-buttons\">\r\n <!-- Filter Button -->\r\n <button type=\"button\"\r\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200\"\r\n title=\"Filter\"\r\n (click)=\"onActionClick(null, { key: 'filter', label: 'Filter', icon: 'filter_list', variant: 'ghost', onClick: 'filter' })\">\r\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">filter_list</cide-ele-icon>\r\n </button>\r\n \r\n <!-- Download/Export Button with Dropdown -->\r\n <div class=\"tw-relative\">\r\n <button type=\"button\"\r\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200\"\r\n title=\"Export\"\r\n (click)=\"toggleExportMenu($event)\">\r\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">file_download</cide-ele-icon>\r\n </button>\r\n \r\n <!-- Export Dropdown Menu - Improved Design -->\r\n @if (showExportMenu()) {\r\n <div class=\"tw-absolute tw-right-0 tw-mt-2 tw-w-56 tw-bg-white tw-rounded-lg tw-shadow-xl tw-border tw-border-gray-200 tw-z-50 tw-overflow-hidden\"\r\n (click)=\"$event.stopPropagation()\">\r\n <div class=\"tw-py-1.5\">\r\n <div class=\"tw-px-3 tw-py-2 tw-bg-gray-50 tw-border-b tw-border-gray-200\">\r\n <span class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-tracking-wider\">Export Options</span>\r\n </div>\r\n <button type=\"button\"\r\n class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-green-50 hover:tw-text-green-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\r\n (click)=\"exportData('csv')\">\r\n <div class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-green-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-green-600\">description</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-font-medium\">CSV</div>\r\n <div class=\"tw-text-xs tw-text-gray-500\">Comma separated values</div>\r\n </div>\r\n </button>\r\n <button type=\"button\"\r\n class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-blue-50 hover:tw-text-blue-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\r\n (click)=\"exportData('excel')\">\r\n <div class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">table_chart</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-font-medium\">Excel</div>\r\n <div class=\"tw-text-xs tw-text-gray-500\">Microsoft Excel format</div>\r\n </div>\r\n </button>\r\n <button type=\"button\"\r\n class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-red-50 hover:tw-text-red-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\r\n (click)=\"exportData('pdf')\">\r\n <div class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-red-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-red-600\">picture_as_pdf</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-font-medium\">PDF</div>\r\n <div class=\"tw-text-xs tw-text-gray-500\">Portable document format</div>\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Right Side: Drag Order Actions -->\r\n @if (isDragDropEnabled() && (isDragging() || hasOrderChanged())) {\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <button cideEleButton \r\n variant=\"outline\" \r\n size=\"sm\" \r\n type=\"button\"\r\n (click)=\"onActionClick(null, { key: 'reset-order', label: 'Reset Order', icon: 'undo', variant: 'outline', onClick: 'resetOrder' })\"\r\n class=\"tw-text-blue-700 tw-border-blue-300 hover:tw-bg-blue-100\">\r\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">undo</cide-ele-icon>\r\n Reset Order\r\n </button>\r\n <button cideEleButton \r\n variant=\"primary\" \r\n size=\"sm\" \r\n type=\"button\"\r\n (click)=\"onActionClick(null, { key: 'save-order', label: 'Save Order', icon: 'save', variant: 'primary', onClick: 'saveOrder' })\"\r\n class=\"tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white\">\r\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">save</cide-ele-icon>\r\n Save Order\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Table Section -->\r\n <div class=\"tw-overflow-x-auto tw-relative\"\r\n [ngClass]=\"{\r\n 'tw-flex-1 tw-min-h-0': mergedConfig().fullHeight,\r\n 'tw-overflow-y-auto': scrollConfig?.enabled,\r\n 'tw-max-h-full': scrollConfig?.enabled\r\n }\"\r\n [style.maxHeight]=\"scrollConfig?.enabled ? scrollConfig?.maxHeight : null\"\r\n [style.minHeight]=\"scrollConfig?.enabled ? scrollConfig?.minHeight : null\">\r\n <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 tw-h-full tw-table-fixed\"\r\n [class.empty-table]=\"displayedData.length === 0\"\r\n [ngClass]=\"{\r\n 'tw-table-striped': mergedConfig().striped,\r\n 'tw-border': mergedConfig().bordered,\r\n 'tw-table-sm': mergedConfig().compact\r\n }\"\r\n style=\"table-layout: fixed;\">\r\n \r\n <!-- Table Header -->\r\n <thead class=\"tw-bg-gray-50\" \r\n [ngClass]=\"[\r\n mergedConfig().headerClass || '',\r\n scrollConfig?.enabled && scrollConfig?.stickyHeader ? 'tw-sticky tw-top-0 tw-z-10' : ''\r\n ]\">\r\n <tr>\r\n @for (column of visibleColumns(); track column.key) {\r\n <th\r\n class=\"tw-px-3 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-500 tw-uppercase tw-tracking-wider tw-relative\"\r\n [ngClass]=\"[\r\n getColumnWidthClass(column.width),\r\n getColumnMaxWidthClass(column.width),\r\n column.align === 'center' ? 'tw-text-center' : '',\r\n column.align === 'right' ? 'tw-text-right' : ''\r\n ]\"\r\n [title]=\"column.header\">\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-gap-1\">\r\n <span class=\"tw-truncate tw-flex-1\">{{ column.header }}</span>\r\n \r\n <!-- Active Filter Indicator -->\r\n @if (isColumnFiltered(column.key)) {\r\n <div class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded tw-bg-blue-100 tw-text-blue-700 tw-text-xs tw-font-medium tw-mr-1\">\r\n <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-mr-0.5\">filter_alt</cide-ele-icon>\r\n {{ getActiveFilterCount(column.key) }}\r\n </div>\r\n }\r\n \r\n <!-- Column Menu Trigger (Three Dots Icon) -->\r\n @if (mergedConfig().columnMenu?.enabled) {\r\n <button\r\n type=\"button\"\r\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-rounded tw-text-gray-600 hover:tw-text-gray-800 hover:tw-bg-gray-100 tw-transition-all column-menu-trigger\"\r\n [class.tw-text-blue-600]=\"isColumnMenuOpen(column.key) || isColumnFiltered(column.key)\"\r\n [class.tw-bg-blue-50]=\"isColumnFiltered(column.key)\"\r\n (click)=\"toggleColumnMenu(column.key, $event)\"\r\n title=\"Column options\">\r\n <cide-ele-icon class=\"tw-w-5 tw-h-4\">more_vert</cide-ele-icon>\r\n </button>\r\n }\r\n </div>\r\n\r\n <!-- Column Menu Dropdown -->\r\n @if (isColumnMenuOpen(column.key)) {\r\n <div class=\"column-menu-dropdown tw-absolute tw-z-50 tw-mt-2 tw-w-56 tw-rounded-lg tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5\">\r\n <div class=\"tw-py-1\">\r\n <!-- Sort Options -->\r\n @if (mergedConfig().columnMenu?.showSort && column.sortable !== false) {\r\n <button\r\n type=\"button\"\r\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n (click)=\"onColumnSort(column, 'asc')\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_upward</cide-ele-icon>\r\n Ascending\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n (click)=\"onColumnSort(column, 'desc')\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_downward</cide-ele-icon>\r\n Descending\r\n </button>\r\n <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\r\n }\r\n\r\n <!-- Filter Option -->\r\n @if (mergedConfig().columnMenu?.showFilter && column.filterable !== false) {\r\n <!-- Check if there's a custom filter renderer template -->\r\n @if (column.filterRenderer && templateRenderers[column.filterRenderer]) {\r\n <div class=\"tw-px-4 tw-py-2\">\r\n <ng-container [ngTemplateOutlet]=\"$any(templateRenderers[column.filterRenderer])\"\r\n [ngTemplateOutletContext]=\"{ $implicit: column, column: column, onFilter: onColumnFilter.bind(this) }\">\r\n </ng-container>\r\n </div>\r\n } @else {\r\n <!-- Excel-style Filter Button -->\r\n <button\r\n type=\"button\"\r\n class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n [class.tw-bg-blue-50]=\"isFilterPanelOpen(column.key)\"\r\n (click)=\"toggleFilterPanel(column.key, $event)\">\r\n <div class=\"tw-flex tw-items-center\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">filter_list</cide-ele-icon>\r\n Filter\r\n </div>\r\n <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-gray-400\">\r\n {{ isFilterPanelOpen(column.key) ? 'expand_less' : 'expand_more' }}\r\n </cide-ele-icon>\r\n </button>\r\n \r\n <!-- Excel-style Filter Panel -->\r\n @if (isFilterPanelOpen(column.key)) {\r\n <div class=\"tw-px-2 tw-py-2 tw-bg-gray-50\" (click)=\"$event.stopPropagation()\">\r\n <!-- Search box -->\r\n <div class=\"tw-px-2 tw-mb-2\">\r\n <input\r\n type=\"text\"\r\n class=\"tw-w-full tw-px-2 tw-py-1 tw-text-xs tw-border tw-border-gray-300 tw-rounded focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-blue-500\"\r\n placeholder=\"Search...\"\r\n [(ngModel)]=\"filterSearchTerm\"\r\n (click)=\"$event.stopPropagation()\">\r\n </div>\r\n \r\n <!-- Select All / Deselect All -->\r\n <div class=\"tw-px-2 tw-mb-1 tw-flex tw-gap-2\">\r\n <button\r\n type=\"button\"\r\n class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-700\"\r\n (click)=\"selectAllFilterValues(column); $event.stopPropagation()\">\r\n Select All\r\n </button>\r\n <span class=\"tw-text-xs tw-text-gray-400\">|</span>\r\n <button\r\n type=\"button\"\r\n class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-700\"\r\n (click)=\"deselectAllFilterValues(column); $event.stopPropagation()\">\r\n Clear\r\n </button>\r\n </div>\r\n \r\n <!-- Filter values list -->\r\n <div class=\"tw-max-h-48 tw-overflow-y-auto\">\r\n @for (item of getUniqueColumnValues(column); track item.value) {\r\n <label class=\"tw-flex tw-items-center tw-px-2 tw-py-1 tw-text-xs hover:tw-bg-white tw-cursor-pointer tw-rounded\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"tw-mr-2 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500\"\r\n [checked]=\"item.checked\"\r\n (change)=\"toggleFilterValue(column, item.value, $any($event.target).checked)\"\r\n (click)=\"$event.stopPropagation()\">\r\n <span class=\"tw-flex-1 tw-truncate\">{{ item.label }}</span>\r\n <span class=\"tw-text-gray-400 tw-ml-1\">({{ item.count }})</span>\r\n </label>\r\n }\r\n </div>\r\n </div>\r\n }\r\n }\r\n <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\r\n }\r\n\r\n <!-- Autosize Option -->\r\n @if (mergedConfig().columnMenu?.showAutosize) {\r\n <button\r\n type=\"button\"\r\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n (click)=\"onColumnAutosize(column)\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">fit_screen</cide-ele-icon>\r\n Autosize\r\n </button>\r\n }\r\n\r\n <!-- Group By Column Option -->\r\n @if (mergedConfig().columnMenu?.showGroupBy && column.groupable !== false) {\r\n <button\r\n type=\"button\"\r\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n (click)=\"onColumnGroupBy(column)\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">group_work</cide-ele-icon>\r\n Group By Column\r\n </button>\r\n }\r\n\r\n <!-- Manage Columns Option -->\r\n @if (mergedConfig().columnMenu?.showManageColumns) {\r\n <button\r\n type=\"button\"\r\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n (click)=\"onManageColumns()\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">view_column</cide-ele-icon>\r\n Manage Columns\r\n </button>\r\n }\r\n\r\n <!-- Reset Columns Option -->\r\n @if (mergedConfig().columnMenu?.showResetColumns) {\r\n <button\r\n type=\"button\"\r\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n (click)=\"onColumnReset()\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">refresh</cide-ele-icon>\r\n Reset Columns\r\n </button>\r\n }\r\n\r\n <!-- Hide Column Option -->\r\n @if (mergedConfig().columnMenu?.showHideColumn && column.hideable !== false) {\r\n <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\r\n <button\r\n type=\"button\"\r\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n (click)=\"onColumnHide(column)\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">visibility_off</cide-ele-icon>\r\n Hide Column\r\n </button>\r\n }\r\n\r\n <!-- Aggregation Select Option -->\r\n @if (mergedConfig().columnMenu?.showAggregation && column.aggregatable !== false) {\r\n <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\r\n <div class=\"tw-px-4 tw-py-2 tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase\">Aggregation</div>\r\n <button\r\n type=\"button\"\r\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n (click)=\"onColumnAggregation(column, 'sum')\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">functions</cide-ele-icon>\r\n Sum\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n (click)=\"onColumnAggregation(column, 'avg')\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">analytics</cide-ele-icon>\r\n Average\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n (click)=\"onColumnAggregation(column, 'count')\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">tag</cide-ele-icon>\r\n Count\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n (click)=\"onColumnAggregation(column, 'min')\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_downward</cide-ele-icon>\r\n Min\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n (click)=\"onColumnAggregation(column, 'max')\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_upward</cide-ele-icon>\r\n Max\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n\r\n <!-- Table Body -->\r\n <tbody class=\"tw-bg-white tw-divide-y tw-divide-gray-200\">\r\n @if (loading() || isRefreshing() || pageChangeLoading()) {\r\n <!-- Skeleton Loading Rows -->\r\n @for (skeletonItem of getSkeletonArray(); track $index) {\r\n <tr class=\"tw-animate-pulse tw-border-b tw-border-gray-200\">\r\n @for (column of columns; track column.key) {\r\n <td class=\"tw-px-3 tw-py-2 tw-whitespace-nowrap\"\r\n [ngClass]=\"[\r\n getColumnWidthClass(column.width),\r\n getColumnMaxWidthClass(column.width)\r\n ]\">\r\n <div class=\"tw-h-2 tw-bg-gray-200 tw-rounded tw-w-3/4\"></div>\r\n </td>\r\n }\r\n </tr>\r\n }\r\n } @else {\r\n @for (item of displayedData; track trackByFn($index, item)) {\r\n <tr class=\"tw-group hover:tw-bg-gray-50 tw-border-b-2 tw-border-gray-200\"\r\n [ngClass]=\"[\r\n mergedConfig().rowClass || '',\r\n isRefreshing() ? 'tw-opacity-60 tw-pointer-events-none' : '',\r\n isDragDropEnabled() ? 'tw-cursor-move tw-border-2 tw-border-transparent' : '',\r\n !isDragDropEnabled() ? 'tw-transition-colors tw-duration-150' : '',\r\n isTreeEnabled() ? getTreeLevelClass(item) : ''\r\n ]\"\r\n [style.border-color]=\"isDragOverRow === $index ? '#3b82f6' : 'transparent'\"\r\n [style.background-color]=\"isDragOverRow === $index ? '#eff6ff' : ''\"\r\n (click)=\"onRowClick(item)\"\r\n (keydown.enter)=\"onRowClick(item)\"\r\n (keydown.space)=\"onRowClick(item)\"\r\n [class.tw-cursor-pointer]=\"mergedConfig().onRowClick && !isDragDropEnabled()\"\r\n [tabindex]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 0 : -1\"\r\n [attr.role]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'button' : null\"\r\n [attr.aria-label]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'Select row' : null\"\r\n [draggable]=\"isDragDropEnabled()\"\r\n (dragstart)=\"onDragStart($event, item, $index)\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event, item, $index)\"\r\n (dragend)=\"onDragEnd($event)\">\r\n \r\n @for (column of columns; track column.key) {\r\n <td class=\"tw-pr-3 tw-py-1 tw-relative\"\r\n [ngClass]=\"[\r\n getColumnWidthClass(column.width),\r\n getColumnMaxWidthClass(column.width),\r\n mergedConfig().cellClass || '',\r\n column.align === 'center' ? 'tw-text-center' : '',\r\n column.align === 'right' ? 'tw-text-right' : '',\r\n column.truncate !== false ? 'tw-whitespace-nowrap' : 'tw-whitespace-normal'\r\n ]\"\r\n [style.paddingLeft]=\"isTreeEnabled() && $index === 0 ? getTreeIndentStyle(item) : '12px'\"\r\n [style.maxWidth]=\"getColumnMaxWidthClass(column.width) === 'tw-max-w-xs' ? '200px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-sm' ? '300px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-md' ? '400px' : 'none'\"\r\n [style.minWidth]=\"isTreeEnabled() && $index === 0 ? '150px' : '100px'\">\r\n <!-- Tree Expand/Collapse Button (only for first column when tree is enabled) -->\r\n @if (isTreeEnabled() && $index === 0) {\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <!-- Tree Indentation -->\r\n <div class=\"tw-flex tw-items-center\">\r\n @if (hasChildren(item)) {\r\n <button \r\n variant=\"outline\"\r\n size=\"xs\"\r\n type=\"button\"\r\n (click)=\"onActionClick(item, { key: 'toggle-expand', label: 'Toggle', icon: '', variant: 'ghost', onClick: 'toggle-expand' }); $event.stopPropagation()\"\r\n class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-text-gray-500 hover:tw-text-gray-700 tw-rounded\"\r\n [class.tw-transition-colors]=\"!isDragDropEnabled()\"\r\n [title]=\"isItemExpanded(item) ? 'Collapse' : 'Expand'\">\r\n <cide-ele-icon \r\n class=\"tw-w-3 tw-h-3\"\r\n [class.tw-transition-transform]=\"!isDragDropEnabled()\"\r\n [class.tw-rotate-90]=\"isItemExpanded(item)\"\r\n size=\"xs\">\r\n chevron_right\r\n </cide-ele-icon>\r\n </button>\r\n } @else {\r\n <div class=\"tw-w-8 tw-h-5 tw-flex tw-items-center tw-justify-center\">\r\n <!-- <div class=\"tw-w-1 tw-h-1 tw-bg-gray-300 tw-rounded-full\"></div> -->\r\n </div>\r\n }\r\n </div>\r\n \r\n <!-- Cell Content -->\r\n <div class=\"tw-flex-1 tw-w-full\">\r\n @if (column.type === 'text') {\r\n <p class=\"tw-text-sm tw-text-gray-900\"\r\n [class.tw-truncate]=\"column.truncate\"\r\n [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\r\n {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\r\n </p>\r\n } @else if (column.type === 'number') {\r\n <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\r\n {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\r\n </span>\r\n } @else if (column.type === 'date') {\r\n <span class=\"tw-text-sm tw-text-gray-600\">\r\n {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\r\n </span>\r\n } @else if (column.type === 'boolean') {\r\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\r\n [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\r\n {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\r\n </span>\r\n } @else if (column.type === 'status' && column.statusConfig) {\r\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\r\n [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\r\n {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\r\n </span>\r\n } @else if (column.type === 'actions' && column.actions) {\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n @for (action of column.actions; track action.key) {\r\n <button\r\n cideEleButton\r\n [variant]=\"action.variant || 'ghost'\"\r\n size=\"xs\"\r\n type=\"button\"\r\n (click)=\"onActionClick(item, action); $event.stopPropagation()\"\r\n [title]=\"action.tooltip || action.label\"\r\n [disabled]=\"isRefreshing()\"\r\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\r\n [class.tw-transition-colors]=\"!isDragDropEnabled()\"\r\n [ngClass]=\"{\r\n 'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\r\n 'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\r\n 'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\r\n 'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\r\n }\">\r\n @if (action.icon) {\r\n <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n <path d=\"M10 12l-5-5h10l-5 5z\"/>\r\n </svg>\r\n }\r\n {{ action.label }}\r\n </button>\r\n }\r\n </div>\r\n } @else if (column.type === 'custom') {\r\n <!-- Template Renderer -->\r\n @if (column.renderer && isTemplateRenderer(column.renderer)) {\r\n <ng-container \r\n [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\r\n [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\r\n </ng-container>\r\n }\r\n <!-- Default rendering -->\r\n @else {\r\n <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Regular cell content (non-tree or non-first column) -->\r\n @if (column.type === 'text') {\r\n <p class=\"tw-text-sm tw-text-gray-900\"\r\n [class.tw-truncate]=\"column.truncate\"\r\n [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\r\n {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\r\n </p>\r\n } @else if (column.type === 'number') {\r\n <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\r\n {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\r\n </span>\r\n } @else if (column.type === 'date') {\r\n <span class=\"tw-text-sm tw-text-gray-600\">\r\n {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\r\n </span>\r\n } @else if (column.type === 'boolean') {\r\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\r\n [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\r\n {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\r\n </span>\r\n } @else if (column.type === 'status' && column.statusConfig) {\r\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\r\n [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\r\n {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\r\n </span>\r\n } @else if (column.type === 'actions' && column.actions) {\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n @for (action of column.actions; track action.key) {\r\n <button\r\n cideEleButton\r\n [variant]=\"action.variant || 'ghost'\"\r\n size=\"xs\"\r\n type=\"button\"\r\n (click)=\"onActionClick(item, action); $event.stopPropagation()\"\r\n [title]=\"action.tooltip || action.label\"\r\n [disabled]=\"isRefreshing()\"\r\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\r\n [class.tw-transition-colors]=\"!isDragDropEnabled()\"\r\n [ngClass]=\"{\r\n 'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\r\n 'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\r\n 'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\r\n 'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\r\n }\">\r\n @if (action.icon) {\r\n <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n <path d=\"M10 12l-5-5h10l-5 5z\"/>\r\n </svg>\r\n }\r\n {{ action.label }}\r\n </button>\r\n }\r\n </div>\r\n } @else if (column.type === 'custom') {\r\n <!-- Template Renderer -->\r\n @if (column.renderer && isTemplateRenderer(column.renderer)) {\r\n <ng-container \r\n [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\r\n [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\r\n </ng-container>\r\n }\r\n <!-- Default rendering -->\r\n @else {\r\n <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\r\n }\r\n }\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n \r\n <!-- Empty State -->\r\n @if (displayedData.length === 0) {\r\n <tr class=\"tw-h-full\">\r\n <td [attr.colspan]=\"columns.length\" class=\"tw-px-6 tw-py-22 tw-text-center tw-h-full tw-align-middle\">\r\n <div class=\"tw-text-gray-500 tw-flex tw-flex-col tw-items-center tw-justify-center tw-min-h-[300px]\">\r\n <svg class=\"tw-mx-auto tw-h-12 tw-w-12 tw-text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"></path>\r\n </svg>\r\n <h3 class=\"tw-mt-2 tw-text-sm tw-font-medium tw-text-gray-900\">No data found</h3>\r\n <p class=\"tw-mt-1 tw-text-sm tw-text-gray-500\">\r\n @if (searchQuery()) {\r\n No results match your search criteria.\r\n } @else {\r\n There are no items to display.\r\n }\r\n </p>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <!-- Pagination Section -->\r\n @if (paginationConfig.enabled && totalItems() > 0) {\r\n <div class=\"tw-px-3 tw-py-0 tw-border-t tw-border-gray-200 tw-bg-white tw-relative tw-z-20\"\r\n [class.tw-opacity-60]=\"isRefreshing()\">\r\n \r\n <!-- Results Info and Page Size -->\r\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-1 sm:tw-space-y-0\">\r\n \r\n <!-- Results Info -->\r\n @if (paginationConfig.showPageInfo) {\r\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n <p class=\"tw-text-sm tw-text-gray-700\">\r\n Showing {{ getItemRangeText() }} results\r\n </p>\r\n \r\n <!-- Page Size Selector -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-500\">view_list</cide-ele-icon>\r\n <span class=\"tw-text-sm tw-text-gray-700\">Per page:</span>\r\n <div class=\"tw-w-16 tw-relative\">\r\n <cide-ele-select\r\n [labelHide]=\"true\"\r\n [ngModel]=\"pageSize()\"\r\n (ngModelChange)=\"updatePageSize($event)\"\r\n [options]=\"getPageSizeOptions()\"\r\n [disabled]=\"isRefreshing()\"\r\n fill=\"outline\"\r\n size=\"xs\"\r\n class=\"tw-z-30\">\r\n </cide-ele-select>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Pagination Controls -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n \r\n <!-- Previous/Next and Page Numbers -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\r\n \r\n <!-- First Page -->\r\n <button\r\n type=\"button\"\r\n (click)=\"onPageChange(1)\"\r\n [disabled]=\"currentPage() === 1 || isRefreshing()\"\r\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n title=\"First page\">\r\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">first_page</cide-ele-icon>\r\n </button>\r\n \r\n <!-- Previous Page -->\r\n <button\r\n type=\"button\"\r\n (click)=\"previousPage()\"\r\n [disabled]=\"!hasPreviousPage() || isRefreshing()\"\r\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n title=\"Previous page\">\r\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">chevron_left</cide-ele-icon>\r\n </button>\r\n \r\n <!-- Page Numbers -->\r\n @for (page of getEnhancedPageNumbers(); track page) {\r\n @if (page === '...') {\r\n <span class=\"tw-px-2 tw-py-2 tw-text-sm tw-text-gray-500\">...</span>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n (click)=\"onPageChange(page)\"\r\n [disabled]=\"isRefreshing()\"\r\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-p-0 tw-rounded tw-text-xs tw-font-medium tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n [ngClass]=\"{\r\n 'tw-bg-blue-600 tw-text-white hover:tw-bg-blue-700': currentPage() === page,\r\n 'tw-bg-white tw-text-gray-700 tw-border tw-border-gray-300 hover:tw-bg-gray-50': currentPage() !== page\r\n }\"\r\n [title]=\"'Page ' + page\">\r\n {{ page }}\r\n </button>\r\n }\r\n }\r\n \r\n <!-- Next Page -->\r\n <button\r\n type=\"button\"\r\n (click)=\"nextPage()\"\r\n [disabled]=\"!hasNextPage() || isRefreshing()\"\r\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n title=\"Next page\">\r\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">chevron_right</cide-ele-icon>\r\n </button>\r\n \r\n <!-- Last Page -->\r\n <button\r\n type=\"button\"\r\n (click)=\"onPageChange(totalPages())\"\r\n [disabled]=\"currentPage() === totalPages() || isRefreshing()\"\r\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n title=\"Last page\">\r\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">last_page</cide-ele-icon>\r\n </button>\r\n \r\n </div>\r\n\r\n <!-- Quick Jump and Refresh -->\r\n @if (paginationConfig.showQuickJump || paginationConfig.showRefresh) {\r\n <div class=\"tw-flex tw-items-center tw-space-x-1 tw-border-l tw-border-gray-200 tw-pl-2\">\r\n \r\n <!-- Quick Jump -->\r\n @if (paginationConfig.showQuickJump) {\r\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\r\n <span class=\"tw-text-sm tw-text-gray-700\">Go to:</span>\r\n <div class=\"tw-w-16\">\r\n <cide-ele-input id=\"jump-to-page-input\" type=\"number\" [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\"\r\n [(ngModel)]=\"jumpToPage\" [min]=\"1\" [max]=\"totalPages()\"\r\n [disabled]=\"isRefreshing()\"\r\n size=\"xs\"\r\n (keydown.enter)=\"onJumpToPage()\">\r\n </cide-ele-input>\r\n </div>\r\n <button\r\n type=\"button\"\r\n (click)=\"onJumpToPage()\"\r\n [disabled]=\"isRefreshing()\"\r\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-p-0 tw-rounded tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-700 tw-border tw-border-gray-300 hover:tw-bg-gray-200 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n title=\"Go to page\">\r\n Go\r\n </button>\r\n </div>\r\n }\r\n \r\n <!-- Refresh Button -->\r\n @if (paginationConfig.showRefresh) {\r\n <button\r\n type=\"button\"\r\n (click)=\"onRefresh()\"\r\n [disabled]=\"isRefreshing()\"\r\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n title=\"Refresh\">\r\n @if (isRefreshing()) {\r\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4 tw-animate-spin\">refresh</cide-ele-icon>\r\n } @else {\r\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">refresh</cide-ele-icon>\r\n }\r\n </button>\r\n }\r\n </div>\r\n }\r\n \r\n </div>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".data-grid-container{width:100%;display:flex;flex-direction:column;min-height:400px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;color:#1f2937;background-color:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #0000000a,0 1px 2px #00000005;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.data-grid-container.tw-h-full{height:100%;min-height:100%}.data-grid-container .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}.data-grid-container .tw-overflow-x-auto.tw-flex-1{flex:1;min-height:0}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar{height:6px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af}.data-grid-container table{min-height:300px;border-collapse:separate;border-spacing:0;width:100%;background-color:#fff}.data-grid-container thead{background:linear-gradient(180deg,#fafafa,#f7f7f7);border-bottom:1px solid rgba(0,0,0,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.data-grid-container thead th{background:transparent;color:#6b7280;font-weight:500;font-size:12px;text-transform:none;letter-spacing:-.01em;padding:4px 10px;border-bottom:1px solid rgba(0,0,0,.06);text-align:left;white-space:nowrap;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container thead th:first-child{padding-left:12px}.data-grid-container thead th:last-child{padding-right:12px}.data-grid-container thead th:hover{background-color:#00000005}.data-grid-container thead th .column-menu-trigger{opacity:1;transition:all .2s cubic-bezier(.4,0,.2,1);margin-left:4px;cursor:pointer;padding:2px;border-radius:4px}.data-grid-container thead th .column-menu-trigger:hover{background-color:#0000000f}.data-grid-container tbody{background-color:#fff}.data-grid-container tbody td{padding:6px 10px;border-bottom:1px solid rgba(0,0,0,.03);color:#1f2937;font-size:13px;vertical-align:middle;line-height:1.5;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container tbody td:first-child{padding-left:12px}.data-grid-container tbody td:last-child{padding-right:12px}.data-grid-container tbody tr{background-color:#fff;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container tbody tr:hover{background-color:#00000005;transform:scale(1.001)}.data-grid-container tbody tr:hover td{border-bottom-color:#0000000a}.data-grid-container tbody tr:active{background-color:#00000008;transform:scale(.999)}.data-grid-container.tw-h-full table,.data-grid-container.tw-h-full tbody{height:100%}.data-grid-container.tw-table-striped tbody tr:nth-child(2n){background-color:#00000004}.data-grid-container.tw-table-striped tbody tr:nth-child(2n):hover{background-color:#00000008;transform:scale(1.001)}.data-grid-container.tw-table-sm thead th{padding:8px 10px;font-size:11px}.data-grid-container.tw-table-sm thead th:first-child{padding-left:16px}.data-grid-container.tw-table-sm thead th:last-child{padding-right:16px}.data-grid-container.tw-table-sm tbody td{padding:8px 10px;font-size:12px;line-height:1.4}.data-grid-container.tw-table-sm tbody td:first-child{padding-left:16px}.data-grid-container.tw-table-sm tbody td:last-child{padding-right:16px}.data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:#e5f3ff}.data-grid-container.loading-overlay{position:relative}.data-grid-container.loading-overlay:after{content:\"\";position:absolute;inset:0;background:#ffffffd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;animation:fadeIn .2s cubic-bezier(.4,0,.2,1)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.data-grid-container .tw-animate-pulse div{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.data-grid-container .data-grid-action-buttons button{position:relative;border:1px solid rgba(0,0,0,.08);background:transparent;outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:6px;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-action-buttons button cide-ele-icon{color:#6b7280;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-action-buttons button:hover:not(:disabled){background-color:#0000000a;border-color:#0000001f}.data-grid-container .data-grid-action-buttons button:hover:not(:disabled) cide-ele-icon{color:#374151;transform:scale(1.05)}.data-grid-container .data-grid-action-buttons button:active:not(:disabled){background-color:#00000014;border-color:#00000026;transform:scale(.95)}.data-grid-container .data-grid-action-buttons button:active:not(:disabled) cide-ele-icon{transform:scale(.98)}.data-grid-container .data-grid-action-buttons button:focus-visible{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f61f}.data-grid-container .data-grid-action-buttons button:disabled{cursor:not-allowed;opacity:.3;background:transparent!important;border-color:#0000000d}.data-grid-container .action-buttons{display:flex;gap:.25rem}.data-grid-container .action-buttons button{transition:all .15s ease-in-out}.data-grid-container .action-buttons button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.data-grid-container .action-buttons button:disabled{cursor:not-allowed;opacity:.5}.data-grid-container .pagination-controls{padding:12px 20px;border-top:1px solid rgba(0,0,0,.06);background:linear-gradient(180deg,#fafafa,#f7f7f7)}.data-grid-container .pagination-controls button{transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:6px}.data-grid-container .pagination-controls button:hover:not(:disabled){background-color:#0000000a;transform:scale(1.02)}.data-grid-container .pagination-controls button:active:not(:disabled){transform:scale(.98);background-color:#00000014}.data-grid-container .pagination-controls button:disabled{cursor:not-allowed;opacity:.3}.data-grid-container .pagination-controls button.active{background-color:#3b82f61a;color:#3b82f6;font-weight:500;box-shadow:0 0 0 1px #3b82f633}.data-grid-container .pagination-controls input[type=number]{transition:all .2s cubic-bezier(.4,0,.2,1);border:1px solid rgba(0,0,0,.06);border-radius:6px}.data-grid-container .pagination-controls input[type=number]:hover{border-color:#0000001a}.data-grid-container .pagination-controls input[type=number]:focus{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f614;background-color:#fff}.data-grid-container .status-badge{font-weight:500;letter-spacing:-.01em;padding:4px 12px;border-radius:12px;font-size:12px;display:inline-flex;align-items:center;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .status-badge.active{background-color:#34d39926;color:#059669;border:1px solid rgba(52,211,153,.3)}.data-grid-container .status-badge.active:hover{background-color:#34d39933}.data-grid-container .status-badge.inactive{background-color:#f8717126;color:#dc2626;border:1px solid rgba(248,113,113,.3)}.data-grid-container .status-badge.inactive:hover{background-color:#f8717133}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper{transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper:hover:not(:has(input:disabled)){background-color:#00000005}.data-grid-container .data-grid-search-input ::ng-deep input{font-size:13px;font-weight:400;color:#1f2937;transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:8px}.data-grid-container .data-grid-search-input ::ng-deep input::placeholder{color:#9ca3af;font-weight:400}.data-grid-container .data-grid-search-input ::ng-deep input:focus{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f614;background-color:#fff}.data-grid-container .data-grid-search-input ::ng-deep input:disabled{background-color:#00000005;color:#9ca3af;cursor:not-allowed}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-leading-icon cide-ele-icon{color:#9ca3af;transition:color .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-search-input ::ng-deep input:focus~.cide-input-leading-icon cide-ele-icon,.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper:has(input:focus) .cide-input-leading-icon cide-ele-icon{color:#6b7280}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]{border:1px solid #e5e7eb;background-color:#fafafa;border-radius:8px}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]:hover:not(:has(input:disabled)){border-color:#d1d5db;background-color:#fff}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]:has(input:focus){border-color:#3b82f64d;background-color:#fff}.data-grid-container .search-input{position:relative}.data-grid-container .search-input input{transition:all .15s ease-in-out}.data-grid-container .search-input input:focus{box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .search-input .search-icon{pointer-events:none}.data-grid-container .column-menu-dropdown{animation:dropdownFadeIn .15s cubic-bezier(.4,0,.2,1);box-shadow:0 10px 25px #0000001a,0 4px 10px #0000000d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.05)}.data-grid-container .column-menu-dropdown button{font-size:13px;font-weight:400;letter-spacing:-.01em;text-align:left;transition:all .15s cubic-bezier(.4,0,.2,1)}.data-grid-container .column-menu-dropdown button:hover{background-color:#3b82f60d;color:#1f2937}.data-grid-container .column-menu-dropdown button:hover cide-ele-icon{color:#3b82f6}.data-grid-container .column-menu-dropdown button:active{background-color:#3b82f61a;transform:scale(.98)}.data-grid-container .column-menu-dropdown .tw-uppercase{letter-spacing:.05em}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.data-grid-container .empty-state{padding:4rem 2rem;text-align:center}.data-grid-container .empty-state svg{margin:0 auto 1.5rem;opacity:.3;transition:all .3s cubic-bezier(.4,0,.2,1)}.data-grid-container .empty-state svg:hover{opacity:.5;transform:scale(1.05)}.data-grid-container .empty-state h3{margin-bottom:.75rem;font-weight:600;color:#374151;font-size:16px;letter-spacing:-.01em}.data-grid-container .empty-state p{color:#6b7280;font-size:14px;line-height:1.5}.data-grid-container.tw-h-full tbody tr:only-child td{height:100%;vertical-align:middle}.data-grid-container.tw-h-full table.empty-table{height:100%}.data-grid-container.tw-h-full tbody tr:only-child{height:100%}@media (max-width: 640px){.data-grid-container .tw-px-6{padding-left:1rem;padding-right:1rem}.data-grid-container .pagination-controls{flex-direction:column;gap:1rem}.data-grid-container .pagination-controls .flex{justify-content:center}.data-grid-container .pagination-info{display:none}.data-grid-container .search-actions{flex-direction:column;gap:1rem}}@media (prefers-color-scheme: dark){.data-grid-container.dark-mode{background-color:#1f2937;color:#f9fafb}.data-grid-container.dark-mode table{background-color:#1f2937}.data-grid-container.dark-mode thead{background-color:#374151}.data-grid-container.dark-mode tbody tr{border-color:#374151}.data-grid-container.dark-mode tbody tr:hover{background-color:#374151}.data-grid-container.dark-mode .tw-text-gray-900{color:#f9fafb!important}.data-grid-container.dark-mode .tw-text-gray-600{color:#d1d5db!important}.data-grid-container.dark-mode .tw-text-gray-500{color:#9ca3af!important}}.data-grid-container.drag-drop-enabled tbody tr{transition:all .2s ease}.data-grid-container.drag-drop-enabled tbody tr:hover{background-color:#f3f4f6}.data-grid-container.drag-drop-enabled tbody tr.tw-opacity-50{background-color:#dbeafecc;border:2px dashed #3b82f6;border-radius:4px}.data-grid-container.drag-drop-enabled tbody tr.tw-bg-blue-50{background-color:#eff6ffe6}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]{cursor:move;position:relative}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:hover{background-color:#f8fafc;box-shadow:0 1px 3px #0000001a}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:active{cursor:grabbing}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]{position:relative}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]:before{content:\"\";position:absolute;top:-2px;left:0;right:0;height:2px;background:linear-gradient(90deg,#3b82f6,#60a5fa);z-index:10}.data-grid-container.tree-enabled tbody tr td:first-child{position:relative}.data-grid-container.tree-enabled tbody tr td:first-child button{transition:all .15s ease}.data-grid-container.tree-enabled tbody tr td:first-child button:hover{background-color:#f3f4f6;border-radius:2px}.data-grid-container.tree-enabled tbody tr td:first-child button svg{transition:transform .2s ease}.data-grid-container.tree-enabled tbody tr[style*=padding-left]{border-left:2px solid transparent}.data-grid-container.tree-enabled tbody tr[style*=padding-left]:hover{border-left-color:#e5e7eb}.tree-level-0{border-bottom:2px solid #e5e7eb!important;background-color:#fff}.tree-level-0:hover{background-color:#f5f5f5!important}.tree-level-0 td:first-child{font-weight:600}.tree-level-1{border-bottom:1px solid #d1d5db!important;background-color:#fafafa}.tree-level-1:hover{background-color:#f1f5f9!important}.tree-level-1 td:first-child{font-weight:500}.tree-level-2{border-bottom:1px solid #d1d5db!important;background-color:#f9fafb}.tree-level-2:hover{background-color:#f3f4f6!important}.tree-level-2 td:first-child{font-weight:400}.tree-level-deep{border-bottom:1px solid #e5e7eb!important;background-color:#fefefe}.tree-level-deep:hover{background-color:#f9fafb!important}.tree-level-deep td:first-child{font-weight:300}table td{box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}table td.tw-overflow-hidden{overflow:hidden;text-overflow:ellipsis}table td:first-child{min-width:150px}table td:first-child>div{display:flex;align-items:center;min-width:0}table td:first-child>div .tw-flex{min-width:0}table td .tw-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}\n"] }]
|
|
10454
|
+
], template: " <!-- Data Grid Component -->\n <div class=\"data-grid-container tw-bg-white tw-shadow tw-rounded-lg tw-overflow-visible tw-flex tw-flex-col\" \n [ngClass]=\"[\n mergedConfig().tableClass || '',\n mergedConfig().fullHeight ? 'tw-h-full' : '',\n isDragDropEnabled() ? 'drag-drop-enabled' : '',\n isTreeEnabled() ? 'tree-enabled' : ''\n ]\">\n \n <!-- Header Section -->\n @if (mergedConfig().title || mergedConfig().subtitle) {\n <div class=\"tw-px-3 tw-py-2 tw-border-b tw-border-gray-200\">\n @if (mergedConfig().title) {\n <h3 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">\n {{ mergedConfig().title }}\n </h3>\n }\n @if (mergedConfig().subtitle) {\n <p class=\"tw-text-sm tw-text-gray-600 tw-mt-0.5\">\n {{ mergedConfig().subtitle }}\n </p>\n }\n </div>\n }\n\n <!-- Search Section -->\n @if (searchConfig.enabled) {\n <div class=\"tw-px-3 tw-py-1.5 tw-border-b tw-border-gray-200\">\n <div class=\"tw-flex tw-items-center tw-justify-between\">\n <!-- Left Side: Search Input and Action Icons -->\n <div class=\"tw-flex tw-items-center tw-space-x-1.5\">\n <!-- Search Input - Apple Style -->\n <div class=\"tw-max-w-md data-grid-search-input\">\n <cide-ele-input [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\" id=\"search-input\" type=\"text\"\n [ngModel]=\"searchQuery()\"\n (ngModelChange)=\"updateSearchQuery($event)\"\n [placeholder]=\"searchConfig.placeholder\"\n [disabled]=\"loading() || isRefreshing()\"\n leadingIcon=\"search\"\n fill=\"outline\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Action Icons (Filter, Sort, Download) - Apple Style Compact -->\n <div class=\"tw-flex tw-items-center tw-space-x-1 data-grid-action-buttons\">\n <!-- Filter Button with Dropdown -->\n <div class=\"tw-relative\">\n <button type=\"button\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-blue-600 hover:tw-bg-blue-50 tw-transition-all tw-duration-200 tw-relative\"\n [class.tw-text-blue-600]=\"columnFilters().length > 0\"\n [class.tw-bg-blue-50]=\"columnFilters().length > 0\"\n title=\"Filter\"\n (click)=\"toggleFilterDropdown()\">\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">filter_list</cide-ele-icon>\n @if (columnFilters().length > 0) {\n <span class=\"tw-absolute -tw-top-1 -tw-right-1 tw-inline-flex tw-items-center tw-justify-center tw-w-4 tw-h-4 tw-text-xs tw-font-semibold tw-text-white tw-bg-blue-600 tw-rounded-full tw-border tw-border-white\">\n {{ columnFilters().length }}\n </span>\n }\n </button>\n \n <!-- Filter Dropdown Menu -->\n @if (showFilterDropdown()) {\n <div class=\"tw-absolute tw-left-0 tw-mt-2 tw-w-80 tw-bg-white tw-rounded-lg tw-shadow-xl tw-border tw-border-gray-200 tw-z-50 tw-overflow-hidden\"\n (click)=\"$event.stopPropagation()\">\n <div class=\"tw-py-1.5\">\n <div class=\"tw-px-3 tw-py-2 tw-bg-gray-50 tw-border-b tw-border-gray-200 tw-flex tw-items-center tw-justify-between\">\n <span class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-tracking-wider\">Active Filters</span>\n @if (columnFilters().length > 0) {\n <button type=\"button\" \n class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-800 tw-font-medium\"\n (click)=\"clearAllFilters()\">\n Clear All\n </button>\n }\n </div>\n @if (columnFilters().length === 0) {\n <div class=\"tw-px-4 tw-py-6 tw-text-center\">\n <cide-ele-icon class=\"tw-w-12 tw-h-12 tw-text-gray-300 tw-mx-auto tw-mb-2\">filter_list</cide-ele-icon>\n <p class=\"tw-text-sm tw-text-gray-500\">No filters applied</p>\n <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Use column filters to narrow down your results</p>\n </div>\n } @else {\n <div class=\"tw-max-h-96 tw-overflow-y-auto\">\n @for (filter of columnFilters(); track filter.columnKey) {\n <div class=\"tw-px-4 tw-py-3 hover:tw-bg-gray-50 tw-border-b tw-border-gray-100 last:tw-border-b-0\">\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-2\">\n <div class=\"tw-flex-1 tw-min-w-0\">\n <div class=\"tw-text-xs tw-font-semibold tw-text-gray-600 tw-mb-1\">{{ getColumnHeader(filter.columnKey) }}</div>\n <div class=\"tw-text-sm tw-text-gray-700 tw-flex tw-items-center tw-gap-1\">\n @if (filter.operator === 'in' && isArray(filter.value)) {\n <span class=\"tw-inline-flex tw-items-center tw-gap-1\">\n <cide-ele-icon class=\"tw-w-3 tw-h-3\">check_circle</cide-ele-icon>\n {{ getArrayLength(filter.value) }} selected\n </span>\n } @else {\n <span>{{ $any(filter.value) }}</span>\n }\n </div>\n </div>\n <button type=\"button\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-rounded tw-text-gray-400 hover:tw-text-red-600 hover:tw-bg-red-50 tw-transition-colors\"\n (click)=\"removeFilter(filter.columnKey)\"\n title=\"Remove filter\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">close</cide-ele-icon>\n </button>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n </div>\n \n <!-- Download/Export Button with Dropdown -->\n <div class=\"tw-relative\">\n <button type=\"button\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200\"\n title=\"Export\"\n (click)=\"toggleExportMenu($event)\">\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">file_download</cide-ele-icon>\n </button>\n \n <!-- Export Dropdown Menu - Improved Design -->\n @if (showExportMenu()) {\n <div class=\"tw-absolute tw-right-0 tw-mt-2 tw-w-56 tw-bg-white tw-rounded-lg tw-shadow-xl tw-border tw-border-gray-200 tw-z-50 tw-overflow-hidden\"\n (click)=\"$event.stopPropagation()\">\n <div class=\"tw-py-1.5\">\n <div class=\"tw-px-3 tw-py-2 tw-bg-gray-50 tw-border-b tw-border-gray-200\">\n <span class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-tracking-wider\">Export Options</span>\n </div>\n <button type=\"button\"\n class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-green-50 hover:tw-text-green-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n (click)=\"exportData('csv')\">\n <div class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-green-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-green-600\">description</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-font-medium\">CSV</div>\n <div class=\"tw-text-xs tw-text-gray-500\">Comma separated values</div>\n </div>\n </button>\n <button type=\"button\"\n class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-blue-50 hover:tw-text-blue-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n (click)=\"exportData('excel')\">\n <div class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">table_chart</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-font-medium\">Excel</div>\n <div class=\"tw-text-xs tw-text-gray-500\">Microsoft Excel format</div>\n </div>\n </button>\n <button type=\"button\"\n class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-red-50 hover:tw-text-red-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n (click)=\"exportData('pdf')\">\n <div class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-red-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-red-600\">picture_as_pdf</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-font-medium\">PDF</div>\n <div class=\"tw-text-xs tw-text-gray-500\">Portable document format</div>\n </div>\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n \n <!-- Right Side: Drag Order Actions -->\n @if (isDragDropEnabled() && (isDragging() || hasOrderChanged())) {\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <button cideEleButton \n variant=\"outline\" \n size=\"sm\" \n type=\"button\"\n (click)=\"onActionClick(null, { key: 'reset-order', label: 'Reset Order', icon: 'undo', variant: 'outline', onClick: 'resetOrder' })\"\n class=\"tw-text-blue-700 tw-border-blue-300 hover:tw-bg-blue-100\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">undo</cide-ele-icon>\n Reset Order\n </button>\n <button cideEleButton \n variant=\"primary\" \n size=\"sm\" \n type=\"button\"\n (click)=\"onActionClick(null, { key: 'save-order', label: 'Save Order', icon: 'save', variant: 'primary', onClick: 'saveOrder' })\"\n class=\"tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">save</cide-ele-icon>\n Save Order\n </button>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Table Section -->\n <div class=\"tw-overflow-x-auto tw-relative\"\n [ngClass]=\"{\n 'tw-flex-1 tw-min-h-0': mergedConfig().fullHeight,\n 'tw-overflow-y-auto': scrollConfig?.enabled,\n 'tw-max-h-full': scrollConfig?.enabled\n }\"\n [style.maxHeight]=\"scrollConfig?.enabled ? scrollConfig?.maxHeight : null\"\n [style.minHeight]=\"scrollConfig?.enabled ? scrollConfig?.minHeight : null\">\n <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 tw-h-full tw-table-fixed\"\n [class.empty-table]=\"displayedData.length === 0\"\n [ngClass]=\"{\n 'tw-table-striped': mergedConfig().striped,\n 'tw-border': mergedConfig().bordered,\n 'tw-table-sm': mergedConfig().compact\n }\"\n style=\"table-layout: fixed;\">\n \n <!-- Table Header -->\n <thead class=\"tw-bg-gray-50\" \n [ngClass]=\"[\n mergedConfig().headerClass || '',\n scrollConfig?.enabled && scrollConfig?.stickyHeader ? 'tw-sticky tw-top-0 tw-z-10' : ''\n ]\">\n <tr>\n @for (column of visibleColumns(); track column.key) {\n <th\n class=\"tw-px-3 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-500 tw-uppercase tw-tracking-wider tw-relative\"\n [ngClass]=\"[\n getColumnWidthClass(column.width),\n getColumnMaxWidthClass(column.width),\n column.align === 'center' ? 'tw-text-center' : '',\n column.align === 'right' ? 'tw-text-right' : ''\n ]\"\n [title]=\"column.header\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-gap-1\">\n <span class=\"tw-truncate tw-flex-1\">{{ column.header }}</span>\n \n <!-- Active Filter Indicator -->\n @if (isColumnFiltered(column.key)) {\n <div class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded tw-bg-blue-100 tw-text-blue-700 tw-text-xs tw-font-medium tw-mr-1\">\n <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-mr-0.5\">filter_alt</cide-ele-icon>\n {{ getActiveFilterCount(column.key) }}\n </div>\n }\n \n <!-- Column Menu Trigger (Three Dots Icon) -->\n @if (mergedConfig().columnMenu?.enabled) {\n <button\n type=\"button\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-rounded tw-text-gray-600 hover:tw-text-gray-800 hover:tw-bg-gray-100 tw-transition-all column-menu-trigger\"\n [class.tw-text-blue-600]=\"isColumnMenuOpen(column.key) || isColumnFiltered(column.key)\"\n [class.tw-bg-blue-50]=\"isColumnFiltered(column.key)\"\n (click)=\"toggleColumnMenu(column.key, $event)\"\n title=\"Column options\">\n <cide-ele-icon class=\"tw-w-5 tw-h-4\">more_vert</cide-ele-icon>\n </button>\n }\n </div>\n\n <!-- Column Menu Dropdown -->\n @if (isColumnMenuOpen(column.key)) {\n <div class=\"column-menu-dropdown tw-absolute tw-z-50 tw-mt-2 tw-w-56 tw-rounded-lg tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5\">\n <div class=\"tw-py-1\">\n <!-- Sort Options -->\n @if (mergedConfig().columnMenu?.showSort && column.sortable !== false) {\n <button\n type=\"button\"\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n (click)=\"onColumnSort(column, 'asc')\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_upward</cide-ele-icon>\n Ascending\n </button>\n <button\n type=\"button\"\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n (click)=\"onColumnSort(column, 'desc')\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_downward</cide-ele-icon>\n Descending\n </button>\n <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n }\n\n <!-- Filter Option -->\n @if (mergedConfig().columnMenu?.showFilter && column.filterable !== false) {\n <!-- Check if there's a custom filter renderer template -->\n @if (column.filterRenderer && templateRenderers[column.filterRenderer]) {\n <div class=\"tw-px-4 tw-py-2\">\n <ng-container [ngTemplateOutlet]=\"$any(templateRenderers[column.filterRenderer])\"\n [ngTemplateOutletContext]=\"{ $implicit: column, column: column, onFilter: onColumnFilter.bind(this) }\">\n </ng-container>\n </div>\n } @else {\n <!-- Excel-style Filter Button -->\n <button\n type=\"button\"\n class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n [class.tw-bg-blue-50]=\"isFilterPanelOpen(column.key)\"\n (click)=\"toggleFilterPanel(column.key, $event)\">\n <div class=\"tw-flex tw-items-center\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">filter_list</cide-ele-icon>\n Filter\n </div>\n <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-gray-400\">\n {{ isFilterPanelOpen(column.key) ? 'expand_less' : 'expand_more' }}\n </cide-ele-icon>\n </button>\n \n <!-- Excel-style Filter Panel -->\n @if (isFilterPanelOpen(column.key)) {\n <div class=\"tw-px-2 tw-py-2 tw-bg-gray-50\" (click)=\"$event.stopPropagation()\">\n <!-- Search box -->\n <div class=\"tw-px-2 tw-mb-2\">\n <input\n type=\"text\"\n class=\"tw-w-full tw-px-2 tw-py-1 tw-text-xs tw-border tw-border-gray-300 tw-rounded focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-blue-500\"\n placeholder=\"Search...\"\n [(ngModel)]=\"filterSearchTerm\"\n (click)=\"$event.stopPropagation()\">\n </div>\n \n <!-- Select All / Deselect All -->\n <div class=\"tw-px-2 tw-mb-1 tw-flex tw-gap-2\">\n <button\n type=\"button\"\n class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-700\"\n (click)=\"selectAllFilterValues(column); $event.stopPropagation()\">\n Select All\n </button>\n <span class=\"tw-text-xs tw-text-gray-400\">|</span>\n <button\n type=\"button\"\n class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-700\"\n (click)=\"deselectAllFilterValues(column); $event.stopPropagation()\">\n Clear\n </button>\n </div>\n \n <!-- Filter values list -->\n <div class=\"tw-max-h-48 tw-overflow-y-auto\">\n @for (item of getUniqueColumnValues(column); track item.value) {\n <label class=\"tw-flex tw-items-center tw-px-2 tw-py-1 tw-text-xs hover:tw-bg-white tw-cursor-pointer tw-rounded\">\n <input\n type=\"checkbox\"\n class=\"tw-mr-2 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500\"\n [checked]=\"item.checked\"\n (change)=\"toggleFilterValue(column, item.value, $any($event.target).checked)\"\n (click)=\"$event.stopPropagation()\">\n <span class=\"tw-flex-1 tw-truncate\">{{ item.label }}</span>\n <span class=\"tw-text-gray-400 tw-ml-1\">({{ item.count }})</span>\n </label>\n }\n </div>\n </div>\n }\n }\n <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n }\n\n <!-- Autosize Option -->\n @if (mergedConfig().columnMenu?.showAutosize) {\n <button\n type=\"button\"\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n (click)=\"onColumnAutosize(column)\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">fit_screen</cide-ele-icon>\n Autosize\n </button>\n }\n\n <!-- Group By Column Option -->\n @if (mergedConfig().columnMenu?.showGroupBy && column.groupable !== false) {\n <button\n type=\"button\"\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n (click)=\"onColumnGroupBy(column)\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">group_work</cide-ele-icon>\n Group By Column\n </button>\n }\n\n <!-- Manage Columns Option -->\n @if (mergedConfig().columnMenu?.showManageColumns) {\n <button\n type=\"button\"\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n (click)=\"onManageColumns()\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">view_column</cide-ele-icon>\n Manage Columns\n </button>\n }\n\n <!-- Reset Columns Option -->\n @if (mergedConfig().columnMenu?.showResetColumns) {\n <button\n type=\"button\"\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n (click)=\"onColumnReset()\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">refresh</cide-ele-icon>\n Reset Columns\n </button>\n }\n\n <!-- Hide Column Option -->\n @if (mergedConfig().columnMenu?.showHideColumn && column.hideable !== false) {\n <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n <button\n type=\"button\"\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n (click)=\"onColumnHide(column)\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">visibility_off</cide-ele-icon>\n Hide Column\n </button>\n }\n\n <!-- Aggregation Select Option -->\n @if (mergedConfig().columnMenu?.showAggregation && column.aggregatable !== false) {\n <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n <div class=\"tw-px-4 tw-py-2 tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase\">Aggregation</div>\n <button\n type=\"button\"\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n (click)=\"onColumnAggregation(column, 'sum')\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">functions</cide-ele-icon>\n Sum\n </button>\n <button\n type=\"button\"\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n (click)=\"onColumnAggregation(column, 'avg')\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">analytics</cide-ele-icon>\n Average\n </button>\n <button\n type=\"button\"\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n (click)=\"onColumnAggregation(column, 'count')\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">tag</cide-ele-icon>\n Count\n </button>\n <button\n type=\"button\"\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n (click)=\"onColumnAggregation(column, 'min')\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_downward</cide-ele-icon>\n Min\n </button>\n <button\n type=\"button\"\n class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n (click)=\"onColumnAggregation(column, 'max')\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_upward</cide-ele-icon>\n Max\n </button>\n }\n </div>\n </div>\n }\n </th>\n }\n </tr>\n </thead>\n\n <!-- Table Body -->\n <tbody class=\"tw-bg-white tw-divide-y tw-divide-gray-200\">\n @if (loading() || isRefreshing() || pageChangeLoading()) {\n <!-- Skeleton Loading Rows -->\n @for (skeletonItem of getSkeletonArray(); track $index) {\n <tr class=\"tw-animate-pulse tw-border-b tw-border-gray-200\">\n @for (column of columns; track column.key) {\n <td class=\"tw-px-3 tw-py-2 tw-whitespace-nowrap\"\n [ngClass]=\"[\n getColumnWidthClass(column.width),\n getColumnMaxWidthClass(column.width)\n ]\">\n <div class=\"tw-h-2 tw-bg-gray-200 tw-rounded tw-w-3/4\"></div>\n </td>\n }\n </tr>\n }\n } @else {\n @for (item of displayedData; track trackByFn($index, item)) {\n <tr class=\"tw-group hover:tw-bg-gray-50 tw-border-b-2 tw-border-gray-200\"\n [ngClass]=\"[\n mergedConfig().rowClass || '',\n isRefreshing() ? 'tw-opacity-60 tw-pointer-events-none' : '',\n isDragDropEnabled() ? 'tw-cursor-move tw-border-2 tw-border-transparent' : '',\n !isDragDropEnabled() ? 'tw-transition-colors tw-duration-150' : '',\n isTreeEnabled() ? getTreeLevelClass(item) : ''\n ]\"\n [style.border-color]=\"isDragOverRow === $index ? '#3b82f6' : 'transparent'\"\n [style.background-color]=\"isDragOverRow === $index ? '#eff6ff' : ''\"\n (click)=\"onRowClick(item)\"\n (keydown.enter)=\"onRowClick(item)\"\n (keydown.space)=\"onRowClick(item)\"\n [class.tw-cursor-pointer]=\"mergedConfig().onRowClick && !isDragDropEnabled()\"\n [tabindex]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 0 : -1\"\n [attr.role]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'button' : null\"\n [attr.aria-label]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'Select row' : null\"\n [draggable]=\"isDragDropEnabled()\"\n (dragstart)=\"onDragStart($event, item, $index)\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event, item, $index)\"\n (dragend)=\"onDragEnd($event)\">\n \n @for (column of columns; track column.key) {\n <td class=\"tw-pr-3 tw-py-1 tw-relative\"\n [ngClass]=\"[\n getColumnWidthClass(column.width),\n getColumnMaxWidthClass(column.width),\n mergedConfig().cellClass || '',\n column.align === 'center' ? 'tw-text-center' : '',\n column.align === 'right' ? 'tw-text-right' : '',\n column.truncate !== false ? 'tw-whitespace-nowrap' : 'tw-whitespace-normal'\n ]\"\n [style.paddingLeft]=\"isTreeEnabled() && $index === 0 ? getTreeIndentStyle(item) : '12px'\"\n [style.maxWidth]=\"getColumnMaxWidthClass(column.width) === 'tw-max-w-xs' ? '200px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-sm' ? '300px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-md' ? '400px' : 'none'\"\n [style.minWidth]=\"isTreeEnabled() && $index === 0 ? '150px' : '100px'\">\n <!-- Tree Expand/Collapse Button (only for first column when tree is enabled) -->\n @if (isTreeEnabled() && $index === 0) {\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <!-- Tree Indentation -->\n <div class=\"tw-flex tw-items-center\">\n @if (hasChildren(item)) {\n <button \n variant=\"outline\"\n size=\"xs\"\n type=\"button\"\n (click)=\"onActionClick(item, { key: 'toggle-expand', label: 'Toggle', icon: '', variant: 'ghost', onClick: 'toggle-expand' }); $event.stopPropagation()\"\n class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-text-gray-500 hover:tw-text-gray-700 tw-rounded\"\n [class.tw-transition-colors]=\"!isDragDropEnabled()\"\n [title]=\"isItemExpanded(item) ? 'Collapse' : 'Expand'\">\n <cide-ele-icon \n class=\"tw-w-3 tw-h-3\"\n [class.tw-transition-transform]=\"!isDragDropEnabled()\"\n [class.tw-rotate-90]=\"isItemExpanded(item)\"\n size=\"xs\">\n chevron_right\n </cide-ele-icon>\n </button>\n } @else {\n <div class=\"tw-w-8 tw-h-5 tw-flex tw-items-center tw-justify-center\">\n <!-- <div class=\"tw-w-1 tw-h-1 tw-bg-gray-300 tw-rounded-full\"></div> -->\n </div>\n }\n </div>\n \n <!-- Cell Content -->\n <div class=\"tw-flex-1 tw-w-full\">\n @if (column.type === 'text') {\n <p class=\"tw-text-sm tw-text-gray-900\"\n [class.tw-truncate]=\"column.truncate\"\n [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\n {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n </p>\n } @else if (column.type === 'number') {\n <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\n {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n </span>\n } @else if (column.type === 'date') {\n <span class=\"tw-text-sm tw-text-gray-600\">\n {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n </span>\n } @else if (column.type === 'boolean') {\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\n </span>\n } @else if (column.type === 'status' && column.statusConfig) {\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\n {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\n </span>\n } @else if (column.type === 'actions' && column.actions) {\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n @for (action of column.actions; track action.key) {\n <button\n cideEleButton\n [variant]=\"action.variant || 'ghost'\"\n size=\"xs\"\n type=\"button\"\n (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n [title]=\"action.tooltip || action.label\"\n [disabled]=\"isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\n [class.tw-transition-colors]=\"!isDragDropEnabled()\"\n [ngClass]=\"{\n 'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\n 'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\n 'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\n 'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\n }\">\n @if (action.icon) {\n <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M10 12l-5-5h10l-5 5z\"/>\n </svg>\n }\n {{ action.label }}\n </button>\n }\n </div>\n } @else if (column.type === 'custom') {\n <!-- Template Renderer -->\n @if (column.renderer && isTemplateRenderer(column.renderer)) {\n <ng-container \n [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n </ng-container>\n }\n <!-- Default rendering -->\n @else {\n <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n }\n }\n </div>\n </div>\n } @else {\n <!-- Regular cell content (non-tree or non-first column) -->\n @if (column.type === 'text') {\n <p class=\"tw-text-sm tw-text-gray-900\"\n [class.tw-truncate]=\"column.truncate\"\n [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\n {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n </p>\n } @else if (column.type === 'number') {\n <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\n {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n </span>\n } @else if (column.type === 'date') {\n <span class=\"tw-text-sm tw-text-gray-600\">\n {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n </span>\n } @else if (column.type === 'boolean') {\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\n </span>\n } @else if (column.type === 'status' && column.statusConfig) {\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\n {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\n </span>\n } @else if (column.type === 'actions' && column.actions) {\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n @for (action of column.actions; track action.key) {\n <button\n cideEleButton\n [variant]=\"action.variant || 'ghost'\"\n size=\"xs\"\n type=\"button\"\n (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n [title]=\"action.tooltip || action.label\"\n [disabled]=\"isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\n [class.tw-transition-colors]=\"!isDragDropEnabled()\"\n [ngClass]=\"{\n 'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\n 'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\n 'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\n 'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\n }\">\n @if (action.icon) {\n <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M10 12l-5-5h10l-5 5z\"/>\n </svg>\n }\n {{ action.label }}\n </button>\n }\n </div>\n } @else if (column.type === 'custom') {\n <!-- Template Renderer -->\n @if (column.renderer && isTemplateRenderer(column.renderer)) {\n <ng-container \n [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n </ng-container>\n }\n <!-- Default rendering -->\n @else {\n <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n }\n }\n }\n </td>\n }\n </tr>\n }\n \n <!-- Empty State -->\n @if (displayedData.length === 0) {\n <tr class=\"tw-h-full\">\n <td [attr.colspan]=\"columns.length\" class=\"tw-px-6 tw-py-22 tw-text-center tw-h-full tw-align-middle\">\n <div class=\"tw-text-gray-500 tw-flex tw-flex-col tw-items-center tw-justify-center tw-min-h-[300px]\">\n <svg class=\"tw-mx-auto tw-h-12 tw-w-12 tw-text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"></path>\n </svg>\n <h3 class=\"tw-mt-2 tw-text-sm tw-font-medium tw-text-gray-900\">No data found</h3>\n <p class=\"tw-mt-1 tw-text-sm tw-text-gray-500\">\n @if (searchQuery()) {\n No results match your search criteria.\n } @else {\n There are no items to display.\n }\n </p>\n </div>\n </td>\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n\n <!-- Pagination Section -->\n @if (paginationConfig.enabled && totalItems() > 0) {\n <div class=\"tw-px-3 tw-py-0 tw-border-t tw-border-gray-200 tw-bg-white tw-relative tw-z-20\"\n [class.tw-opacity-60]=\"isRefreshing()\">\n \n <!-- Results Info and Page Size -->\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-1 sm:tw-space-y-0\">\n \n <!-- Results Info -->\n @if (paginationConfig.showPageInfo) {\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <p class=\"tw-text-sm tw-text-gray-700\">\n Showing {{ getItemRangeText() }} results\n </p>\n \n <!-- Page Size Selector -->\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-500\">view_list</cide-ele-icon>\n <span class=\"tw-text-sm tw-text-gray-700\">Per page:</span>\n <div class=\"tw-w-16 tw-relative\">\n <cide-ele-select\n [labelHide]=\"true\"\n [ngModel]=\"pageSize()\"\n (ngModelChange)=\"updatePageSize($event)\"\n [options]=\"getPageSizeOptions()\"\n [disabled]=\"isRefreshing()\"\n fill=\"outline\"\n size=\"xs\"\n class=\"tw-z-30\">\n </cide-ele-select>\n </div>\n </div>\n </div>\n }\n\n <!-- Pagination Controls -->\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n \n <!-- Previous/Next and Page Numbers -->\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\n \n <!-- First Page -->\n <button\n type=\"button\"\n (click)=\"onPageChange(1)\"\n [disabled]=\"currentPage() === 1 || isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n title=\"First page\">\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">first_page</cide-ele-icon>\n </button>\n \n <!-- Previous Page -->\n <button\n type=\"button\"\n (click)=\"previousPage()\"\n [disabled]=\"!hasPreviousPage() || isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n title=\"Previous page\">\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">chevron_left</cide-ele-icon>\n </button>\n \n <!-- Page Numbers -->\n @for (page of getEnhancedPageNumbers(); track page) {\n @if (page === '...') {\n <span class=\"tw-px-2 tw-py-2 tw-text-sm tw-text-gray-500\">...</span>\n } @else {\n <button\n type=\"button\"\n (click)=\"onPageChange(page)\"\n [disabled]=\"isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-p-0 tw-rounded tw-text-xs tw-font-medium tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n [ngClass]=\"{\n 'tw-bg-blue-600 tw-text-white hover:tw-bg-blue-700': currentPage() === page,\n 'tw-bg-white tw-text-gray-700 tw-border tw-border-gray-300 hover:tw-bg-gray-50': currentPage() !== page\n }\"\n [title]=\"'Page ' + page\">\n {{ page }}\n </button>\n }\n }\n \n <!-- Next Page -->\n <button\n type=\"button\"\n (click)=\"nextPage()\"\n [disabled]=\"!hasNextPage() || isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n title=\"Next page\">\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">chevron_right</cide-ele-icon>\n </button>\n \n <!-- Last Page -->\n <button\n type=\"button\"\n (click)=\"onPageChange(totalPages())\"\n [disabled]=\"currentPage() === totalPages() || isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n title=\"Last page\">\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">last_page</cide-ele-icon>\n </button>\n \n </div>\n\n <!-- Quick Jump and Refresh -->\n @if (paginationConfig.showQuickJump || paginationConfig.showRefresh) {\n <div class=\"tw-flex tw-items-center tw-space-x-1 tw-border-l tw-border-gray-200 tw-pl-2\">\n \n <!-- Quick Jump -->\n @if (paginationConfig.showQuickJump) {\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\n <span class=\"tw-text-sm tw-text-gray-700\">Go to:</span>\n <div class=\"tw-w-16\">\n <cide-ele-input id=\"jump-to-page-input\" type=\"number\" [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\"\n [(ngModel)]=\"jumpToPage\" [min]=\"1\" [max]=\"totalPages()\"\n [disabled]=\"isRefreshing()\"\n size=\"xs\"\n (keydown.enter)=\"onJumpToPage()\">\n </cide-ele-input>\n </div>\n <button\n type=\"button\"\n (click)=\"onJumpToPage()\"\n [disabled]=\"isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-p-0 tw-rounded tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-700 tw-border tw-border-gray-300 hover:tw-bg-gray-200 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n title=\"Go to page\">\n Go\n </button>\n </div>\n }\n \n <!-- Refresh Button -->\n @if (paginationConfig.showRefresh) {\n <button\n type=\"button\"\n (click)=\"onRefresh()\"\n [disabled]=\"isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n title=\"Refresh\">\n @if (isRefreshing()) {\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4 tw-animate-spin\">refresh</cide-ele-icon>\n } @else {\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">refresh</cide-ele-icon>\n }\n </button>\n }\n </div>\n }\n \n </div>\n </div>\n </div>\n }\n</div>\n", styles: [".data-grid-container{width:100%;display:flex;flex-direction:column;min-height:400px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;color:#1f2937;background-color:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #0000000a,0 1px 2px #00000005;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.data-grid-container.tw-h-full{height:100%;min-height:100%}.data-grid-container .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}.data-grid-container .tw-overflow-x-auto.tw-flex-1{flex:1;min-height:0}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar{height:6px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af}.data-grid-container table{min-height:300px;border-collapse:separate;border-spacing:0;width:100%;background-color:#fff}.data-grid-container thead{background:linear-gradient(180deg,#fafafa,#f7f7f7);border-bottom:1px solid rgba(0,0,0,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.data-grid-container thead th{background:transparent;color:#6b7280;font-weight:500;font-size:12px;text-transform:none;letter-spacing:-.01em;padding:4px 10px;border-bottom:1px solid rgba(0,0,0,.06);text-align:left;white-space:nowrap;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container thead th:first-child{padding-left:12px}.data-grid-container thead th:last-child{padding-right:12px}.data-grid-container thead th:hover{background-color:#00000005}.data-grid-container thead th .column-menu-trigger{opacity:1;transition:all .2s cubic-bezier(.4,0,.2,1);margin-left:4px;cursor:pointer;padding:2px;border-radius:4px}.data-grid-container thead th .column-menu-trigger:hover{background-color:#0000000f}.data-grid-container tbody{background-color:#fff}.data-grid-container tbody td{padding:6px 10px;border-bottom:1px solid rgba(0,0,0,.03);color:#1f2937;font-size:13px;vertical-align:middle;line-height:1.5;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container tbody td:first-child{padding-left:12px}.data-grid-container tbody td:last-child{padding-right:12px}.data-grid-container tbody tr{background-color:#fff;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container tbody tr:hover{background-color:#00000005;transform:scale(1.001)}.data-grid-container tbody tr:hover td{border-bottom-color:#0000000a}.data-grid-container tbody tr:active{background-color:#00000008;transform:scale(.999)}.data-grid-container.tw-h-full table,.data-grid-container.tw-h-full tbody{height:100%}.data-grid-container.tw-table-striped tbody tr:nth-child(2n){background-color:#00000004}.data-grid-container.tw-table-striped tbody tr:nth-child(2n):hover{background-color:#00000008;transform:scale(1.001)}.data-grid-container.tw-table-sm thead th{padding:8px 10px;font-size:11px}.data-grid-container.tw-table-sm thead th:first-child{padding-left:16px}.data-grid-container.tw-table-sm thead th:last-child{padding-right:16px}.data-grid-container.tw-table-sm tbody td{padding:8px 10px;font-size:12px;line-height:1.4}.data-grid-container.tw-table-sm tbody td:first-child{padding-left:16px}.data-grid-container.tw-table-sm tbody td:last-child{padding-right:16px}.data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:#e5f3ff}.data-grid-container.loading-overlay{position:relative}.data-grid-container.loading-overlay:after{content:\"\";position:absolute;inset:0;background:#ffffffd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;animation:fadeIn .2s cubic-bezier(.4,0,.2,1)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.data-grid-container .tw-animate-pulse div{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.data-grid-container .data-grid-action-buttons button{position:relative;border:1px solid rgba(0,0,0,.08);background:transparent;outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:6px;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-action-buttons button cide-ele-icon{color:#6b7280;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-action-buttons button:hover:not(:disabled){background-color:#0000000a;border-color:#0000001f}.data-grid-container .data-grid-action-buttons button:hover:not(:disabled) cide-ele-icon{color:#374151;transform:scale(1.05)}.data-grid-container .data-grid-action-buttons button:active:not(:disabled){background-color:#00000014;border-color:#00000026;transform:scale(.95)}.data-grid-container .data-grid-action-buttons button:active:not(:disabled) cide-ele-icon{transform:scale(.98)}.data-grid-container .data-grid-action-buttons button:focus-visible{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f61f}.data-grid-container .data-grid-action-buttons button:disabled{cursor:not-allowed;opacity:.3;background:transparent!important;border-color:#0000000d}.data-grid-container .action-buttons{display:flex;gap:.25rem}.data-grid-container .action-buttons button{transition:all .15s ease-in-out}.data-grid-container .action-buttons button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.data-grid-container .action-buttons button:disabled{cursor:not-allowed;opacity:.5}.data-grid-container .pagination-controls{padding:12px 20px;border-top:1px solid rgba(0,0,0,.06);background:linear-gradient(180deg,#fafafa,#f7f7f7)}.data-grid-container .pagination-controls button{transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:6px}.data-grid-container .pagination-controls button:hover:not(:disabled){background-color:#0000000a;transform:scale(1.02)}.data-grid-container .pagination-controls button:active:not(:disabled){transform:scale(.98);background-color:#00000014}.data-grid-container .pagination-controls button:disabled{cursor:not-allowed;opacity:.3}.data-grid-container .pagination-controls button.active{background-color:#3b82f61a;color:#3b82f6;font-weight:500;box-shadow:0 0 0 1px #3b82f633}.data-grid-container .pagination-controls input[type=number]{transition:all .2s cubic-bezier(.4,0,.2,1);border:1px solid rgba(0,0,0,.06);border-radius:6px}.data-grid-container .pagination-controls input[type=number]:hover{border-color:#0000001a}.data-grid-container .pagination-controls input[type=number]:focus{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f614;background-color:#fff}.data-grid-container .status-badge{font-weight:500;letter-spacing:-.01em;padding:4px 12px;border-radius:12px;font-size:12px;display:inline-flex;align-items:center;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .status-badge.active{background-color:#34d39926;color:#059669;border:1px solid rgba(52,211,153,.3)}.data-grid-container .status-badge.active:hover{background-color:#34d39933}.data-grid-container .status-badge.inactive{background-color:#f8717126;color:#dc2626;border:1px solid rgba(248,113,113,.3)}.data-grid-container .status-badge.inactive:hover{background-color:#f8717133}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper{transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper:hover:not(:has(input:disabled)){background-color:#00000005}.data-grid-container .data-grid-search-input ::ng-deep input{font-size:13px;font-weight:400;color:#1f2937;transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:8px}.data-grid-container .data-grid-search-input ::ng-deep input::placeholder{color:#9ca3af;font-weight:400}.data-grid-container .data-grid-search-input ::ng-deep input:focus{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f614;background-color:#fff}.data-grid-container .data-grid-search-input ::ng-deep input:disabled{background-color:#00000005;color:#9ca3af;cursor:not-allowed}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-leading-icon cide-ele-icon{color:#9ca3af;transition:color .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-search-input ::ng-deep input:focus~.cide-input-leading-icon cide-ele-icon,.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper:has(input:focus) .cide-input-leading-icon cide-ele-icon{color:#6b7280}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]{border:1px solid #e5e7eb;background-color:#fafafa;border-radius:8px}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]:hover:not(:has(input:disabled)){border-color:#d1d5db;background-color:#fff}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]:has(input:focus){border-color:#3b82f64d;background-color:#fff}.data-grid-container .search-input{position:relative}.data-grid-container .search-input input{transition:all .15s ease-in-out}.data-grid-container .search-input input:focus{box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .search-input .search-icon{pointer-events:none}.data-grid-container .column-menu-dropdown{animation:dropdownFadeIn .15s cubic-bezier(.4,0,.2,1);box-shadow:0 10px 25px #0000001a,0 4px 10px #0000000d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.05)}.data-grid-container .column-menu-dropdown button{font-size:13px;font-weight:400;letter-spacing:-.01em;text-align:left;transition:all .15s cubic-bezier(.4,0,.2,1)}.data-grid-container .column-menu-dropdown button:hover{background-color:#3b82f60d;color:#1f2937}.data-grid-container .column-menu-dropdown button:hover cide-ele-icon{color:#3b82f6}.data-grid-container .column-menu-dropdown button:active{background-color:#3b82f61a;transform:scale(.98)}.data-grid-container .column-menu-dropdown .tw-uppercase{letter-spacing:.05em}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.data-grid-container .empty-state{padding:4rem 2rem;text-align:center}.data-grid-container .empty-state svg{margin:0 auto 1.5rem;opacity:.3;transition:all .3s cubic-bezier(.4,0,.2,1)}.data-grid-container .empty-state svg:hover{opacity:.5;transform:scale(1.05)}.data-grid-container .empty-state h3{margin-bottom:.75rem;font-weight:600;color:#374151;font-size:16px;letter-spacing:-.01em}.data-grid-container .empty-state p{color:#6b7280;font-size:14px;line-height:1.5}.data-grid-container.tw-h-full tbody tr:only-child td{height:100%;vertical-align:middle}.data-grid-container.tw-h-full table.empty-table{height:100%}.data-grid-container.tw-h-full tbody tr:only-child{height:100%}@media (max-width: 640px){.data-grid-container .tw-px-6{padding-left:1rem;padding-right:1rem}.data-grid-container .pagination-controls{flex-direction:column;gap:1rem}.data-grid-container .pagination-controls .flex{justify-content:center}.data-grid-container .pagination-info{display:none}.data-grid-container .search-actions{flex-direction:column;gap:1rem}}@media (prefers-color-scheme: dark){.data-grid-container.dark-mode{background-color:#1f2937;color:#f9fafb}.data-grid-container.dark-mode table{background-color:#1f2937}.data-grid-container.dark-mode thead{background-color:#374151}.data-grid-container.dark-mode tbody tr{border-color:#374151}.data-grid-container.dark-mode tbody tr:hover{background-color:#374151}.data-grid-container.dark-mode .tw-text-gray-900{color:#f9fafb!important}.data-grid-container.dark-mode .tw-text-gray-600{color:#d1d5db!important}.data-grid-container.dark-mode .tw-text-gray-500{color:#9ca3af!important}}.data-grid-container.drag-drop-enabled tbody tr{transition:all .2s ease}.data-grid-container.drag-drop-enabled tbody tr:hover{background-color:#f3f4f6}.data-grid-container.drag-drop-enabled tbody tr.tw-opacity-50{background-color:#dbeafecc;border:2px dashed #3b82f6;border-radius:4px}.data-grid-container.drag-drop-enabled tbody tr.tw-bg-blue-50{background-color:#eff6ffe6}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]{cursor:move;position:relative}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:hover{background-color:#f8fafc;box-shadow:0 1px 3px #0000001a}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:active{cursor:grabbing}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]{position:relative}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]:before{content:\"\";position:absolute;top:-2px;left:0;right:0;height:2px;background:linear-gradient(90deg,#3b82f6,#60a5fa);z-index:10}.data-grid-container.tree-enabled tbody tr td:first-child{position:relative}.data-grid-container.tree-enabled tbody tr td:first-child button{transition:all .15s ease}.data-grid-container.tree-enabled tbody tr td:first-child button:hover{background-color:#f3f4f6;border-radius:2px}.data-grid-container.tree-enabled tbody tr td:first-child button svg{transition:transform .2s ease}.data-grid-container.tree-enabled tbody tr[style*=padding-left]{border-left:2px solid transparent}.data-grid-container.tree-enabled tbody tr[style*=padding-left]:hover{border-left-color:#e5e7eb}.tree-level-0{border-bottom:2px solid #e5e7eb!important;background-color:#fff}.tree-level-0:hover{background-color:#f5f5f5!important}.tree-level-0 td:first-child{font-weight:600}.tree-level-1{border-bottom:1px solid #d1d5db!important;background-color:#fafafa}.tree-level-1:hover{background-color:#f1f5f9!important}.tree-level-1 td:first-child{font-weight:500}.tree-level-2{border-bottom:1px solid #d1d5db!important;background-color:#f9fafb}.tree-level-2:hover{background-color:#f3f4f6!important}.tree-level-2 td:first-child{font-weight:400}.tree-level-deep{border-bottom:1px solid #e5e7eb!important;background-color:#fefefe}.tree-level-deep:hover{background-color:#f9fafb!important}.tree-level-deep td:first-child{font-weight:300}table td{box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}table td.tw-overflow-hidden{overflow:hidden;text-overflow:ellipsis}table td:first-child{min-width:150px}table td:first-child>div{display:flex;align-items:center;min-width:0}table td:first-child>div .tw-flex{min-width:0}table td .tw-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}\n"] }]
|
|
10408
10455
|
}], propDecorators: { config: [{
|
|
10409
10456
|
type: Input
|
|
10410
10457
|
}], templateRenderers: [{
|
|
@@ -11114,222 +11161,222 @@ class CideEleFloatingContainerComponent {
|
|
|
11114
11161
|
return 'linear-gradient(135deg, var(--cide-theme-primary-color) 0%, var(--tw-blue-400) 100%)';
|
|
11115
11162
|
}
|
|
11116
11163
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11117
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingContainerComponent, isStandalone: true, selector: "cide-ele-floating-container", inputs: { config: "config", isMinimized: "isMinimized", isMaximized: "isMaximized", isVisible: "isVisible", zIndex: "zIndex" }, outputs: { closeEvent: "closeEvent", minimizeEvent: "minimizeEvent", maximizeEvent: "maximizeEvent", clickEvent: "clickEvent" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `
|
|
11118
|
-
<div
|
|
11119
|
-
#container
|
|
11120
|
-
class="tw-fixed tw-bg-gray-50 tw-bg-opacity-90 tw-backdrop-blur-sm tw-border tw-border-gray-200 tw-border-opacity-50 tw-rounded-xl tw-shadow-lg tw-transition-all tw-duration-200 tw-flex tw-flex-col"
|
|
11121
|
-
[style.left.px]="isMaximized() ? 20 : position().x"
|
|
11122
|
-
[style.top.px]="isMaximized() ? 20 : position().y"
|
|
11123
|
-
[style.width]="isMaximized() ? 'calc(100vw - 40px)' : (config().width || '400px')"
|
|
11124
|
-
[style.height]="isMaximized() ? 'calc(100vh - 40px)' : (isMinimized() ? 'auto' : (savedHeight || config().height || '500px'))"
|
|
11125
|
-
[style.min-width]="config().minWidth || '300px'"
|
|
11126
|
-
[style.min-height]="isMinimized() ? 'auto' : (config().minHeight || '200px')"
|
|
11127
|
-
[style.max-width]="config().maxWidth || '90vw'"
|
|
11128
|
-
[style.max-height]="config().maxHeight || '90vh'"
|
|
11129
|
-
[style.z-index]="zIndex()"
|
|
11130
|
-
[class.tw-cursor-move]="isDragging()"
|
|
11131
|
-
[class.tw-select-none]="true"
|
|
11132
|
-
(mousedown)="onMouseDown($event)"
|
|
11133
|
-
(mousemove)="onMouseMove($event)"
|
|
11134
|
-
(mouseup)="onMouseUp($event)"
|
|
11135
|
-
(mouseleave)="onMouseUp($event)">
|
|
11136
|
-
|
|
11137
|
-
<!-- Header -->
|
|
11138
|
-
<div
|
|
11139
|
-
class="tw-flex tw-items-center tw-justify-between tw-px-3 tw-py-2 tw-border-b tw-border-gray-200 tw-border-opacity-30 tw-rounded-t-xl tw-cursor-move tw-transition-all tw-duration-200 tw-shadow-sm tw-flex-shrink-0"
|
|
11140
|
-
[style.background]="getHeaderBackground()"
|
|
11141
|
-
(mousedown)="startDrag($event)"
|
|
11142
|
-
(click)="onHeaderClick($event)">
|
|
11143
|
-
|
|
11144
|
-
<!-- Title Section -->
|
|
11145
|
-
<div class="tw-flex tw-items-center tw-space-x-2 tw-text-white">
|
|
11146
|
-
@if (config().icon) {
|
|
11147
|
-
<cide-ele-icon class="tw-w-4 tw-h-4">{{ config().icon }}</cide-ele-icon>
|
|
11148
|
-
}
|
|
11149
|
-
<h2 class="tw-text-sm tw-font-medium tw-truncate">{{ config().title }}</h2>
|
|
11150
|
-
@if (isMinimized()) {
|
|
11151
|
-
<span class="tw-text-xs tw-opacity-75">(Click to restore)</span>
|
|
11152
|
-
}
|
|
11153
|
-
</div>
|
|
11154
|
-
|
|
11155
|
-
<!-- Action Buttons -->
|
|
11156
|
-
<div class="tw-flex tw-items-center tw-space-x-1">
|
|
11157
|
-
@if (config().minimizable !== false) {
|
|
11158
|
-
<button
|
|
11159
|
-
cideEleButton
|
|
11160
|
-
variant="ghost"
|
|
11161
|
-
size="xs"
|
|
11162
|
-
type="button"
|
|
11163
|
-
(click)="minimize(); $event.stopPropagation()"
|
|
11164
|
-
class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
|
|
11165
|
-
[title]="isMinimized() ? 'Restore' : 'Minimize'">
|
|
11166
|
-
<cide-ele-icon class="tw-w-[1.38rem] tw-h-3">{{ isMinimized() ? 'open_in_full' : 'remove' }}</cide-ele-icon>
|
|
11167
|
-
</button>
|
|
11168
|
-
}
|
|
11169
|
-
@if (config().maximizable !== false) {
|
|
11170
|
-
<button
|
|
11171
|
-
cideEleButton
|
|
11172
|
-
variant="ghost"
|
|
11173
|
-
size="xs"
|
|
11174
|
-
type="button"
|
|
11175
|
-
(click)="toggleMaximize(); $event.stopPropagation()"
|
|
11176
|
-
class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
|
|
11177
|
-
[title]="isMaximized() ? 'Restore' : 'Maximize'">
|
|
11178
|
-
<cide-ele-icon class="tw-w-[1.38rem] tw-h-3">{{ isMaximized() ? 'fullscreen_exit' : 'fullscreen' }}</cide-ele-icon>
|
|
11179
|
-
</button>
|
|
11180
|
-
}
|
|
11181
|
-
@if (config().closable !== false) {
|
|
11182
|
-
<button
|
|
11183
|
-
cideEleButton
|
|
11184
|
-
variant="ghost"
|
|
11185
|
-
size="xs"
|
|
11186
|
-
type="button"
|
|
11187
|
-
(click)="close(); $event.stopPropagation()"
|
|
11188
|
-
class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
|
|
11189
|
-
title="Close">
|
|
11190
|
-
<cide-ele-icon class="tw-w-[1.38rem] tw-h-3">close</cide-ele-icon>
|
|
11191
|
-
</button>
|
|
11192
|
-
}
|
|
11193
|
-
</div>
|
|
11194
|
-
</div>
|
|
11195
|
-
|
|
11196
|
-
<!-- Content with @defer for performance -->
|
|
11197
|
-
@if (!isMinimized()) {
|
|
11198
|
-
<div
|
|
11199
|
-
class="tw-flex-1 tw-overflow-auto tw-overflow-x-hidden floating-container-content tw-bg-gray-50 tw-bg-opacity-90"
|
|
11200
|
-
[style.height]="isMaximized() ? 'calc(100vh - 100px)' : 'auto'"
|
|
11201
|
-
[style.min-height]="'200px'">
|
|
11202
|
-
@defer (when !isMinimized() && isVisible()) {
|
|
11203
|
-
<div class="tw-p-0 tw-min-h-full">
|
|
11204
|
-
<ng-content></ng-content>
|
|
11205
|
-
</div>
|
|
11206
|
-
} @placeholder {
|
|
11207
|
-
<div class="tw-flex tw-items-center tw-justify-center tw-p-4 tw-min-h-[200px]">
|
|
11208
|
-
<cide-ele-spinner size="sm"></cide-ele-spinner>
|
|
11209
|
-
<span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading content...</span>
|
|
11210
|
-
</div>
|
|
11211
|
-
}
|
|
11212
|
-
</div>
|
|
11213
|
-
}
|
|
11214
|
-
|
|
11215
|
-
<!-- Resize Handle (if resizable) -->
|
|
11216
|
-
@if (config().resizable !== false) {
|
|
11217
|
-
<div
|
|
11218
|
-
class="tw-absolute tw-bottom-0 tw-right-0 tw-w-[1.38rem] tw-h-3 tw-cursor-se-resize tw-bg-gray-300 tw-opacity-50 hover:tw-opacity-100"
|
|
11219
|
-
(mousedown)="startResize($event)">
|
|
11220
|
-
</div>
|
|
11221
|
-
}
|
|
11222
|
-
</div>
|
|
11164
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingContainerComponent, isStandalone: true, selector: "cide-ele-floating-container", inputs: { config: "config", isMinimized: "isMinimized", isMaximized: "isMaximized", isVisible: "isVisible", zIndex: "zIndex" }, outputs: { closeEvent: "closeEvent", minimizeEvent: "minimizeEvent", maximizeEvent: "maximizeEvent", clickEvent: "clickEvent" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `
|
|
11165
|
+
<div
|
|
11166
|
+
#container
|
|
11167
|
+
class="tw-fixed tw-bg-gray-50 tw-bg-opacity-90 tw-backdrop-blur-sm tw-border tw-border-gray-200 tw-border-opacity-50 tw-rounded-xl tw-shadow-lg tw-transition-all tw-duration-200 tw-flex tw-flex-col"
|
|
11168
|
+
[style.left.px]="isMaximized() ? 20 : position().x"
|
|
11169
|
+
[style.top.px]="isMaximized() ? 20 : position().y"
|
|
11170
|
+
[style.width]="isMaximized() ? 'calc(100vw - 40px)' : (config().width || '400px')"
|
|
11171
|
+
[style.height]="isMaximized() ? 'calc(100vh - 40px)' : (isMinimized() ? 'auto' : (savedHeight || config().height || '500px'))"
|
|
11172
|
+
[style.min-width]="config().minWidth || '300px'"
|
|
11173
|
+
[style.min-height]="isMinimized() ? 'auto' : (config().minHeight || '200px')"
|
|
11174
|
+
[style.max-width]="config().maxWidth || '90vw'"
|
|
11175
|
+
[style.max-height]="config().maxHeight || '90vh'"
|
|
11176
|
+
[style.z-index]="zIndex()"
|
|
11177
|
+
[class.tw-cursor-move]="isDragging()"
|
|
11178
|
+
[class.tw-select-none]="true"
|
|
11179
|
+
(mousedown)="onMouseDown($event)"
|
|
11180
|
+
(mousemove)="onMouseMove($event)"
|
|
11181
|
+
(mouseup)="onMouseUp($event)"
|
|
11182
|
+
(mouseleave)="onMouseUp($event)">
|
|
11183
|
+
|
|
11184
|
+
<!-- Header -->
|
|
11185
|
+
<div
|
|
11186
|
+
class="tw-flex tw-items-center tw-justify-between tw-px-3 tw-py-2 tw-border-b tw-border-gray-200 tw-border-opacity-30 tw-rounded-t-xl tw-cursor-move tw-transition-all tw-duration-200 tw-shadow-sm tw-flex-shrink-0"
|
|
11187
|
+
[style.background]="getHeaderBackground()"
|
|
11188
|
+
(mousedown)="startDrag($event)"
|
|
11189
|
+
(click)="onHeaderClick($event)">
|
|
11190
|
+
|
|
11191
|
+
<!-- Title Section -->
|
|
11192
|
+
<div class="tw-flex tw-items-center tw-space-x-2 tw-text-white">
|
|
11193
|
+
@if (config().icon) {
|
|
11194
|
+
<cide-ele-icon class="tw-w-4 tw-h-4">{{ config().icon }}</cide-ele-icon>
|
|
11195
|
+
}
|
|
11196
|
+
<h2 class="tw-text-sm tw-font-medium tw-truncate">{{ config().title }}</h2>
|
|
11197
|
+
@if (isMinimized()) {
|
|
11198
|
+
<span class="tw-text-xs tw-opacity-75">(Click to restore)</span>
|
|
11199
|
+
}
|
|
11200
|
+
</div>
|
|
11201
|
+
|
|
11202
|
+
<!-- Action Buttons -->
|
|
11203
|
+
<div class="tw-flex tw-items-center tw-space-x-1">
|
|
11204
|
+
@if (config().minimizable !== false) {
|
|
11205
|
+
<button
|
|
11206
|
+
cideEleButton
|
|
11207
|
+
variant="ghost"
|
|
11208
|
+
size="xs"
|
|
11209
|
+
type="button"
|
|
11210
|
+
(click)="minimize(); $event.stopPropagation()"
|
|
11211
|
+
class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
|
|
11212
|
+
[title]="isMinimized() ? 'Restore' : 'Minimize'">
|
|
11213
|
+
<cide-ele-icon class="tw-w-[1.38rem] tw-h-3">{{ isMinimized() ? 'open_in_full' : 'remove' }}</cide-ele-icon>
|
|
11214
|
+
</button>
|
|
11215
|
+
}
|
|
11216
|
+
@if (config().maximizable !== false) {
|
|
11217
|
+
<button
|
|
11218
|
+
cideEleButton
|
|
11219
|
+
variant="ghost"
|
|
11220
|
+
size="xs"
|
|
11221
|
+
type="button"
|
|
11222
|
+
(click)="toggleMaximize(); $event.stopPropagation()"
|
|
11223
|
+
class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
|
|
11224
|
+
[title]="isMaximized() ? 'Restore' : 'Maximize'">
|
|
11225
|
+
<cide-ele-icon class="tw-w-[1.38rem] tw-h-3">{{ isMaximized() ? 'fullscreen_exit' : 'fullscreen' }}</cide-ele-icon>
|
|
11226
|
+
</button>
|
|
11227
|
+
}
|
|
11228
|
+
@if (config().closable !== false) {
|
|
11229
|
+
<button
|
|
11230
|
+
cideEleButton
|
|
11231
|
+
variant="ghost"
|
|
11232
|
+
size="xs"
|
|
11233
|
+
type="button"
|
|
11234
|
+
(click)="close(); $event.stopPropagation()"
|
|
11235
|
+
class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
|
|
11236
|
+
title="Close">
|
|
11237
|
+
<cide-ele-icon class="tw-w-[1.38rem] tw-h-3">close</cide-ele-icon>
|
|
11238
|
+
</button>
|
|
11239
|
+
}
|
|
11240
|
+
</div>
|
|
11241
|
+
</div>
|
|
11242
|
+
|
|
11243
|
+
<!-- Content with @defer for performance -->
|
|
11244
|
+
@if (!isMinimized()) {
|
|
11245
|
+
<div
|
|
11246
|
+
class="tw-flex-1 tw-overflow-auto tw-overflow-x-hidden floating-container-content tw-bg-gray-50 tw-bg-opacity-90"
|
|
11247
|
+
[style.height]="isMaximized() ? 'calc(100vh - 100px)' : 'auto'"
|
|
11248
|
+
[style.min-height]="'200px'">
|
|
11249
|
+
@defer (when !isMinimized() && isVisible()) {
|
|
11250
|
+
<div class="tw-p-0 tw-min-h-full">
|
|
11251
|
+
<ng-content></ng-content>
|
|
11252
|
+
</div>
|
|
11253
|
+
} @placeholder {
|
|
11254
|
+
<div class="tw-flex tw-items-center tw-justify-center tw-p-4 tw-min-h-[200px]">
|
|
11255
|
+
<cide-ele-spinner size="sm"></cide-ele-spinner>
|
|
11256
|
+
<span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading content...</span>
|
|
11257
|
+
</div>
|
|
11258
|
+
}
|
|
11259
|
+
</div>
|
|
11260
|
+
}
|
|
11261
|
+
|
|
11262
|
+
<!-- Resize Handle (if resizable) -->
|
|
11263
|
+
@if (config().resizable !== false) {
|
|
11264
|
+
<div
|
|
11265
|
+
class="tw-absolute tw-bottom-0 tw-right-0 tw-w-[1.38rem] tw-h-3 tw-cursor-se-resize tw-bg-gray-300 tw-opacity-50 hover:tw-opacity-100"
|
|
11266
|
+
(mousedown)="startResize($event)">
|
|
11267
|
+
</div>
|
|
11268
|
+
}
|
|
11269
|
+
</div>
|
|
11223
11270
|
`, isInline: true, styles: [".tw-cursor-move{cursor:move!important}.tw-cursor-se-resize{cursor:se-resize!important}.floating-container-content{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#cbd5e1 #f1f5f9;position:relative;flex:1;display:flex;flex-direction:column}.floating-container-content::-webkit-scrollbar{width:8px}.floating-container-content::-webkit-scrollbar-track{background:#f8fafc;border-radius:4px;margin:4px}.floating-container-content::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px;transition:background-color .2s ease;border:1px solid #e2e8f0}.floating-container-content::-webkit-scrollbar-thumb:hover{background:#94a3b8;border-color:#cbd5e1}.floating-container-content::-webkit-scrollbar-thumb:active{background:#64748b}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }] });
|
|
11224
11271
|
}
|
|
11225
11272
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerComponent, decorators: [{
|
|
11226
11273
|
type: Component,
|
|
11227
|
-
args: [{ selector: 'cide-ele-floating-container', standalone: true, imports: [CommonModule, CideEleButtonComponent, CideIconComponent, CideSpinnerComponent], template: `
|
|
11228
|
-
<div
|
|
11229
|
-
#container
|
|
11230
|
-
class="tw-fixed tw-bg-gray-50 tw-bg-opacity-90 tw-backdrop-blur-sm tw-border tw-border-gray-200 tw-border-opacity-50 tw-rounded-xl tw-shadow-lg tw-transition-all tw-duration-200 tw-flex tw-flex-col"
|
|
11231
|
-
[style.left.px]="isMaximized() ? 20 : position().x"
|
|
11232
|
-
[style.top.px]="isMaximized() ? 20 : position().y"
|
|
11233
|
-
[style.width]="isMaximized() ? 'calc(100vw - 40px)' : (config().width || '400px')"
|
|
11234
|
-
[style.height]="isMaximized() ? 'calc(100vh - 40px)' : (isMinimized() ? 'auto' : (savedHeight || config().height || '500px'))"
|
|
11235
|
-
[style.min-width]="config().minWidth || '300px'"
|
|
11236
|
-
[style.min-height]="isMinimized() ? 'auto' : (config().minHeight || '200px')"
|
|
11237
|
-
[style.max-width]="config().maxWidth || '90vw'"
|
|
11238
|
-
[style.max-height]="config().maxHeight || '90vh'"
|
|
11239
|
-
[style.z-index]="zIndex()"
|
|
11240
|
-
[class.tw-cursor-move]="isDragging()"
|
|
11241
|
-
[class.tw-select-none]="true"
|
|
11242
|
-
(mousedown)="onMouseDown($event)"
|
|
11243
|
-
(mousemove)="onMouseMove($event)"
|
|
11244
|
-
(mouseup)="onMouseUp($event)"
|
|
11245
|
-
(mouseleave)="onMouseUp($event)">
|
|
11246
|
-
|
|
11247
|
-
<!-- Header -->
|
|
11248
|
-
<div
|
|
11249
|
-
class="tw-flex tw-items-center tw-justify-between tw-px-3 tw-py-2 tw-border-b tw-border-gray-200 tw-border-opacity-30 tw-rounded-t-xl tw-cursor-move tw-transition-all tw-duration-200 tw-shadow-sm tw-flex-shrink-0"
|
|
11250
|
-
[style.background]="getHeaderBackground()"
|
|
11251
|
-
(mousedown)="startDrag($event)"
|
|
11252
|
-
(click)="onHeaderClick($event)">
|
|
11253
|
-
|
|
11254
|
-
<!-- Title Section -->
|
|
11255
|
-
<div class="tw-flex tw-items-center tw-space-x-2 tw-text-white">
|
|
11256
|
-
@if (config().icon) {
|
|
11257
|
-
<cide-ele-icon class="tw-w-4 tw-h-4">{{ config().icon }}</cide-ele-icon>
|
|
11258
|
-
}
|
|
11259
|
-
<h2 class="tw-text-sm tw-font-medium tw-truncate">{{ config().title }}</h2>
|
|
11260
|
-
@if (isMinimized()) {
|
|
11261
|
-
<span class="tw-text-xs tw-opacity-75">(Click to restore)</span>
|
|
11262
|
-
}
|
|
11263
|
-
</div>
|
|
11264
|
-
|
|
11265
|
-
<!-- Action Buttons -->
|
|
11266
|
-
<div class="tw-flex tw-items-center tw-space-x-1">
|
|
11267
|
-
@if (config().minimizable !== false) {
|
|
11268
|
-
<button
|
|
11269
|
-
cideEleButton
|
|
11270
|
-
variant="ghost"
|
|
11271
|
-
size="xs"
|
|
11272
|
-
type="button"
|
|
11273
|
-
(click)="minimize(); $event.stopPropagation()"
|
|
11274
|
-
class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
|
|
11275
|
-
[title]="isMinimized() ? 'Restore' : 'Minimize'">
|
|
11276
|
-
<cide-ele-icon class="tw-w-[1.38rem] tw-h-3">{{ isMinimized() ? 'open_in_full' : 'remove' }}</cide-ele-icon>
|
|
11277
|
-
</button>
|
|
11278
|
-
}
|
|
11279
|
-
@if (config().maximizable !== false) {
|
|
11280
|
-
<button
|
|
11281
|
-
cideEleButton
|
|
11282
|
-
variant="ghost"
|
|
11283
|
-
size="xs"
|
|
11284
|
-
type="button"
|
|
11285
|
-
(click)="toggleMaximize(); $event.stopPropagation()"
|
|
11286
|
-
class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
|
|
11287
|
-
[title]="isMaximized() ? 'Restore' : 'Maximize'">
|
|
11288
|
-
<cide-ele-icon class="tw-w-[1.38rem] tw-h-3">{{ isMaximized() ? 'fullscreen_exit' : 'fullscreen' }}</cide-ele-icon>
|
|
11289
|
-
</button>
|
|
11290
|
-
}
|
|
11291
|
-
@if (config().closable !== false) {
|
|
11292
|
-
<button
|
|
11293
|
-
cideEleButton
|
|
11294
|
-
variant="ghost"
|
|
11295
|
-
size="xs"
|
|
11296
|
-
type="button"
|
|
11297
|
-
(click)="close(); $event.stopPropagation()"
|
|
11298
|
-
class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
|
|
11299
|
-
title="Close">
|
|
11300
|
-
<cide-ele-icon class="tw-w-[1.38rem] tw-h-3">close</cide-ele-icon>
|
|
11301
|
-
</button>
|
|
11302
|
-
}
|
|
11303
|
-
</div>
|
|
11304
|
-
</div>
|
|
11305
|
-
|
|
11306
|
-
<!-- Content with @defer for performance -->
|
|
11307
|
-
@if (!isMinimized()) {
|
|
11308
|
-
<div
|
|
11309
|
-
class="tw-flex-1 tw-overflow-auto tw-overflow-x-hidden floating-container-content tw-bg-gray-50 tw-bg-opacity-90"
|
|
11310
|
-
[style.height]="isMaximized() ? 'calc(100vh - 100px)' : 'auto'"
|
|
11311
|
-
[style.min-height]="'200px'">
|
|
11312
|
-
@defer (when !isMinimized() && isVisible()) {
|
|
11313
|
-
<div class="tw-p-0 tw-min-h-full">
|
|
11314
|
-
<ng-content></ng-content>
|
|
11315
|
-
</div>
|
|
11316
|
-
} @placeholder {
|
|
11317
|
-
<div class="tw-flex tw-items-center tw-justify-center tw-p-4 tw-min-h-[200px]">
|
|
11318
|
-
<cide-ele-spinner size="sm"></cide-ele-spinner>
|
|
11319
|
-
<span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading content...</span>
|
|
11320
|
-
</div>
|
|
11321
|
-
}
|
|
11322
|
-
</div>
|
|
11323
|
-
}
|
|
11324
|
-
|
|
11325
|
-
<!-- Resize Handle (if resizable) -->
|
|
11326
|
-
@if (config().resizable !== false) {
|
|
11327
|
-
<div
|
|
11328
|
-
class="tw-absolute tw-bottom-0 tw-right-0 tw-w-[1.38rem] tw-h-3 tw-cursor-se-resize tw-bg-gray-300 tw-opacity-50 hover:tw-opacity-100"
|
|
11329
|
-
(mousedown)="startResize($event)">
|
|
11330
|
-
</div>
|
|
11331
|
-
}
|
|
11332
|
-
</div>
|
|
11274
|
+
args: [{ selector: 'cide-ele-floating-container', standalone: true, imports: [CommonModule, CideEleButtonComponent, CideIconComponent, CideSpinnerComponent], template: `
|
|
11275
|
+
<div
|
|
11276
|
+
#container
|
|
11277
|
+
class="tw-fixed tw-bg-gray-50 tw-bg-opacity-90 tw-backdrop-blur-sm tw-border tw-border-gray-200 tw-border-opacity-50 tw-rounded-xl tw-shadow-lg tw-transition-all tw-duration-200 tw-flex tw-flex-col"
|
|
11278
|
+
[style.left.px]="isMaximized() ? 20 : position().x"
|
|
11279
|
+
[style.top.px]="isMaximized() ? 20 : position().y"
|
|
11280
|
+
[style.width]="isMaximized() ? 'calc(100vw - 40px)' : (config().width || '400px')"
|
|
11281
|
+
[style.height]="isMaximized() ? 'calc(100vh - 40px)' : (isMinimized() ? 'auto' : (savedHeight || config().height || '500px'))"
|
|
11282
|
+
[style.min-width]="config().minWidth || '300px'"
|
|
11283
|
+
[style.min-height]="isMinimized() ? 'auto' : (config().minHeight || '200px')"
|
|
11284
|
+
[style.max-width]="config().maxWidth || '90vw'"
|
|
11285
|
+
[style.max-height]="config().maxHeight || '90vh'"
|
|
11286
|
+
[style.z-index]="zIndex()"
|
|
11287
|
+
[class.tw-cursor-move]="isDragging()"
|
|
11288
|
+
[class.tw-select-none]="true"
|
|
11289
|
+
(mousedown)="onMouseDown($event)"
|
|
11290
|
+
(mousemove)="onMouseMove($event)"
|
|
11291
|
+
(mouseup)="onMouseUp($event)"
|
|
11292
|
+
(mouseleave)="onMouseUp($event)">
|
|
11293
|
+
|
|
11294
|
+
<!-- Header -->
|
|
11295
|
+
<div
|
|
11296
|
+
class="tw-flex tw-items-center tw-justify-between tw-px-3 tw-py-2 tw-border-b tw-border-gray-200 tw-border-opacity-30 tw-rounded-t-xl tw-cursor-move tw-transition-all tw-duration-200 tw-shadow-sm tw-flex-shrink-0"
|
|
11297
|
+
[style.background]="getHeaderBackground()"
|
|
11298
|
+
(mousedown)="startDrag($event)"
|
|
11299
|
+
(click)="onHeaderClick($event)">
|
|
11300
|
+
|
|
11301
|
+
<!-- Title Section -->
|
|
11302
|
+
<div class="tw-flex tw-items-center tw-space-x-2 tw-text-white">
|
|
11303
|
+
@if (config().icon) {
|
|
11304
|
+
<cide-ele-icon class="tw-w-4 tw-h-4">{{ config().icon }}</cide-ele-icon>
|
|
11305
|
+
}
|
|
11306
|
+
<h2 class="tw-text-sm tw-font-medium tw-truncate">{{ config().title }}</h2>
|
|
11307
|
+
@if (isMinimized()) {
|
|
11308
|
+
<span class="tw-text-xs tw-opacity-75">(Click to restore)</span>
|
|
11309
|
+
}
|
|
11310
|
+
</div>
|
|
11311
|
+
|
|
11312
|
+
<!-- Action Buttons -->
|
|
11313
|
+
<div class="tw-flex tw-items-center tw-space-x-1">
|
|
11314
|
+
@if (config().minimizable !== false) {
|
|
11315
|
+
<button
|
|
11316
|
+
cideEleButton
|
|
11317
|
+
variant="ghost"
|
|
11318
|
+
size="xs"
|
|
11319
|
+
type="button"
|
|
11320
|
+
(click)="minimize(); $event.stopPropagation()"
|
|
11321
|
+
class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
|
|
11322
|
+
[title]="isMinimized() ? 'Restore' : 'Minimize'">
|
|
11323
|
+
<cide-ele-icon class="tw-w-[1.38rem] tw-h-3">{{ isMinimized() ? 'open_in_full' : 'remove' }}</cide-ele-icon>
|
|
11324
|
+
</button>
|
|
11325
|
+
}
|
|
11326
|
+
@if (config().maximizable !== false) {
|
|
11327
|
+
<button
|
|
11328
|
+
cideEleButton
|
|
11329
|
+
variant="ghost"
|
|
11330
|
+
size="xs"
|
|
11331
|
+
type="button"
|
|
11332
|
+
(click)="toggleMaximize(); $event.stopPropagation()"
|
|
11333
|
+
class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
|
|
11334
|
+
[title]="isMaximized() ? 'Restore' : 'Maximize'">
|
|
11335
|
+
<cide-ele-icon class="tw-w-[1.38rem] tw-h-3">{{ isMaximized() ? 'fullscreen_exit' : 'fullscreen' }}</cide-ele-icon>
|
|
11336
|
+
</button>
|
|
11337
|
+
}
|
|
11338
|
+
@if (config().closable !== false) {
|
|
11339
|
+
<button
|
|
11340
|
+
cideEleButton
|
|
11341
|
+
variant="ghost"
|
|
11342
|
+
size="xs"
|
|
11343
|
+
type="button"
|
|
11344
|
+
(click)="close(); $event.stopPropagation()"
|
|
11345
|
+
class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
|
|
11346
|
+
title="Close">
|
|
11347
|
+
<cide-ele-icon class="tw-w-[1.38rem] tw-h-3">close</cide-ele-icon>
|
|
11348
|
+
</button>
|
|
11349
|
+
}
|
|
11350
|
+
</div>
|
|
11351
|
+
</div>
|
|
11352
|
+
|
|
11353
|
+
<!-- Content with @defer for performance -->
|
|
11354
|
+
@if (!isMinimized()) {
|
|
11355
|
+
<div
|
|
11356
|
+
class="tw-flex-1 tw-overflow-auto tw-overflow-x-hidden floating-container-content tw-bg-gray-50 tw-bg-opacity-90"
|
|
11357
|
+
[style.height]="isMaximized() ? 'calc(100vh - 100px)' : 'auto'"
|
|
11358
|
+
[style.min-height]="'200px'">
|
|
11359
|
+
@defer (when !isMinimized() && isVisible()) {
|
|
11360
|
+
<div class="tw-p-0 tw-min-h-full">
|
|
11361
|
+
<ng-content></ng-content>
|
|
11362
|
+
</div>
|
|
11363
|
+
} @placeholder {
|
|
11364
|
+
<div class="tw-flex tw-items-center tw-justify-center tw-p-4 tw-min-h-[200px]">
|
|
11365
|
+
<cide-ele-spinner size="sm"></cide-ele-spinner>
|
|
11366
|
+
<span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading content...</span>
|
|
11367
|
+
</div>
|
|
11368
|
+
}
|
|
11369
|
+
</div>
|
|
11370
|
+
}
|
|
11371
|
+
|
|
11372
|
+
<!-- Resize Handle (if resizable) -->
|
|
11373
|
+
@if (config().resizable !== false) {
|
|
11374
|
+
<div
|
|
11375
|
+
class="tw-absolute tw-bottom-0 tw-right-0 tw-w-[1.38rem] tw-h-3 tw-cursor-se-resize tw-bg-gray-300 tw-opacity-50 hover:tw-opacity-100"
|
|
11376
|
+
(mousedown)="startResize($event)">
|
|
11377
|
+
</div>
|
|
11378
|
+
}
|
|
11379
|
+
</div>
|
|
11333
11380
|
`, styles: [".tw-cursor-move{cursor:move!important}.tw-cursor-se-resize{cursor:se-resize!important}.floating-container-content{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#cbd5e1 #f1f5f9;position:relative;flex:1;display:flex;flex-direction:column}.floating-container-content::-webkit-scrollbar{width:8px}.floating-container-content::-webkit-scrollbar-track{background:#f8fafc;border-radius:4px;margin:4px}.floating-container-content::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px;transition:background-color .2s ease;border:1px solid #e2e8f0}.floating-container-content::-webkit-scrollbar-thumb:hover{background:#94a3b8;border-color:#cbd5e1}.floating-container-content::-webkit-scrollbar-thumb:active{background:#64748b}\n"] }]
|
|
11334
11381
|
}], ctorParameters: () => [], propDecorators: { config: [{
|
|
11335
11382
|
type: Input
|
|
@@ -11359,96 +11406,110 @@ class CideEleFloatingContainerManagerComponent {
|
|
|
11359
11406
|
// Computed properties
|
|
11360
11407
|
visibleContainers = computed(() => this.containerService.visibleContainers(), ...(ngDevMode ? [{ debugName: "visibleContainers" }] : []));
|
|
11361
11408
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerManagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11362
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingContainerManagerComponent, isStandalone: true, selector: "cide-ele-floating-container-manager", ngImport: i0, template: `
|
|
11363
|
-
@for (container of visibleContainers(); track container.id) {
|
|
11364
|
-
|
|
11365
|
-
|
|
11366
|
-
|
|
11367
|
-
|
|
11368
|
-
|
|
11369
|
-
|
|
11370
|
-
|
|
11371
|
-
|
|
11372
|
-
|
|
11373
|
-
|
|
11374
|
-
|
|
11375
|
-
|
|
11376
|
-
|
|
11377
|
-
|
|
11378
|
-
|
|
11379
|
-
|
|
11380
|
-
|
|
11381
|
-
|
|
11382
|
-
|
|
11383
|
-
|
|
11384
|
-
<div
|
|
11385
|
-
|
|
11386
|
-
|
|
11387
|
-
|
|
11388
|
-
|
|
11389
|
-
|
|
11390
|
-
|
|
11391
|
-
|
|
11392
|
-
<
|
|
11393
|
-
<
|
|
11394
|
-
|
|
11395
|
-
|
|
11396
|
-
|
|
11397
|
-
|
|
11398
|
-
|
|
11399
|
-
|
|
11400
|
-
|
|
11401
|
-
|
|
11402
|
-
|
|
11403
|
-
|
|
11404
|
-
|
|
11409
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingContainerManagerComponent, isStandalone: true, selector: "cide-ele-floating-container-manager", ngImport: i0, template: `
|
|
11410
|
+
@for (container of visibleContainers(); track container.id) {
|
|
11411
|
+
@if (container.config.backdrop) {
|
|
11412
|
+
<!-- Modal Backdrop for containers that request it -->
|
|
11413
|
+
<div
|
|
11414
|
+
class="tw-fixed tw-inset-0 tw-bg-black tw-bg-opacity-40 tw-backdrop-blur-[2px] tw-transition-opacity"
|
|
11415
|
+
[style.z-index]="(container.zIndex || 2000) - 1">
|
|
11416
|
+
</div>
|
|
11417
|
+
}
|
|
11418
|
+
<cide-ele-floating-container
|
|
11419
|
+
[config]="containerService.getConfigSignal(container.config)"
|
|
11420
|
+
[isMinimized]="containerService.getMinimizedSignal(container.id)"
|
|
11421
|
+
[isMaximized]="containerService.getMaximizedSignal(container.id)"
|
|
11422
|
+
[isVisible]="containerService.getVisibleSignal(container.id)"
|
|
11423
|
+
[zIndex]="containerService.getZIndexSignal(container.id)"
|
|
11424
|
+
(closeEvent)="containerService.onClose($event)"
|
|
11425
|
+
(minimizeEvent)="containerService.onMinimize($event)"
|
|
11426
|
+
(maximizeEvent)="containerService.onMaximize($event)"
|
|
11427
|
+
(clickEvent)="containerService.bringToFront($event)">
|
|
11428
|
+
|
|
11429
|
+
<!-- Dynamic content loading with @defer for performance -->
|
|
11430
|
+
@defer (when container.isVisible) {
|
|
11431
|
+
<div
|
|
11432
|
+
cideEleFloatingDynamic
|
|
11433
|
+
[componentId]="container.config.componentId || container.config.id"
|
|
11434
|
+
[componentConfig]="containerService.getComponentConfig(container.config)"
|
|
11435
|
+
[isVisible]="container.isVisible">
|
|
11436
|
+
</div>
|
|
11437
|
+
} @placeholder {
|
|
11438
|
+
<div class="tw-flex tw-items-center tw-justify-center tw-p-4">
|
|
11439
|
+
<cide-ele-spinner size="sm"></cide-ele-spinner>
|
|
11440
|
+
<span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading component...</span>
|
|
11441
|
+
</div>
|
|
11442
|
+
} @error {
|
|
11443
|
+
<div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-4 tw-text-center">
|
|
11444
|
+
<cide-ele-icon class="tw-w-8 tw-h-8 tw-text-red-500 tw-mb-2">error</cide-ele-icon>
|
|
11445
|
+
<p class="tw-text-red-600 tw-font-medium">Failed to load component</p>
|
|
11446
|
+
<p class="tw-text-gray-500 tw-text-sm">Component "{{ container.config.componentId || container.config.id }}" is not available</p>
|
|
11447
|
+
<button
|
|
11448
|
+
cideEleButton
|
|
11449
|
+
variant="outline"
|
|
11450
|
+
size="xs"
|
|
11451
|
+
(click)="containerService.onClose(container.id)"
|
|
11452
|
+
class="tw-mt-2">
|
|
11453
|
+
Close
|
|
11454
|
+
</button>
|
|
11455
|
+
</div>
|
|
11456
|
+
}
|
|
11457
|
+
</cide-ele-floating-container>
|
|
11458
|
+
}
|
|
11405
11459
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideEleFloatingContainerComponent, selector: "cide-ele-floating-container", inputs: ["config", "isMinimized", "isMaximized", "isVisible", "zIndex"], outputs: ["closeEvent", "minimizeEvent", "maximizeEvent", "clickEvent"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }], deferBlockDependencies: [() => [Promise.resolve().then(function () { return floatingContainerDynamic_directive; }).then(m => m.CideEleFloatingContainerDynamicDirective)]] });
|
|
11406
11460
|
}
|
|
11407
11461
|
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerManagerComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return floatingContainerDynamic_directive; }).then(m => m.CideEleFloatingContainerDynamicDirective)], resolveMetadata: CideEleFloatingContainerDynamicDirective => ({ decorators: [{
|
|
11408
11462
|
type: Component,
|
|
11409
|
-
args: [{ selector: 'cide-ele-floating-container-manager', standalone: true, imports: [CommonModule, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideSpinnerComponent, CideEleButtonComponent, CideIconComponent], template: `
|
|
11410
|
-
@for (container of visibleContainers(); track container.id) {
|
|
11411
|
-
|
|
11412
|
-
|
|
11413
|
-
|
|
11414
|
-
|
|
11415
|
-
|
|
11416
|
-
|
|
11417
|
-
|
|
11418
|
-
|
|
11419
|
-
|
|
11420
|
-
|
|
11421
|
-
|
|
11422
|
-
|
|
11423
|
-
|
|
11424
|
-
|
|
11425
|
-
|
|
11426
|
-
|
|
11427
|
-
|
|
11428
|
-
|
|
11429
|
-
|
|
11430
|
-
|
|
11431
|
-
<div
|
|
11432
|
-
|
|
11433
|
-
|
|
11434
|
-
|
|
11435
|
-
|
|
11436
|
-
|
|
11437
|
-
|
|
11438
|
-
|
|
11439
|
-
<
|
|
11440
|
-
<
|
|
11441
|
-
|
|
11442
|
-
|
|
11443
|
-
|
|
11444
|
-
|
|
11445
|
-
|
|
11446
|
-
|
|
11447
|
-
|
|
11448
|
-
|
|
11449
|
-
|
|
11450
|
-
|
|
11451
|
-
|
|
11463
|
+
args: [{ selector: 'cide-ele-floating-container-manager', standalone: true, imports: [CommonModule, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideSpinnerComponent, CideEleButtonComponent, CideIconComponent], template: `
|
|
11464
|
+
@for (container of visibleContainers(); track container.id) {
|
|
11465
|
+
@if (container.config.backdrop) {
|
|
11466
|
+
<!-- Modal Backdrop for containers that request it -->
|
|
11467
|
+
<div
|
|
11468
|
+
class="tw-fixed tw-inset-0 tw-bg-black tw-bg-opacity-40 tw-backdrop-blur-[2px] tw-transition-opacity"
|
|
11469
|
+
[style.z-index]="(container.zIndex || 2000) - 1">
|
|
11470
|
+
</div>
|
|
11471
|
+
}
|
|
11472
|
+
<cide-ele-floating-container
|
|
11473
|
+
[config]="containerService.getConfigSignal(container.config)"
|
|
11474
|
+
[isMinimized]="containerService.getMinimizedSignal(container.id)"
|
|
11475
|
+
[isMaximized]="containerService.getMaximizedSignal(container.id)"
|
|
11476
|
+
[isVisible]="containerService.getVisibleSignal(container.id)"
|
|
11477
|
+
[zIndex]="containerService.getZIndexSignal(container.id)"
|
|
11478
|
+
(closeEvent)="containerService.onClose($event)"
|
|
11479
|
+
(minimizeEvent)="containerService.onMinimize($event)"
|
|
11480
|
+
(maximizeEvent)="containerService.onMaximize($event)"
|
|
11481
|
+
(clickEvent)="containerService.bringToFront($event)">
|
|
11482
|
+
|
|
11483
|
+
<!-- Dynamic content loading with @defer for performance -->
|
|
11484
|
+
@defer (when container.isVisible) {
|
|
11485
|
+
<div
|
|
11486
|
+
cideEleFloatingDynamic
|
|
11487
|
+
[componentId]="container.config.componentId || container.config.id"
|
|
11488
|
+
[componentConfig]="containerService.getComponentConfig(container.config)"
|
|
11489
|
+
[isVisible]="container.isVisible">
|
|
11490
|
+
</div>
|
|
11491
|
+
} @placeholder {
|
|
11492
|
+
<div class="tw-flex tw-items-center tw-justify-center tw-p-4">
|
|
11493
|
+
<cide-ele-spinner size="sm"></cide-ele-spinner>
|
|
11494
|
+
<span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading component...</span>
|
|
11495
|
+
</div>
|
|
11496
|
+
} @error {
|
|
11497
|
+
<div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-4 tw-text-center">
|
|
11498
|
+
<cide-ele-icon class="tw-w-8 tw-h-8 tw-text-red-500 tw-mb-2">error</cide-ele-icon>
|
|
11499
|
+
<p class="tw-text-red-600 tw-font-medium">Failed to load component</p>
|
|
11500
|
+
<p class="tw-text-gray-500 tw-text-sm">Component "{{ container.config.componentId || container.config.id }}" is not available</p>
|
|
11501
|
+
<button
|
|
11502
|
+
cideEleButton
|
|
11503
|
+
variant="outline"
|
|
11504
|
+
size="xs"
|
|
11505
|
+
(click)="containerService.onClose(container.id)"
|
|
11506
|
+
class="tw-mt-2">
|
|
11507
|
+
Close
|
|
11508
|
+
</button>
|
|
11509
|
+
</div>
|
|
11510
|
+
}
|
|
11511
|
+
</cide-ele-floating-container>
|
|
11512
|
+
}
|
|
11452
11513
|
` }]
|
|
11453
11514
|
}], ctorParameters: null, propDecorators: null }) });
|
|
11454
11515
|
|