cloud-ide-element 1.0.44 → 1.0.46

package/fesm2022/cloud-ide-element.mjs

@@ -1711,7 +1711,15 @@ class CideSelectComponent {
     }
     validateValue(value) {
         if (this.required) {
-            const isEmpty = (v) => v === null || v === undefined || v === '' || (typeof v === 'string' && v.trim() === '');
+            const isEmpty = (v) => {
+                if (v === null || v === undefined)
+                    return true;
+                if (typeof v === 'string')
+                    return v.trim() === '';
+                if (Array.isArray(v))
+                    return v.length === 0;
+                return false;
+            };
             if (isEmpty(value)) {
                 this.isValid = false;
                 return { required: 'This field is required' };
@@ -1901,9 +1909,17 @@ class CideSelectComponent {
                 return;
             const optionValue = this.getOptionValue(option);
             if (this.multiple) {
-                // Parse current CSV value to array
-                const currentCsv = this.ngModel || '';
-                const current = currentCsv ? currentCsv.split(',').map(v => v.trim()).filter(Boolean) : [];
+                // Handle both array and CSV formats
+                let current = [];
+                if (Array.isArray(this.ngModel)) {
+                    // Handle array values (new format)
+                    current = this.ngModel.map(v => v?.toString() || '').filter(Boolean);
+                }
+                else {
+                    // Handle string values (legacy CSV format)
+                    const currentCsv = this.ngModel || '';
+                    current = currentCsv ? currentCsv.split(',').map(v => v.trim()).filter(Boolean) : [];
+                }
                 const idx = current.findIndex(v => v.toString() === optionValue.toString());
                 if (idx >= 0) {
                     current.splice(idx, 1);
@@ -1911,13 +1927,20 @@ class CideSelectComponent {
                 else {
                     current.push(optionValue.toString());
                 }
-                // Convert back to CSV
-                const newCsv = current.join(',');
-                this.ngModel = newCsv;
-                this.onChange(newCsv);
-                this.ngModelChange.emit(newCsv);
+                // For array-based form controls, emit array; for CSV-based, emit CSV
+                if (Array.isArray(this.ngModel)) {
+                    this.ngModel = current;
+                    this.onChange(current);
+                    this.ngModelChange.emit(current);
+                }
+                else {
+                    const newCsv = current.join(',');
+                    this.ngModel = newCsv;
+                    this.onChange(newCsv);
+                    this.ngModelChange.emit(newCsv);
+                }
                 this.selectionChange.emit(option);
-                this.validateValue(newCsv);
+                this.validateValue(this.ngModel);
                 this.isTouched = true;
                 this.onTouched();
                 // Do not close dropdown in multi-select mode
@@ -2001,17 +2024,34 @@ class CideSelectComponent {
         }
     }
     clearSelection() {
-        this.ngModel = '';
-        this.onChange('');
-        this.ngModelChange.emit('');
-        this.validateValue('');
+        if (this.multiple && Array.isArray(this.ngModel)) {
+            this.ngModel = [];
+            this.onChange([]);
+            this.ngModelChange.emit([]);
+            this.validateValue([]);
+        }
+        else {
+            this.ngModel = '';
+            this.onChange('');
+            this.ngModelChange.emit('');
+            this.validateValue('');
+        }
     }
     getSelectedOptionLabel() {
         if (this.multiple) {
-            const csvValue = this.ngModel || '';
-            if (!csvValue.trim())
-                return '';
-            const values = csvValue.split(',').map(v => v.trim()).filter(Boolean);
+            // Handle both string (CSV) and array values
+            let values = [];
+            if (Array.isArray(this.ngModel)) {
+                // Handle array values (new format)
+                values = this.ngModel.map(v => v?.toString() || '').filter(Boolean);
+            }
+            else {
+                // Handle string values (legacy CSV format)
+                const csvValue = this.ngModel || '';
+                if (!csvValue.trim())
+                    return '';
+                values = csvValue.split(',').map(v => v.trim()).filter(Boolean);
+            }
             const labels = values
                 .map(v => this.options.find(o => this.getOptionValue(o).toString() === v))
                 .map(option => option ? this.getOptionLabel(option) : '')
@@ -2066,10 +2106,19 @@ class CideSelectComponent {
     }
     isOptionSelected(option) {
         if (this.multiple) {
-            const csvValue = this.ngModel || '';
-            if (!csvValue.trim())
-                return false;
-            const values = csvValue.split(',').map(v => v.trim()).filter(Boolean);
+            // Handle both array and CSV formats
+            let values = [];
+            if (Array.isArray(this.ngModel)) {
+                // Handle array values (new format)
+                values = this.ngModel.map(v => v?.toString() || '').filter(Boolean);
+            }
+            else {
+                // Handle string values (legacy CSV format)
+                const csvValue = this.ngModel || '';
+                if (!csvValue.trim())
+                    return false;
+                values = csvValue.split(',').map(v => v.trim()).filter(Boolean);
+            }
             return values.includes(this.getOptionValue(option).toString());
         }
         return this.getOptionValue(option) === this.ngModel;
@@ -3765,7 +3814,9 @@ class CideEleDataGridComponent {
         }
     }
     updatePageSize(value) {
-        this.pageSize.set(+value);
+        // Handle array case (shouldn't happen for page size, but just in case)
+        const pageSizeValue = Array.isArray(value) ? value[0] : value;
+        this.pageSize.set(+pageSizeValue);
         this.onPageSizeChange();
     }
     previousPage() {
@@ -4493,7 +4544,7 @@ class CideEleDataGridComponent {
         return this.mergedConfig().scroll;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleDataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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-2 tw-border-b tw-border-gray-200\">\n      <div class=\"tw-flex tw-items-center tw-justify-between\">\n        <!-- Search Input -->\n        <div class=\"tw-max-w-md\">\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          </cide-ele-input>\n        </div>\n        \n        <!-- 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                    (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                    (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 columns; 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-truncate\"\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              {{ column.header }}\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-2 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-2 sm:tw-space-y-0\">\n        \n        <!-- Results Info -->\n        @if (paginationConfig.showPageInfo) {\n          <div class=\"tw-flex tw-items-center tw-space-x-4\">\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               <span class=\"tw-text-sm tw-text-gray-700\">Per page:</span>\n               <div class=\"tw-w-20 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=\"sm\"\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-3\">\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              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"onPageChange(1)\"\n              [disabled]=\"currentPage() === 1 || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u00AB\u00AB\n            </button>\n            \n            <!-- Previous Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"previousPage()\"\n              [disabled]=\"!hasPreviousPage() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u2039\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                  cideEleButton\n                  [variant]=\"currentPage() === page ? 'primary' : 'outline'\"\n                  size=\"sm\"\n                  type=\"button\"\n                  (click)=\"onPageChange(page)\"\n                  [disabled]=\"isRefreshing()\"\n                  class=\"tw-px-3 tw-py-2 tw-text-sm tw-border tw-rounded-md tw-transition-colors\"\n                  [ngClass]=\"{\n                    'tw-bg-blue-600 tw-text-white tw-border-blue-600': currentPage() === page,\n                    'tw-bg-white tw-text-gray-700 tw-border-gray-300 hover:tw-bg-gray-50': currentPage() !== page\n                  }\">\n                  {{ page }}\n                </button>\n              }\n            }\n            \n            <!-- Next Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"nextPage()\"\n              [disabled]=\"!hasNextPage() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u203A\n            </button>\n            \n            <!-- Last Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"onPageChange(totalPages())\"\n              [disabled]=\"currentPage() === totalPages() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u00BB\u00BB\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-2 tw-border-l tw-border-gray-200 tw-pl-3\">\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-20\">\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                          (keydown.enter)=\"onJumpToPage()\">\n                      </cide-ele-input>\n                    </div>\n                  <button\n                    cideEleButton\n                    variant=\"outline\"\n                    size=\"sm\"\n                    type=\"button\"\n                    (click)=\"onJumpToPage()\"\n                    [disabled]=\"isRefreshing()\"\n                    class=\"tw-px-3 tw-py-2 tw-text-sm tw-bg-gray-100 tw-text-gray-700 tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n                    Go\n                  </button>\n                </div>\n              }\n              \n              <!-- Refresh Button -->\n              @if (paginationConfig.showRefresh) {\n                <button\n                  cideEleButton\n                  variant=\"outline\"\n                  size=\"sm\"\n                  type=\"button\"\n                  (click)=\"onRefresh()\"\n                  [disabled]=\"isRefreshing()\"\n                  class=\"!tw-w-10 !tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-600 tw-bg-gray-100 tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n                  @if (isRefreshing()) {\n                    <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" fill=\"none\" viewBox=\"0 0 24 24\">\n                      <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                      <path class=\"tw-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n                    </svg>\n                  } @else {\n                    <svg class=\"tw-h-4 tw-w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"></path>\n                    </svg>\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}.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}.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:#f9fafb}.data-grid-container.tw-table-sm th,.data-grid-container.tw-table-sm td{padding:.5rem 1rem}.data-grid-container tbody tr:hover{background-color:#f3f4f6}.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:#fffc;z-index:10}.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 .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 button{transition:all .15s ease-in-out}.data-grid-container .pagination-controls button:hover:not(:disabled){transform:translateY(-1px)}.data-grid-container .pagination-controls button:disabled{cursor:not-allowed}.data-grid-container .pagination-controls button.active{box-shadow:0 2px 4px #3b82f64d}.data-grid-container .pagination-controls input[type=number]{transition:border-color .15s ease-in-out}.data-grid-container .pagination-controls input[type=number]:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .status-badge{font-weight:500;letter-spacing:.025em}.data-grid-container .status-badge.active{background-color:#d1fae5;color:#065f46}.data-grid-container .status-badge.inactive{background-color:#fee2e2;color:#991b1b}.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 .empty-state{padding:3rem 1.5rem;text-align:center}.data-grid-container .empty-state svg{margin:0 auto 1rem;opacity:.4}.data-grid-container .empty-state h3{margin-bottom:.5rem}.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.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"] }] });
+    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-2 tw-border-b tw-border-gray-200\">\n      <div class=\"tw-flex tw-items-center tw-justify-between\">\n        <!-- Search Input -->\n        <div class=\"tw-max-w-md\">\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          </cide-ele-input>\n        </div>\n        \n        <!-- 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 columns; 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-truncate\"\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              {{ column.header }}\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-2 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-2 sm:tw-space-y-0\">\n        \n        <!-- Results Info -->\n        @if (paginationConfig.showPageInfo) {\n          <div class=\"tw-flex tw-items-center tw-space-x-4\">\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               <span class=\"tw-text-sm tw-text-gray-700\">Per page:</span>\n               <div class=\"tw-w-20 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=\"sm\"\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-3\">\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              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"onPageChange(1)\"\n              [disabled]=\"currentPage() === 1 || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u00AB\u00AB\n            </button>\n            \n            <!-- Previous Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"previousPage()\"\n              [disabled]=\"!hasPreviousPage() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u2039\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                  cideEleButton\n                  [variant]=\"currentPage() === page ? 'primary' : 'outline'\"\n                  size=\"sm\"\n                  type=\"button\"\n                  (click)=\"onPageChange(page)\"\n                  [disabled]=\"isRefreshing()\"\n                  class=\"tw-px-3 tw-py-2 tw-text-sm tw-border tw-rounded-md tw-transition-colors\"\n                  [ngClass]=\"{\n                    'tw-bg-blue-600 tw-text-white tw-border-blue-600': currentPage() === page,\n                    'tw-bg-white tw-text-gray-700 tw-border-gray-300 hover:tw-bg-gray-50': currentPage() !== page\n                  }\">\n                  {{ page }}\n                </button>\n              }\n            }\n            \n            <!-- Next Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"nextPage()\"\n              [disabled]=\"!hasNextPage() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u203A\n            </button>\n            \n            <!-- Last Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"onPageChange(totalPages())\"\n              [disabled]=\"currentPage() === totalPages() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u00BB\u00BB\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-2 tw-border-l tw-border-gray-200 tw-pl-3\">\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-20\">\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                          (keydown.enter)=\"onJumpToPage()\">\n                      </cide-ele-input>\n                    </div>\n                  <button\n                    cideEleButton\n                    variant=\"outline\"\n                    size=\"sm\"\n                    type=\"button\"\n                    (click)=\"onJumpToPage()\"\n                    [disabled]=\"isRefreshing()\"\n                    class=\"tw-px-3 tw-py-2 tw-text-sm tw-bg-gray-100 tw-text-gray-700 tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n                    Go\n                  </button>\n                </div>\n              }\n              \n              <!-- Refresh Button -->\n              @if (paginationConfig.showRefresh) {\n                <button\n                  cideEleButton\n                  variant=\"outline\"\n                  size=\"sm\"\n                  type=\"button\"\n                  (click)=\"onRefresh()\"\n                  [disabled]=\"isRefreshing()\"\n                  class=\"!tw-w-10 !tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-600 tw-bg-gray-100 tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n                  @if (isRefreshing()) {\n                    <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" fill=\"none\" viewBox=\"0 0 24 24\">\n                      <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                      <path class=\"tw-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n                    </svg>\n                  } @else {\n                    <svg class=\"tw-h-4 tw-w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"></path>\n                    </svg>\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}.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}.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:#f9fafb}.data-grid-container.tw-table-sm th,.data-grid-container.tw-table-sm td{padding:.5rem 1rem}.data-grid-container tbody tr:hover{background-color:#f3f4f6}.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:#fffc;z-index:10}.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 .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 button{transition:all .15s ease-in-out}.data-grid-container .pagination-controls button:hover:not(:disabled){transform:translateY(-1px)}.data-grid-container .pagination-controls button:disabled{cursor:not-allowed}.data-grid-container .pagination-controls button.active{box-shadow:0 2px 4px #3b82f64d}.data-grid-container .pagination-controls input[type=number]{transition:border-color .15s ease-in-out}.data-grid-container .pagination-controls input[type=number]:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .status-badge{font-weight:500;letter-spacing:.025em}.data-grid-container .status-badge.active{background-color:#d1fae5;color:#065f46}.data-grid-container .status-badge.inactive{background-color:#fee2e2;color:#991b1b}.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 .empty-state{padding:3rem 1.5rem;text-align:center}.data-grid-container .empty-state svg{margin:0 auto 1rem;opacity:.4}.data-grid-container .empty-state h3{margin-bottom:.5rem}.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.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleDataGridComponent, decorators: [{
             type: Component,
@@ -4505,7 +4556,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideSelectComponent,
                         CideIconComponent,
                         CideEleButtonComponent
-                    ], 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-2 tw-border-b tw-border-gray-200\">\n      <div class=\"tw-flex tw-items-center tw-justify-between\">\n        <!-- Search Input -->\n        <div class=\"tw-max-w-md\">\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          </cide-ele-input>\n        </div>\n        \n        <!-- 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                    (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                    (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 columns; 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-truncate\"\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              {{ column.header }}\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-2 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-2 sm:tw-space-y-0\">\n        \n        <!-- Results Info -->\n        @if (paginationConfig.showPageInfo) {\n          <div class=\"tw-flex tw-items-center tw-space-x-4\">\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               <span class=\"tw-text-sm tw-text-gray-700\">Per page:</span>\n               <div class=\"tw-w-20 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=\"sm\"\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-3\">\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              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"onPageChange(1)\"\n              [disabled]=\"currentPage() === 1 || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u00AB\u00AB\n            </button>\n            \n            <!-- Previous Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"previousPage()\"\n              [disabled]=\"!hasPreviousPage() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u2039\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                  cideEleButton\n                  [variant]=\"currentPage() === page ? 'primary' : 'outline'\"\n                  size=\"sm\"\n                  type=\"button\"\n                  (click)=\"onPageChange(page)\"\n                  [disabled]=\"isRefreshing()\"\n                  class=\"tw-px-3 tw-py-2 tw-text-sm tw-border tw-rounded-md tw-transition-colors\"\n                  [ngClass]=\"{\n                    'tw-bg-blue-600 tw-text-white tw-border-blue-600': currentPage() === page,\n                    'tw-bg-white tw-text-gray-700 tw-border-gray-300 hover:tw-bg-gray-50': currentPage() !== page\n                  }\">\n                  {{ page }}\n                </button>\n              }\n            }\n            \n            <!-- Next Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"nextPage()\"\n              [disabled]=\"!hasNextPage() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u203A\n            </button>\n            \n            <!-- Last Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"onPageChange(totalPages())\"\n              [disabled]=\"currentPage() === totalPages() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u00BB\u00BB\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-2 tw-border-l tw-border-gray-200 tw-pl-3\">\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-20\">\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                          (keydown.enter)=\"onJumpToPage()\">\n                      </cide-ele-input>\n                    </div>\n                  <button\n                    cideEleButton\n                    variant=\"outline\"\n                    size=\"sm\"\n                    type=\"button\"\n                    (click)=\"onJumpToPage()\"\n                    [disabled]=\"isRefreshing()\"\n                    class=\"tw-px-3 tw-py-2 tw-text-sm tw-bg-gray-100 tw-text-gray-700 tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n                    Go\n                  </button>\n                </div>\n              }\n              \n              <!-- Refresh Button -->\n              @if (paginationConfig.showRefresh) {\n                <button\n                  cideEleButton\n                  variant=\"outline\"\n                  size=\"sm\"\n                  type=\"button\"\n                  (click)=\"onRefresh()\"\n                  [disabled]=\"isRefreshing()\"\n                  class=\"!tw-w-10 !tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-600 tw-bg-gray-100 tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n                  @if (isRefreshing()) {\n                    <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" fill=\"none\" viewBox=\"0 0 24 24\">\n                      <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                      <path class=\"tw-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n                    </svg>\n                  } @else {\n                    <svg class=\"tw-h-4 tw-w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"></path>\n                    </svg>\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}.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}.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:#f9fafb}.data-grid-container.tw-table-sm th,.data-grid-container.tw-table-sm td{padding:.5rem 1rem}.data-grid-container tbody tr:hover{background-color:#f3f4f6}.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:#fffc;z-index:10}.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 .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 button{transition:all .15s ease-in-out}.data-grid-container .pagination-controls button:hover:not(:disabled){transform:translateY(-1px)}.data-grid-container .pagination-controls button:disabled{cursor:not-allowed}.data-grid-container .pagination-controls button.active{box-shadow:0 2px 4px #3b82f64d}.data-grid-container .pagination-controls input[type=number]{transition:border-color .15s ease-in-out}.data-grid-container .pagination-controls input[type=number]:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .status-badge{font-weight:500;letter-spacing:.025em}.data-grid-container .status-badge.active{background-color:#d1fae5;color:#065f46}.data-grid-container .status-badge.inactive{background-color:#fee2e2;color:#991b1b}.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 .empty-state{padding:3rem 1.5rem;text-align:center}.data-grid-container .empty-state svg{margin:0 auto 1rem;opacity:.4}.data-grid-container .empty-state h3{margin-bottom:.5rem}.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"] }]
+                    ], 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-2 tw-border-b tw-border-gray-200\">\n      <div class=\"tw-flex tw-items-center tw-justify-between\">\n        <!-- Search Input -->\n        <div class=\"tw-max-w-md\">\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          </cide-ele-input>\n        </div>\n        \n        <!-- 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 columns; 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-truncate\"\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              {{ column.header }}\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-2 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-2 sm:tw-space-y-0\">\n        \n        <!-- Results Info -->\n        @if (paginationConfig.showPageInfo) {\n          <div class=\"tw-flex tw-items-center tw-space-x-4\">\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               <span class=\"tw-text-sm tw-text-gray-700\">Per page:</span>\n               <div class=\"tw-w-20 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=\"sm\"\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-3\">\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              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"onPageChange(1)\"\n              [disabled]=\"currentPage() === 1 || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u00AB\u00AB\n            </button>\n            \n            <!-- Previous Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"previousPage()\"\n              [disabled]=\"!hasPreviousPage() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u2039\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                  cideEleButton\n                  [variant]=\"currentPage() === page ? 'primary' : 'outline'\"\n                  size=\"sm\"\n                  type=\"button\"\n                  (click)=\"onPageChange(page)\"\n                  [disabled]=\"isRefreshing()\"\n                  class=\"tw-px-3 tw-py-2 tw-text-sm tw-border tw-rounded-md tw-transition-colors\"\n                  [ngClass]=\"{\n                    'tw-bg-blue-600 tw-text-white tw-border-blue-600': currentPage() === page,\n                    'tw-bg-white tw-text-gray-700 tw-border-gray-300 hover:tw-bg-gray-50': currentPage() !== page\n                  }\">\n                  {{ page }}\n                </button>\n              }\n            }\n            \n            <!-- Next Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"nextPage()\"\n              [disabled]=\"!hasNextPage() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u203A\n            </button>\n            \n            <!-- Last Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"onPageChange(totalPages())\"\n              [disabled]=\"currentPage() === totalPages() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u00BB\u00BB\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-2 tw-border-l tw-border-gray-200 tw-pl-3\">\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-20\">\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                          (keydown.enter)=\"onJumpToPage()\">\n                      </cide-ele-input>\n                    </div>\n                  <button\n                    cideEleButton\n                    variant=\"outline\"\n                    size=\"sm\"\n                    type=\"button\"\n                    (click)=\"onJumpToPage()\"\n                    [disabled]=\"isRefreshing()\"\n                    class=\"tw-px-3 tw-py-2 tw-text-sm tw-bg-gray-100 tw-text-gray-700 tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n                    Go\n                  </button>\n                </div>\n              }\n              \n              <!-- Refresh Button -->\n              @if (paginationConfig.showRefresh) {\n                <button\n                  cideEleButton\n                  variant=\"outline\"\n                  size=\"sm\"\n                  type=\"button\"\n                  (click)=\"onRefresh()\"\n                  [disabled]=\"isRefreshing()\"\n                  class=\"!tw-w-10 !tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-600 tw-bg-gray-100 tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n                  @if (isRefreshing()) {\n                    <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" fill=\"none\" viewBox=\"0 0 24 24\">\n                      <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                      <path class=\"tw-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n                    </svg>\n                  } @else {\n                    <svg class=\"tw-h-4 tw-w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"></path>\n                    </svg>\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}.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}.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:#f9fafb}.data-grid-container.tw-table-sm th,.data-grid-container.tw-table-sm td{padding:.5rem 1rem}.data-grid-container tbody tr:hover{background-color:#f3f4f6}.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:#fffc;z-index:10}.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 .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 button{transition:all .15s ease-in-out}.data-grid-container .pagination-controls button:hover:not(:disabled){transform:translateY(-1px)}.data-grid-container .pagination-controls button:disabled{cursor:not-allowed}.data-grid-container .pagination-controls button.active{box-shadow:0 2px 4px #3b82f64d}.data-grid-container .pagination-controls input[type=number]{transition:border-color .15s ease-in-out}.data-grid-container .pagination-controls input[type=number]:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .status-badge{font-weight:500;letter-spacing:.025em}.data-grid-container .status-badge.active{background-color:#d1fae5;color:#065f46}.data-grid-container .status-badge.inactive{background-color:#fee2e2;color:#991b1b}.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 .empty-state{padding:3rem 1.5rem;text-align:center}.data-grid-container .empty-state svg{margin:0 auto 1rem;opacity:.4}.data-grid-container .empty-state h3{margin-bottom:.5rem}.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"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], templateRenderers: [{