@es.framework/ng.ui.core 2.0.65 → 2.0.66

package/fesm2022/es.framework-ng.ui.core-repeat.mjs

@@ -119,260 +119,260 @@ class RepeatTypeComponent extends FieldArrayType {
         this.cdr.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RepeatTypeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: RepeatTypeComponent, isStandalone: true, selector: "formly-repeat-section", usesInheritance: true, ngImport: i0, template: `
-    <div class="dx-grid-container shadow-md border border-[#c1c1c1] bg-white text-[#333] rounded-sm overflow-hidden">
-      
-      <div class="bg-gradient-to-b from-[#fdfdfd] to-[#ececec] border-b border-[#c1c1c1] px-3 py-1.5 flex items-center justify-between gap-4">
-        <span class="text-[11px] font-bold uppercase tracking-tight text-[#555]">{{ field.props?.label || '' }}</span>
-        
-        @if (field.props?.['enableSearch']) {
-          <div class="relative flex items-center">
-            <i class="pi pi-search absolute left-2 text-[10px] text-gray-400"></i>
-            <input 
-              [(ngModel)]="searchQuery" 
-              (input)="onSearch()"
-              [placeholder]="'Search' | translate" 
-              class="pl-7 pr-2 py-1 text-[11px] border border-[#ccc] rounded-sm focus:border-[#0078d7] outline-none w-48 transition-all"
-            />
-          </div>
-        }
-      </div>
-
-      <div class="overflow-x-auto min-h-[100px]">
-        <table class="w-full border-collapse table-auto">
-          <thead>
-            <tr class="bg-[#f2f2f2] border-b border-[#d1d1d1]">
-              <th class="sticky right-0 z-10 w-12 border-r border-[#d1d1d1] bg-[#f2f2f2]"></th>
-    
-    <th class="sticky right-12 z-10 w-12 border-r border-[#d1d1d1] bg-[#f2f2f2]"></th>
-              @for (col of getFirstRowColumns(); track col) {
-                <!-- @if (!col.hide) { -->
-               
-                  <th  [class.hidden]="col.className?.includes('hidden') || col.hide" style="text-align: initial;" class="px-3 py-2  text-[12px] font-semibold text-[#444] border-r border-[#d1d1d1] bg-gradient-to-b from-[#fdfdfd] to-[#f2f2f2] whitespace-nowrap" >
-                    {{ (col.props?.label ?? '') | translate }}
-                  </th>
-                
-              }
-            </tr>
-          </thead>
-          
-          <tbody cdkDropList (cdkDropListDropped)="onDrop($event)" [cdkDropListData]="field.fieldGroup">
-            @for (row of displayedRows(); track row; let rowIndex = $index) {
-              <tr cdkDrag 
-                  [id]="'row-' + rowIndex"
-                  [class.bg-yellow-50]="isMatched(row)"
-                  class="dx-row border-b border-[#e0e0e0] hover:bg-[#eff4ff] transition-colors bg-white">
-                
-                <div *cdkDragPlaceholder class="bg-blue-50 border-2 border-dashed border-blue-200 h-10"></div>
-
-               <td class="sticky right-0 z-10 text-center border-r border-[#e0e0e0] bg-[#f6f6f6] py-0 px-2 cursor-move" cdkDragHandle>
-        <div class="flex items-center gap-1">
-           <i class="pi pi-bars text-[10px] text-gray-300"></i>
-           <span class="text-[10px] text-gray-400 font-mono">{{ (currentPage * pageSize) + rowIndex + 1 }}</span>
-        </div>
-      </td>
-
-      <td class="sticky right-12 z-10 px-2 py-0 text-center bg-[#fcfcfc] w-12 border-r border-[#e0e0e0]">
-        @if (canDelete(rowIndex) && !(field.props?.['delete']?.hidden ?? false)) {
-          <button type="button" (click)="remove(rowIndex)" class="p-2 text-gray-400 hover:text-red-600 transition-colors">
-            <i class="pi pi-trash text-[13px]"></i>
-          </button>
-        }
-      </td>
-                
-                @for (col of row.fieldGroup; track col) {
-                  <!-- @if (!col.hide) { -->
-                 
-                    <td [class.hidden]="col.className?.includes('hidden') || col.hide" class="p-0 border-r border-[#e0e0e0] align-middle min-w-[150px]">
-                      <div class="dx-field-cell">
-                        <formly-field [field]="col"></formly-field>
-                      </div>
-                    </td>
-                  
-                }
-
-               
-              </tr>
-            }
-          </tbody>
-
-        
-@if (field.props?.['showFooterTotals']) {
-  <tfoot>
-    <tr class="bg-[#f9f9f9] border-t-2 border-[#d1d1d1] font-bold text-[12px]">
-      <td class="border-r border-[#e0e0e0] bg-[#eee]"></td>
-      <td class="border-r border-[#e0e0e0] bg-[#eee]"></td>
-      
-      @for (col of getFirstRowColumns(); track col) {
-        <!-- @if (!col.hide) { -->
-          <td [class.hidden]="col.className?.includes('hidden') || col.hide" class="px-3 py-1 border-r border-[#e0e0e0] text-[#333]">
-            @if (getFooterConfig(col.key); as cfg) {
-              <div class="flex flex-col leading-tight">
-                 <span class="text-[8px] text-gray-400 uppercase tracking-tighter">
-                   {{ cfg.label | translate }}
-                 </span>
-                 <span class="text-[#005a9e]">
-                   {{ calculateTotal(col.key, cfg.type) }}
-                 </span>
-              </div>
-            }
-          </td>
-        
-      }
-      <td class="bg-[#eee]"></td>
-    </tr>
-  </tfoot>
-}
-        </table>
-      </div>
-
-      <div class="p-2 border-t border-[#c1c1c1] bg-[#f3f3f3] flex items-center justify-between">
-        <div class="flex items-center gap-2">
-          @if (!(field.props?.['add']?.hidden ?? false)) {
-            <button type="button" (click)="add()" class="flex items-center gap-2 px-4 py-1.5 rounded-sm border border-primary-500 bg-primary-600 text-white text-[11px] font-medium hover:bg-primary-700 shadow-sm transition-all">
-              <i class="pi pi-plus text-[10px]"></i>
-              <span>{{ 'Add' | translate }}</span>
-            </button>
-          }
-        </div>
-
-        <div class="flex items-center gap-1 text-[11px] text-gray-600">
-           <button (click)="nextPage()" [disabled]="currentPage >= totalPages() - 1" class="px-2 py-1 border border-gray-300 bg-white disabled:opacity-50"><i class="pi pi-chevron-right text-[9px]"></i></button>
-           <span class="px-2"> {{ currentPage + 1 }} - {{ totalPages() }}</span>
-            <button (click)="prevPage()" [disabled]="currentPage === 0" class="px-2 py-1 border border-gray-300 bg-white disabled:opacity-50"><i class="pi pi-chevron-left text-[9px]"></i></button>
-          
-        </div>
-      </div>
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: RepeatTypeComponent, isStandalone: true, selector: "formly-repeat-section", usesInheritance: true, ngImport: i0, template: `
+    <div class="dx-grid-container shadow-md border border-[#c1c1c1] bg-white text-[#333] rounded-sm overflow-hidden">
+      
+      <div class="bg-gradient-to-b from-[#fdfdfd] to-[#ececec] border-b border-[#c1c1c1] px-3 py-1.5 flex items-center justify-between gap-4">
+        <span class="text-[11px] font-bold uppercase tracking-tight text-[#555]">{{ field.props?.label || '' }}</span>
+        
+        @if (field.props?.['enableSearch']) {
+          <div class="relative flex items-center">
+            <i class="pi pi-search absolute left-2 text-[10px] text-gray-400"></i>
+            <input 
+              [(ngModel)]="searchQuery" 
+              (input)="onSearch()"
+              [placeholder]="'Search' | translate" 
+              class="pl-7 pr-2 py-1 text-[11px] border border-[#ccc] rounded-sm focus:border-[#0078d7] outline-none w-48 transition-all"
+            />
+          </div>
+        }
+      </div>
+
+      <div class="overflow-x-auto min-h-[100px]">
+        <table class="w-full border-collapse table-auto">
+          <thead>
+            <tr class="bg-[#f2f2f2] border-b border-[#d1d1d1]">
+              <th class="sticky right-0 z-10 w-12 border-r border-[#d1d1d1] bg-[#f2f2f2]"></th>
+    
+    <th class="sticky right-12 z-10 w-12 border-r border-[#d1d1d1] bg-[#f2f2f2]"></th>
+              @for (col of getFirstRowColumns(); track col) {
+                <!-- @if (!col.hide) { -->
+               
+                  <th  [class.hidden]="col.className?.includes('hidden') || col.hide" style="text-align: initial;" class="px-3 py-2  text-[12px] font-semibold text-[#444] border-r border-[#d1d1d1] bg-gradient-to-b from-[#fdfdfd] to-[#f2f2f2] whitespace-nowrap" >
+                    {{ (col.props?.label ?? '') | translate }}
+                  </th>
+                
+              }
+            </tr>
+          </thead>
+          
+          <tbody cdkDropList (cdkDropListDropped)="onDrop($event)" [cdkDropListData]="field.fieldGroup">
+            @for (row of displayedRows(); track row; let rowIndex = $index) {
+              <tr cdkDrag 
+                  [id]="'row-' + rowIndex"
+                  [class.bg-yellow-50]="isMatched(row)"
+                  class="dx-row border-b border-[#e0e0e0] hover:bg-[#eff4ff] transition-colors bg-white">
+                
+                <div *cdkDragPlaceholder class="bg-blue-50 border-2 border-dashed border-blue-200 h-10"></div>
+
+               <td class="sticky right-0 z-10 text-center border-r border-[#e0e0e0] bg-[#f6f6f6] py-0 px-2 cursor-move" cdkDragHandle>
+        <div class="flex items-center gap-1">
+           <i class="pi pi-bars text-[10px] text-gray-300"></i>
+           <span class="text-[10px] text-gray-400 font-mono">{{ (currentPage * pageSize) + rowIndex + 1 }}</span>
+        </div>
+      </td>
+
+      <td class="sticky right-12 z-10 px-2 py-0 text-center bg-[#fcfcfc] w-12 border-r border-[#e0e0e0]">
+        @if (canDelete(rowIndex) && !(field.props?.['delete']?.hidden ?? false)) {
+          <button type="button" (click)="remove(rowIndex)" class="p-2 text-gray-400 hover:text-red-600 transition-colors">
+            <i class="pi pi-trash text-[13px]"></i>
+          </button>
+        }
+      </td>
+                
+                @for (col of row.fieldGroup; track col) {
+                  <!-- @if (!col.hide) { -->
+                 
+                    <td [class.hidden]="col.className?.includes('hidden') || col.hide" class="p-0 border-r border-[#e0e0e0] align-middle min-w-[150px]">
+                      <div class="dx-field-cell">
+                        <formly-field [field]="col"></formly-field>
+                      </div>
+                    </td>
+                  
+                }
+
+               
+              </tr>
+            }
+          </tbody>
+
+        
+@if (field.props?.['showFooterTotals']) {
+  <tfoot>
+    <tr class="bg-[#f9f9f9] border-t-2 border-[#d1d1d1] font-bold text-[12px]">
+      <td class="border-r border-[#e0e0e0] bg-[#eee]"></td>
+      <td class="border-r border-[#e0e0e0] bg-[#eee]"></td>
+      
+      @for (col of getFirstRowColumns(); track col) {
+        <!-- @if (!col.hide) { -->
+          <td [class.hidden]="col.className?.includes('hidden') || col.hide" class="px-3 py-1 border-r border-[#e0e0e0] text-[#333]">
+            @if (getFooterConfig(col.key); as cfg) {
+              <div class="flex flex-col leading-tight">
+                 <span class="text-[8px] text-gray-400 uppercase tracking-tighter">
+                   {{ cfg.label | translate }}
+                 </span>
+                 <span class="text-[#005a9e]">
+                   {{ calculateTotal(col.key, cfg.type) }}
+                 </span>
+              </div>
+            }
+          </td>
+        
+      }
+      <td class="bg-[#eee]"></td>
+    </tr>
+  </tfoot>
+}
+        </table>
+      </div>
+
+      <div class="p-2 border-t border-[#c1c1c1] bg-[#f3f3f3] flex items-center justify-between">
+        <div class="flex items-center gap-2">
+          @if (!(field.props?.['add']?.hidden ?? false)) {
+            <button type="button" (click)="add()" class="flex items-center gap-2 px-4 py-1.5 rounded-sm border border-primary-500 bg-primary-600 text-white text-[11px] font-medium hover:bg-primary-700 shadow-sm transition-all">
+              <i class="pi pi-plus text-[10px]"></i>
+              <span>{{ 'Add' | translate }}</span>
+            </button>
+          }
+        </div>
+
+        <div class="flex items-center gap-1 text-[11px] text-gray-600">
+           <button (click)="nextPage()" [disabled]="currentPage >= totalPages() - 1" class="px-2 py-1 border border-gray-300 bg-white disabled:opacity-50"><i class="pi pi-chevron-right text-[9px]"></i></button>
+           <span class="px-2"> {{ currentPage + 1 }} - {{ totalPages() }}</span>
+            <button (click)="prevPage()" [disabled]="currentPage === 0" class="px-2 py-1 border border-gray-300 bg-white disabled:opacity-50"><i class="pi pi-chevron-left text-[9px]"></i></button>
+          
+        </div>
+      </div>
+    </div>
     `, isInline: true, styles: [".right-12{right:38px}\n"], dependencies: [{ kind: "component", type: FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RepeatTypeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'formly-repeat-section', standalone: true, imports: [FormlyField, TranslatePipe, DragDropModule, FormsModule], template: `
-    <div class="dx-grid-container shadow-md border border-[#c1c1c1] bg-white text-[#333] rounded-sm overflow-hidden">
-      
-      <div class="bg-gradient-to-b from-[#fdfdfd] to-[#ececec] border-b border-[#c1c1c1] px-3 py-1.5 flex items-center justify-between gap-4">
-        <span class="text-[11px] font-bold uppercase tracking-tight text-[#555]">{{ field.props?.label || '' }}</span>
-        
-        @if (field.props?.['enableSearch']) {
-          <div class="relative flex items-center">
-            <i class="pi pi-search absolute left-2 text-[10px] text-gray-400"></i>
-            <input 
-              [(ngModel)]="searchQuery" 
-              (input)="onSearch()"
-              [placeholder]="'Search' | translate" 
-              class="pl-7 pr-2 py-1 text-[11px] border border-[#ccc] rounded-sm focus:border-[#0078d7] outline-none w-48 transition-all"
-            />
-          </div>
-        }
-      </div>
-
-      <div class="overflow-x-auto min-h-[100px]">
-        <table class="w-full border-collapse table-auto">
-          <thead>
-            <tr class="bg-[#f2f2f2] border-b border-[#d1d1d1]">
-              <th class="sticky right-0 z-10 w-12 border-r border-[#d1d1d1] bg-[#f2f2f2]"></th>
-    
-    <th class="sticky right-12 z-10 w-12 border-r border-[#d1d1d1] bg-[#f2f2f2]"></th>
-              @for (col of getFirstRowColumns(); track col) {
-                <!-- @if (!col.hide) { -->
-               
-                  <th  [class.hidden]="col.className?.includes('hidden') || col.hide" style="text-align: initial;" class="px-3 py-2  text-[12px] font-semibold text-[#444] border-r border-[#d1d1d1] bg-gradient-to-b from-[#fdfdfd] to-[#f2f2f2] whitespace-nowrap" >
-                    {{ (col.props?.label ?? '') | translate }}
-                  </th>
-                
-              }
-            </tr>
-          </thead>
-          
-          <tbody cdkDropList (cdkDropListDropped)="onDrop($event)" [cdkDropListData]="field.fieldGroup">
-            @for (row of displayedRows(); track row; let rowIndex = $index) {
-              <tr cdkDrag 
-                  [id]="'row-' + rowIndex"
-                  [class.bg-yellow-50]="isMatched(row)"
-                  class="dx-row border-b border-[#e0e0e0] hover:bg-[#eff4ff] transition-colors bg-white">
-                
-                <div *cdkDragPlaceholder class="bg-blue-50 border-2 border-dashed border-blue-200 h-10"></div>
-
-               <td class="sticky right-0 z-10 text-center border-r border-[#e0e0e0] bg-[#f6f6f6] py-0 px-2 cursor-move" cdkDragHandle>
-        <div class="flex items-center gap-1">
-           <i class="pi pi-bars text-[10px] text-gray-300"></i>
-           <span class="text-[10px] text-gray-400 font-mono">{{ (currentPage * pageSize) + rowIndex + 1 }}</span>
-        </div>
-      </td>
-
-      <td class="sticky right-12 z-10 px-2 py-0 text-center bg-[#fcfcfc] w-12 border-r border-[#e0e0e0]">
-        @if (canDelete(rowIndex) && !(field.props?.['delete']?.hidden ?? false)) {
-          <button type="button" (click)="remove(rowIndex)" class="p-2 text-gray-400 hover:text-red-600 transition-colors">
-            <i class="pi pi-trash text-[13px]"></i>
-          </button>
-        }
-      </td>
-                
-                @for (col of row.fieldGroup; track col) {
-                  <!-- @if (!col.hide) { -->
-                 
-                    <td [class.hidden]="col.className?.includes('hidden') || col.hide" class="p-0 border-r border-[#e0e0e0] align-middle min-w-[150px]">
-                      <div class="dx-field-cell">
-                        <formly-field [field]="col"></formly-field>
-                      </div>
-                    </td>
-                  
-                }
-
-               
-              </tr>
-            }
-          </tbody>
-
-        
-@if (field.props?.['showFooterTotals']) {
-  <tfoot>
-    <tr class="bg-[#f9f9f9] border-t-2 border-[#d1d1d1] font-bold text-[12px]">
-      <td class="border-r border-[#e0e0e0] bg-[#eee]"></td>
-      <td class="border-r border-[#e0e0e0] bg-[#eee]"></td>
-      
-      @for (col of getFirstRowColumns(); track col) {
-        <!-- @if (!col.hide) { -->
-          <td [class.hidden]="col.className?.includes('hidden') || col.hide" class="px-3 py-1 border-r border-[#e0e0e0] text-[#333]">
-            @if (getFooterConfig(col.key); as cfg) {
-              <div class="flex flex-col leading-tight">
-                 <span class="text-[8px] text-gray-400 uppercase tracking-tighter">
-                   {{ cfg.label | translate }}
-                 </span>
-                 <span class="text-[#005a9e]">
-                   {{ calculateTotal(col.key, cfg.type) }}
-                 </span>
-              </div>
-            }
-          </td>
-        
-      }
-      <td class="bg-[#eee]"></td>
-    </tr>
-  </tfoot>
-}
-        </table>
-      </div>
-
-      <div class="p-2 border-t border-[#c1c1c1] bg-[#f3f3f3] flex items-center justify-between">
-        <div class="flex items-center gap-2">
-          @if (!(field.props?.['add']?.hidden ?? false)) {
-            <button type="button" (click)="add()" class="flex items-center gap-2 px-4 py-1.5 rounded-sm border border-primary-500 bg-primary-600 text-white text-[11px] font-medium hover:bg-primary-700 shadow-sm transition-all">
-              <i class="pi pi-plus text-[10px]"></i>
-              <span>{{ 'Add' | translate }}</span>
-            </button>
-          }
-        </div>
-
-        <div class="flex items-center gap-1 text-[11px] text-gray-600">
-           <button (click)="nextPage()" [disabled]="currentPage >= totalPages() - 1" class="px-2 py-1 border border-gray-300 bg-white disabled:opacity-50"><i class="pi pi-chevron-right text-[9px]"></i></button>
-           <span class="px-2"> {{ currentPage + 1 }} - {{ totalPages() }}</span>
-            <button (click)="prevPage()" [disabled]="currentPage === 0" class="px-2 py-1 border border-gray-300 bg-white disabled:opacity-50"><i class="pi pi-chevron-left text-[9px]"></i></button>
-          
-        </div>
-      </div>
-    </div>
+            args: [{ selector: 'formly-repeat-section', standalone: true, imports: [FormlyField, TranslatePipe, DragDropModule, FormsModule], template: `
+    <div class="dx-grid-container shadow-md border border-[#c1c1c1] bg-white text-[#333] rounded-sm overflow-hidden">
+      
+      <div class="bg-gradient-to-b from-[#fdfdfd] to-[#ececec] border-b border-[#c1c1c1] px-3 py-1.5 flex items-center justify-between gap-4">
+        <span class="text-[11px] font-bold uppercase tracking-tight text-[#555]">{{ field.props?.label || '' }}</span>
+        
+        @if (field.props?.['enableSearch']) {
+          <div class="relative flex items-center">
+            <i class="pi pi-search absolute left-2 text-[10px] text-gray-400"></i>
+            <input 
+              [(ngModel)]="searchQuery" 
+              (input)="onSearch()"
+              [placeholder]="'Search' | translate" 
+              class="pl-7 pr-2 py-1 text-[11px] border border-[#ccc] rounded-sm focus:border-[#0078d7] outline-none w-48 transition-all"
+            />
+          </div>
+        }
+      </div>
+
+      <div class="overflow-x-auto min-h-[100px]">
+        <table class="w-full border-collapse table-auto">
+          <thead>
+            <tr class="bg-[#f2f2f2] border-b border-[#d1d1d1]">
+              <th class="sticky right-0 z-10 w-12 border-r border-[#d1d1d1] bg-[#f2f2f2]"></th>
+    
+    <th class="sticky right-12 z-10 w-12 border-r border-[#d1d1d1] bg-[#f2f2f2]"></th>
+              @for (col of getFirstRowColumns(); track col) {
+                <!-- @if (!col.hide) { -->
+               
+                  <th  [class.hidden]="col.className?.includes('hidden') || col.hide" style="text-align: initial;" class="px-3 py-2  text-[12px] font-semibold text-[#444] border-r border-[#d1d1d1] bg-gradient-to-b from-[#fdfdfd] to-[#f2f2f2] whitespace-nowrap" >
+                    {{ (col.props?.label ?? '') | translate }}
+                  </th>
+                
+              }
+            </tr>
+          </thead>
+          
+          <tbody cdkDropList (cdkDropListDropped)="onDrop($event)" [cdkDropListData]="field.fieldGroup">
+            @for (row of displayedRows(); track row; let rowIndex = $index) {
+              <tr cdkDrag 
+                  [id]="'row-' + rowIndex"
+                  [class.bg-yellow-50]="isMatched(row)"
+                  class="dx-row border-b border-[#e0e0e0] hover:bg-[#eff4ff] transition-colors bg-white">
+                
+                <div *cdkDragPlaceholder class="bg-blue-50 border-2 border-dashed border-blue-200 h-10"></div>
+
+               <td class="sticky right-0 z-10 text-center border-r border-[#e0e0e0] bg-[#f6f6f6] py-0 px-2 cursor-move" cdkDragHandle>
+        <div class="flex items-center gap-1">
+           <i class="pi pi-bars text-[10px] text-gray-300"></i>
+           <span class="text-[10px] text-gray-400 font-mono">{{ (currentPage * pageSize) + rowIndex + 1 }}</span>
+        </div>
+      </td>
+
+      <td class="sticky right-12 z-10 px-2 py-0 text-center bg-[#fcfcfc] w-12 border-r border-[#e0e0e0]">
+        @if (canDelete(rowIndex) && !(field.props?.['delete']?.hidden ?? false)) {
+          <button type="button" (click)="remove(rowIndex)" class="p-2 text-gray-400 hover:text-red-600 transition-colors">
+            <i class="pi pi-trash text-[13px]"></i>
+          </button>
+        }
+      </td>
+                
+                @for (col of row.fieldGroup; track col) {
+                  <!-- @if (!col.hide) { -->
+                 
+                    <td [class.hidden]="col.className?.includes('hidden') || col.hide" class="p-0 border-r border-[#e0e0e0] align-middle min-w-[150px]">
+                      <div class="dx-field-cell">
+                        <formly-field [field]="col"></formly-field>
+                      </div>
+                    </td>
+                  
+                }
+
+               
+              </tr>
+            }
+          </tbody>
+
+        
+@if (field.props?.['showFooterTotals']) {
+  <tfoot>
+    <tr class="bg-[#f9f9f9] border-t-2 border-[#d1d1d1] font-bold text-[12px]">
+      <td class="border-r border-[#e0e0e0] bg-[#eee]"></td>
+      <td class="border-r border-[#e0e0e0] bg-[#eee]"></td>
+      
+      @for (col of getFirstRowColumns(); track col) {
+        <!-- @if (!col.hide) { -->
+          <td [class.hidden]="col.className?.includes('hidden') || col.hide" class="px-3 py-1 border-r border-[#e0e0e0] text-[#333]">
+            @if (getFooterConfig(col.key); as cfg) {
+              <div class="flex flex-col leading-tight">
+                 <span class="text-[8px] text-gray-400 uppercase tracking-tighter">
+                   {{ cfg.label | translate }}
+                 </span>
+                 <span class="text-[#005a9e]">
+                   {{ calculateTotal(col.key, cfg.type) }}
+                 </span>
+              </div>
+            }
+          </td>
+        
+      }
+      <td class="bg-[#eee]"></td>
+    </tr>
+  </tfoot>
+}
+        </table>
+      </div>
+
+      <div class="p-2 border-t border-[#c1c1c1] bg-[#f3f3f3] flex items-center justify-between">
+        <div class="flex items-center gap-2">
+          @if (!(field.props?.['add']?.hidden ?? false)) {
+            <button type="button" (click)="add()" class="flex items-center gap-2 px-4 py-1.5 rounded-sm border border-primary-500 bg-primary-600 text-white text-[11px] font-medium hover:bg-primary-700 shadow-sm transition-all">
+              <i class="pi pi-plus text-[10px]"></i>
+              <span>{{ 'Add' | translate }}</span>
+            </button>
+          }
+        </div>
+
+        <div class="flex items-center gap-1 text-[11px] text-gray-600">
+           <button (click)="nextPage()" [disabled]="currentPage >= totalPages() - 1" class="px-2 py-1 border border-gray-300 bg-white disabled:opacity-50"><i class="pi pi-chevron-right text-[9px]"></i></button>
+           <span class="px-2"> {{ currentPage + 1 }} - {{ totalPages() }}</span>
+            <button (click)="prevPage()" [disabled]="currentPage === 0" class="px-2 py-1 border border-gray-300 bg-white disabled:opacity-50"><i class="pi pi-chevron-left text-[9px]"></i></button>
+          
+        </div>
+      </div>
+    </div>
     `, styles: [".right-12{right:38px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
 
@@ -388,116 +388,116 @@ class RepeatTableViewType extends FieldArrayType {
         return this.model || [];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RepeatTableViewType, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: RepeatTableViewType, isStandalone: true, selector: "formly-repeat-table-view", usesInheritance: true, ngImport: i0, template: `
-  <div class="mb-0">
-  
-    <!-- <label class="block text-lg font-semibold mb-3">
-    {{ field.props?.label }}
-  </label> -->
-  
-  <div class="overflow-x-auto rounded-xl border">
-    <table class="min-w-full bg-white border-collapse">
-  
-      <thead class="bg-gray-100">
-        <tr>
-          <!-- text-left -->
-          @for (col of columns; track col) {
-            <th
-              class="px-4 py-3 text-right font-medium border-b"
-              >
-              {{ col.label | translate }}
-            </th>
-          }
-        </tr>
-      </thead>
-  
-      <tbody>
-        @for (row of rows; track row; let i = $index) {
-          <tr
-            class="border-b hover:bg-gray-50">
-            @for (col of columns; track col) {
-              <td
-                class="px-4 py-2">
-                {{ row[col.key] }}
-              </td>
-            }
-          </tr>
-        }
-  
-        @if (!rows || rows.length === 0) {
-          <tr>
-            <td [attr.colspan]="columns.length"
-              class="text-center py-6 text-gray-400">
-              No data
-            </td>
-          </tr>
-        }
-  
-      </tbody>
-  
-    </table>
-  </div>
-  
-  </div>
-  
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: RepeatTableViewType, isStandalone: true, selector: "formly-repeat-table-view", usesInheritance: true, ngImport: i0, template: `
+  <div class="mb-0">
+  
+    <!-- <label class="block text-lg font-semibold mb-3">
+    {{ field.props?.label }}
+  </label> -->
+  
+  <div class="overflow-x-auto rounded-xl border">
+    <table class="min-w-full bg-white border-collapse">
+  
+      <thead class="bg-gray-100">
+        <tr>
+          <!-- text-left -->
+          @for (col of columns; track col) {
+            <th
+              class="px-4 py-3 text-right font-medium border-b"
+              >
+              {{ col.label | translate }}
+            </th>
+          }
+        </tr>
+      </thead>
+  
+      <tbody>
+        @for (row of rows; track row; let i = $index) {
+          <tr
+            class="border-b hover:bg-gray-50">
+            @for (col of columns; track col) {
+              <td
+                class="px-4 py-2">
+                {{ row[col.key] }}
+              </td>
+            }
+          </tr>
+        }
+  
+        @if (!rows || rows.length === 0) {
+          <tr>
+            <td [attr.colspan]="columns.length"
+              class="text-center py-6 text-gray-400">
+              No data
+            </td>
+          </tr>
+        }
+  
+      </tbody>
+  
+    </table>
+  </div>
+  
+  </div>
+  
   `, isInline: true, dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: RepeatTableViewType, decorators: [{
             type: Component,
             args: [{
                     selector: 'formly-repeat-table-view',
-                    template: `
-  <div class="mb-0">
-  
-    <!-- <label class="block text-lg font-semibold mb-3">
-    {{ field.props?.label }}
-  </label> -->
-  
-  <div class="overflow-x-auto rounded-xl border">
-    <table class="min-w-full bg-white border-collapse">
-  
-      <thead class="bg-gray-100">
-        <tr>
-          <!-- text-left -->
-          @for (col of columns; track col) {
-            <th
-              class="px-4 py-3 text-right font-medium border-b"
-              >
-              {{ col.label | translate }}
-            </th>
-          }
-        </tr>
-      </thead>
-  
-      <tbody>
-        @for (row of rows; track row; let i = $index) {
-          <tr
-            class="border-b hover:bg-gray-50">
-            @for (col of columns; track col) {
-              <td
-                class="px-4 py-2">
-                {{ row[col.key] }}
-              </td>
-            }
-          </tr>
-        }
-  
-        @if (!rows || rows.length === 0) {
-          <tr>
-            <td [attr.colspan]="columns.length"
-              class="text-center py-6 text-gray-400">
-              No data
-            </td>
-          </tr>
-        }
-  
-      </tbody>
-  
-    </table>
-  </div>
-  
-  </div>
-  
+                    template: `
+  <div class="mb-0">
+  
+    <!-- <label class="block text-lg font-semibold mb-3">
+    {{ field.props?.label }}
+  </label> -->
+  
+  <div class="overflow-x-auto rounded-xl border">
+    <table class="min-w-full bg-white border-collapse">
+  
+      <thead class="bg-gray-100">
+        <tr>
+          <!-- text-left -->
+          @for (col of columns; track col) {
+            <th
+              class="px-4 py-3 text-right font-medium border-b"
+              >
+              {{ col.label | translate }}
+            </th>
+          }
+        </tr>
+      </thead>
+  
+      <tbody>
+        @for (row of rows; track row; let i = $index) {
+          <tr
+            class="border-b hover:bg-gray-50">
+            @for (col of columns; track col) {
+              <td
+                class="px-4 py-2">
+                {{ row[col.key] }}
+              </td>
+            }
+          </tr>
+        }
+  
+        @if (!rows || rows.length === 0) {
+          <tr>
+            <td [attr.colspan]="columns.length"
+              class="text-center py-6 text-gray-400">
+              No data
+            </td>
+          </tr>
+        }
+  
+      </tbody>
+  
+    </table>
+  </div>
+  
+  </div>
+  
   `,
                     imports: [TranslatePipe],
                 }]