orbiq-neural-ui-kit 1.0.32 → 1.0.34

package/fesm2022/orbiq-neural-ui-kit.mjs

@@ -12207,8 +12207,8 @@ class NeuralDataTableComponent {
     ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
     count = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "count" }] : /* istanbul ignore next */ []));
-    infoLink = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "infoLink" }] : /* istanbul ignore next */ []));
+    hasInfo = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasInfo" }] : /* istanbul ignore next */ []));
     searchPlaceholder = input('Search', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
     allColumns = input([], /* @ts-ignore */
@@ -12228,6 +12228,11 @@ class NeuralDataTableComponent {
     onSearch = new EventEmitter();
     onPageChange = new EventEmitter();
     sortChange = new EventEmitter();
+    // New Emitters for Advanced Actions
+    onInfoClick = new EventEmitter();
+    onRefreshClick = new EventEmitter();
+    onViewChange = new EventEmitter();
+    onFilterClick = new EventEmitter();
     cellTemplate;
     isPreferencesOpen = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isPreferencesOpen" }] : /* istanbul ignore next */ []));
@@ -12259,37 +12264,55 @@ class NeuralDataTableComponent {
         this.sortChange.emit(key);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralDataTableComponent, isStandalone: true, selector: "neural-data-table", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, infoLink: { classPropertyName: "infoLink", publicName: "infoLink", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, allColumns: { classPropertyName: "allColumns", publicName: "allColumns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: true, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, emptyStateTitle: { classPropertyName: "emptyStateTitle", publicName: "emptyStateTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyStateDesc: { classPropertyName: "emptyStateDesc", publicName: "emptyStateDesc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSearch: "onSearch", onPageChange: "onPageChange", sortChange: "sortChange" }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ["cellTemplate"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralDataTableComponent, isStandalone: true, selector: "neural-data-table", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, hasInfo: { classPropertyName: "hasInfo", publicName: "hasInfo", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, allColumns: { classPropertyName: "allColumns", publicName: "allColumns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: true, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, emptyStateTitle: { classPropertyName: "emptyStateTitle", publicName: "emptyStateTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyStateDesc: { classPropertyName: "emptyStateDesc", publicName: "emptyStateDesc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSearch: "onSearch", onPageChange: "onPageChange", sortChange: "sortChange", onInfoClick: "onInfoClick", onRefreshClick: "onRefreshClick", onViewChange: "onViewChange", onFilterClick: "onFilterClick" }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ["cellTemplate"], descendants: true }], ngImport: i0, template: `
     <div class="flex flex-col w-full h-full bg-white rounded-md border border-outline-gray-2 shadow-sm overflow-hidden">
       
       <!-- Top Header Area -->
-      <div class="flex items-start justify-between px-4 py-4 border-b border-outline-gray-2 bg-surface-base">
-        <div class="flex flex-col gap-1">
-          <div class="flex items-center gap-2">
-            <h2 class="text-[17px] font-semibold text-ink-gray-9">{{ title() }}</h2>
-            @if (count() !== undefined) {
-              <span class="text-[15px] font-medium text-ink-gray-5">({{ count() }})</span>
-            }
-            @if (infoLink()) {
-              <a [href]="infoLink()" class="text-xs font-medium text-blue-600 hover:underline ml-2 cursor-pointer">Información</a>
-            }
-          </div>
-          @if (subtitle()) {
-            <p class="text-[13px] text-ink-gray-6">{{ subtitle() }}</p>
+      <div class="flex items-center justify-between px-4 py-2.5 border-b border-outline-gray-2 bg-white">
+        <!-- Left: Title & Info -->
+        <div class="flex items-center gap-3">
+          <h2 class="text-[14px] font-semibold text-ink-gray-9">{{ title() }}</h2>
+          @if (count() !== undefined) {
+            <span class="text-[12px] font-medium text-ink-gray-5 px-1.5 py-0.5 rounded-full bg-surface-gray-2">{{ count() }}</span>
+          }
+          @if (hasInfo()) {
+            <button class="text-[12px] font-medium text-blue-600 hover:underline cursor-pointer flex items-center gap-1" (click)="onInfoClick.emit()">
+              Información
+            </button>
           }
         </div>
 
-        <div class="flex items-center gap-2">
+        <!-- Right: Actions Toolbar -->
+        <div class="flex items-center gap-1.5">
+          
+          <!-- Built-in Actions Group (Clean, no background) -->
+          <div class="flex items-center gap-0.5">
+            <neural-button variant="ghost" size="sm" icon="lucide-list" [iconLeft]="true" class="!px-1.5 !text-[12px] !font-medium !text-ink-gray-6 hover:!text-ink-gray-9" (click)="onViewChange.emit('report')">Vista</neural-button>
+            <neural-button variant="ghost" size="sm" icon="lucide-filter" [iconLeft]="true" class="!px-1.5 !text-[12px] !font-medium !text-ink-gray-6 hover:!text-ink-gray-9" (click)="onFilterClick.emit()">Filtrar</neural-button>
+            <neural-button variant="ghost" size="sm" icon="lucide-arrow-up-down" [iconLeft]="true" class="!px-1.5 !text-[12px] !font-medium !text-ink-gray-6 hover:!text-ink-gray-9" title="Orden">Orden</neural-button>
+          </div>
+          
+          <div class="w-px h-4 bg-outline-gray-2 mx-1"></div>
+          
+          <div class="flex items-center gap-0.5">
+            <button class="flex items-center justify-center size-7 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Actualizar" (click)="onRefreshClick.emit()">
+              <i class="lucide-refresh-cw size-3.5" style="stroke-width: 1.5px;"></i>
+            </button>
+            <button class="flex items-center justify-center size-7 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Más acciones">
+              <i class="lucide-more-horizontal size-3.5" style="stroke-width: 1.5px;"></i>
+            </button>
+          </div>
+
+          <div class="w-px h-5 bg-outline-gray-2 mx-1"></div>
+
           <!-- External Actions (Refresh, Create, etc) -->
           <ng-content select="[header-actions]"></ng-content>
         </div>
       </div>
 
-      <!-- Toolbar Area -->
-      <div class="flex items-center justify-between px-4 py-2 border-b border-outline-gray-1 bg-surface-gray-1 min-h-[52px]">
-        
-        <!-- Search -->
-        <div class="w-72">
+      <!-- Search Area -->
+      <div class="flex items-center justify-between px-4 py-2 border-b border-outline-gray-1 bg-surface-base">
+        <div class="w-full max-w-sm">
           <neural-text-input 
             [placeholder]="searchPlaceholder()"
             icon="lucide-search"
@@ -12297,69 +12320,11 @@ class NeuralDataTableComponent {
             (valueModelChange)="onSearch.emit($event)"
           ></neural-text-input>
         </div>
-
-        <!-- Pagination & Settings -->
-        <div class="flex items-center gap-3">
-          <div class="flex items-center gap-1 text-sm text-ink-gray-7 font-medium">
-            <button class="p-1 hover:bg-surface-gray-3 rounded text-ink-gray-4 hover:text-ink-gray-8 disabled:opacity-50" [disabled]="page() === 1" (click)="onPageChange.emit(page() - 1)">
-              <i class="lucide-chevron-left size-4"></i>
-            </button>
-            <span class="px-2">{{ page() }}</span>
-            <button class="p-1 hover:bg-surface-gray-3 rounded text-ink-gray-4 hover:text-ink-gray-8 disabled:opacity-50" [disabled]="page() >= totalPages()" (click)="onPageChange.emit(page() + 1)">
-              <i class="lucide-chevron-right size-4"></i>
-            </button>
-          </div>
-          
-          <div class="w-px h-4 bg-outline-gray-3 mx-1"></div>
-
-          <!-- Preferences Dialog Trigger -->
-          <button class="p-1.5 hover:bg-surface-gray-3 rounded text-ink-gray-5 hover:text-ink-gray-8 transition-colors" (click)="isPreferencesOpen.set(true)">
-            <i class="lucide-settings size-4"></i>
-          </button>
-
-          <!-- Preferences Dialog Content -->
-          <neural-dialog [openModel]="isPreferencesOpen()" (openModelChange)="isPreferencesOpen.set($event)" [hasTitleSlot]="true" [hasActionsSlot]="true" size="md">
-            <div title>
-              <h3 class="text-lg font-semibold text-ink-gray-9">Preferencias</h3>
-            </div>
-
-            <div class="flex flex-col gap-6 py-2">
-              <div class="flex items-start gap-4">
-                <neural-checkbox [checkedModel]="wrapLines()" (checkedModelChange)="wrapLines.set($event)"></neural-checkbox>
-                <div class="flex flex-col">
-                  <span class="text-sm font-medium text-ink-gray-9">Ajustar líneas</span>
-                  <span class="text-xs text-ink-gray-5">Seleccione la casilla de verificación para ajustar todas las líneas.</span>
-                </div>
-              </div>
-
-              <div class="border-t border-outline-gray-2 pt-4">
-                <div class="flex flex-col mb-3">
-                  <span class="text-sm font-semibold text-ink-gray-9">Seleccionar columnas visibles</span>
-                  <span class="text-xs text-ink-gray-5">Personalice la visibilidad y el orden de las columnas.</span>
-                </div>
-                
-                <div class="flex flex-col gap-0 border border-outline-gray-2 rounded-md bg-white overflow-hidden">
-                  @for (col of allColumns(); track col.key) {
-                    <div class="flex items-center justify-between p-3 border-b border-outline-gray-1 last:border-0 hover:bg-surface-gray-1">
-                      <div class="flex items-center gap-2">
-                        <i class="lucide-grip-vertical size-4 text-ink-gray-4 cursor-grab"></i>
-                        <span class="text-sm text-ink-gray-8 font-medium">{{ col.label }}</span>
-                      </div>
-                      <neural-switch [valueModel]="isColumnVisible(col.key)" (valueModelChange)="toggleColumnVisibility(col.key, $event)"></neural-switch>
-                    </div>
-                  }
-                </div>
-              </div>
-            </div>
-
-            <div actions>
-              <div class="flex items-center justify-end gap-2 w-full">
-                <neural-button variant="ghost" (click)="isPreferencesOpen.set(false)">Cancelar</neural-button>
-                <neural-button variant="solid" theme="blue" (click)="applyPreferences()">Continuar</neural-button>
-              </div>
-            </div>
-          </neural-dialog>
-        </div>
+        
+        <!-- Preferences / Columns Dialog Trigger (Moved to search row) -->
+        <button class="flex items-center justify-center size-7 rounded-md border border-outline-gray-2 bg-white hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors shadow-sm" (click)="isPreferencesOpen.set(true)" title="Configurar columnas">
+          <i class="lucide-settings size-3.5" style="stroke-width: 1.5px;"></i>
+        </button>
       </div>
 
       <!-- Table Content -->
@@ -12369,7 +12334,7 @@ class NeuralDataTableComponent {
             <tr class="border-b border-outline-gray-2 bg-white">
               @for (col of visibleColumns(); track col.key) {
                 <th 
-                  class="px-4 py-3 text-[13px] font-semibold text-ink-gray-7 truncate border-r border-outline-gray-2 last:border-r-0"
+                  class="px-4 py-2.5 text-[12px] font-semibold text-ink-gray-6 uppercase tracking-wider truncate border-r border-outline-gray-2 last:border-r-0"
                   [style.width]="col.width || 'auto'"
                 >
                   <div class="flex items-center justify-between group cursor-pointer hover:text-ink-gray-9" (click)="col.sortable ? onSort(col.key) : null">
@@ -12388,7 +12353,7 @@ class NeuralDataTableComponent {
                 <tr class="border-b border-outline-gray-1 hover:bg-surface-gray-1 transition-colors group">
                   @for (col of visibleColumns(); track col.key) {
                     <td 
-                      class="px-4 py-3 text-[13.5px] text-ink-gray-9"
+                      class="px-4 py-2.5 text-[12px] font-medium text-ink-gray-9"
                       [class.truncate]="!wrapLines()"
                       [class.whitespace-nowrap]="!wrapLines()"
                     >
@@ -12413,6 +12378,78 @@ class NeuralDataTableComponent {
           </tbody>
         </table>
       </div>
+
+      <!-- Footer / Pagination Area -->
+      <div class="flex items-center justify-between px-4 py-2 border-t border-outline-gray-2 bg-white">
+        <!-- Left Footer -->
+        <div class="text-[12px] text-ink-gray-5">
+          <!-- Espacio para contadores de selección -->
+        </div>
+
+        <!-- Right Footer: Pagination & Settings -->
+        <div class="flex items-center gap-4">
+          <div class="flex items-center gap-0.5 text-[12px] text-ink-gray-7 font-medium">
+            <button class="p-1 hover:bg-surface-gray-2 rounded text-ink-gray-5 hover:text-ink-gray-8 disabled:opacity-30 disabled:hover:bg-transparent" [disabled]="page() === 1" (click)="onPageChange.emit(1)" title="Primera página">
+              <i class="lucide-chevrons-left size-3.5" style="stroke-width: 1.5px;"></i>
+            </button>
+            <button class="p-1 hover:bg-surface-gray-2 rounded text-ink-gray-5 hover:text-ink-gray-8 disabled:opacity-30 disabled:hover:bg-transparent" [disabled]="page() === 1" (click)="onPageChange.emit(page() - 1)" title="Anterior">
+              <i class="lucide-chevron-left size-3.5" style="stroke-width: 1.5px;"></i>
+            </button>
+            
+            <span class="px-2 min-w-[70px] text-center">{{ page() }} <span class="text-ink-gray-4 mx-1">/</span> {{ totalPages() }}</span>
+            
+            <button class="p-1 hover:bg-surface-gray-2 rounded text-ink-gray-5 hover:text-ink-gray-8 disabled:opacity-30 disabled:hover:bg-transparent" [disabled]="page() >= totalPages()" (click)="onPageChange.emit(page() + 1)" title="Siguiente">
+              <i class="lucide-chevron-right size-3.5" style="stroke-width: 1.5px;"></i>
+            </button>
+            <button class="p-1 hover:bg-surface-gray-2 rounded text-ink-gray-5 hover:text-ink-gray-8 disabled:opacity-30 disabled:hover:bg-transparent" [disabled]="page() >= totalPages()" (click)="onPageChange.emit(totalPages())" title="Última página">
+              <i class="lucide-chevrons-right size-3.5" style="stroke-width: 1.5px;"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Dialog moved outside of the main flex flows -->
+      <neural-dialog [openModel]="isPreferencesOpen()" (openModelChange)="isPreferencesOpen.set($event)" [hasTitleSlot]="true" [hasActionsSlot]="true" size="md">
+        <div title>
+          <h3 class="text-lg font-semibold text-ink-gray-9">Preferencias</h3>
+        </div>
+
+        <div class="flex flex-col gap-6 py-2">
+          <div class="flex items-start gap-4">
+            <neural-checkbox [checkedModel]="wrapLines()" (checkedModelChange)="wrapLines.set($event)"></neural-checkbox>
+            <div class="flex flex-col">
+              <span class="text-sm font-medium text-ink-gray-9">Ajustar líneas</span>
+              <span class="text-xs text-ink-gray-5">Seleccione la casilla de verificación para ajustar todas las líneas.</span>
+            </div>
+          </div>
+
+          <div class="border-t border-outline-gray-2 pt-4">
+            <div class="flex flex-col mb-3">
+              <span class="text-sm font-semibold text-ink-gray-9">Seleccionar columnas visibles</span>
+              <span class="text-xs text-ink-gray-5">Personalice la visibilidad y el orden de las columnas.</span>
+            </div>
+            
+            <div class="flex flex-col gap-0 border border-outline-gray-2 rounded-md bg-white overflow-hidden">
+              @for (col of allColumns(); track col.key) {
+                <div class="flex items-center justify-between p-3 border-b border-outline-gray-1 last:border-0 hover:bg-surface-gray-1">
+                  <div class="flex items-center gap-2">
+                    <i class="lucide-grip-vertical size-4 text-ink-gray-4 cursor-grab"></i>
+                    <span class="text-sm text-ink-gray-8 font-medium">{{ col.label }}</span>
+                  </div>
+                  <neural-switch [valueModel]="isColumnVisible(col.key)" (valueModelChange)="toggleColumnVisibility(col.key, $event)"></neural-switch>
+                </div>
+              }
+            </div>
+          </div>
+        </div>
+
+        <div actions>
+          <div class="flex items-center justify-end gap-2 w-full">
+            <neural-button variant="ghost" (click)="isPreferencesOpen.set(false)">Cancelar</neural-button>
+            <neural-button variant="solid" theme="blue" (click)="applyPreferences()">Continuar</neural-button>
+          </div>
+        </div>
+      </neural-dialog>
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }, { kind: "component", type: NeuralTextInputComponent, selector: "neural-text-input", inputs: ["valueModel", "type", "size", "variant", "placeholder", "disabled", "readonly", "required", "label", "description", "error", "id", "debounce", "wrapperClass", "wrapperStyle", "hasLabelSlot", "hasDescriptionSlot", "hasPrefixSlot", "hasSuffixSlot"], outputs: ["valueModelChange", "debounceChange"] }, { kind: "component", type: NeuralDialogComponent, selector: "neural-dialog", inputs: ["openModel", "title", "message", "icon", "size", "position", "paddingTop", "actions", "dismissible", "showCloseButton", "bare", "hasTitleSlot", "hasActionsSlot", "hasDefaultSlot"], outputs: ["openModelChange"] }, { kind: "component", type: NeuralSwitchComponent, selector: "neural-switch", inputs: ["valueModel", "size", "padded", "disabled", "required", "controlPosition", "icon", "label", "description", "error", "id", "hasLabelSlot", "hasDescriptionSlot"], outputs: ["valueModelChange"] }, { kind: "component", type: NeuralCheckboxComponent, selector: "neural-checkbox", inputs: ["checkedModel", "size", "padded", "indeterminate", "disabled", "required", "label", "description", "error", "id", "hasLabelSlot", "hasDescriptionSlot"], outputs: ["checkedModelChange"] }] });
 }
@@ -12433,33 +12470,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
     <div class="flex flex-col w-full h-full bg-white rounded-md border border-outline-gray-2 shadow-sm overflow-hidden">
       
       <!-- Top Header Area -->
-      <div class="flex items-start justify-between px-4 py-4 border-b border-outline-gray-2 bg-surface-base">
-        <div class="flex flex-col gap-1">
-          <div class="flex items-center gap-2">
-            <h2 class="text-[17px] font-semibold text-ink-gray-9">{{ title() }}</h2>
-            @if (count() !== undefined) {
-              <span class="text-[15px] font-medium text-ink-gray-5">({{ count() }})</span>
-            }
-            @if (infoLink()) {
-              <a [href]="infoLink()" class="text-xs font-medium text-blue-600 hover:underline ml-2 cursor-pointer">Información</a>
-            }
-          </div>
-          @if (subtitle()) {
-            <p class="text-[13px] text-ink-gray-6">{{ subtitle() }}</p>
+      <div class="flex items-center justify-between px-4 py-2.5 border-b border-outline-gray-2 bg-white">
+        <!-- Left: Title & Info -->
+        <div class="flex items-center gap-3">
+          <h2 class="text-[14px] font-semibold text-ink-gray-9">{{ title() }}</h2>
+          @if (count() !== undefined) {
+            <span class="text-[12px] font-medium text-ink-gray-5 px-1.5 py-0.5 rounded-full bg-surface-gray-2">{{ count() }}</span>
+          }
+          @if (hasInfo()) {
+            <button class="text-[12px] font-medium text-blue-600 hover:underline cursor-pointer flex items-center gap-1" (click)="onInfoClick.emit()">
+              Información
+            </button>
           }
         </div>
 
-        <div class="flex items-center gap-2">
+        <!-- Right: Actions Toolbar -->
+        <div class="flex items-center gap-1.5">
+          
+          <!-- Built-in Actions Group (Clean, no background) -->
+          <div class="flex items-center gap-0.5">
+            <neural-button variant="ghost" size="sm" icon="lucide-list" [iconLeft]="true" class="!px-1.5 !text-[12px] !font-medium !text-ink-gray-6 hover:!text-ink-gray-9" (click)="onViewChange.emit('report')">Vista</neural-button>
+            <neural-button variant="ghost" size="sm" icon="lucide-filter" [iconLeft]="true" class="!px-1.5 !text-[12px] !font-medium !text-ink-gray-6 hover:!text-ink-gray-9" (click)="onFilterClick.emit()">Filtrar</neural-button>
+            <neural-button variant="ghost" size="sm" icon="lucide-arrow-up-down" [iconLeft]="true" class="!px-1.5 !text-[12px] !font-medium !text-ink-gray-6 hover:!text-ink-gray-9" title="Orden">Orden</neural-button>
+          </div>
+          
+          <div class="w-px h-4 bg-outline-gray-2 mx-1"></div>
+          
+          <div class="flex items-center gap-0.5">
+            <button class="flex items-center justify-center size-7 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Actualizar" (click)="onRefreshClick.emit()">
+              <i class="lucide-refresh-cw size-3.5" style="stroke-width: 1.5px;"></i>
+            </button>
+            <button class="flex items-center justify-center size-7 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Más acciones">
+              <i class="lucide-more-horizontal size-3.5" style="stroke-width: 1.5px;"></i>
+            </button>
+          </div>
+
+          <div class="w-px h-5 bg-outline-gray-2 mx-1"></div>
+
           <!-- External Actions (Refresh, Create, etc) -->
           <ng-content select="[header-actions]"></ng-content>
         </div>
       </div>
 
-      <!-- Toolbar Area -->
-      <div class="flex items-center justify-between px-4 py-2 border-b border-outline-gray-1 bg-surface-gray-1 min-h-[52px]">
-        
-        <!-- Search -->
-        <div class="w-72">
+      <!-- Search Area -->
+      <div class="flex items-center justify-between px-4 py-2 border-b border-outline-gray-1 bg-surface-base">
+        <div class="w-full max-w-sm">
           <neural-text-input 
             [placeholder]="searchPlaceholder()"
             icon="lucide-search"
@@ -12467,69 +12522,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
             (valueModelChange)="onSearch.emit($event)"
           ></neural-text-input>
         </div>
-
-        <!-- Pagination & Settings -->
-        <div class="flex items-center gap-3">
-          <div class="flex items-center gap-1 text-sm text-ink-gray-7 font-medium">
-            <button class="p-1 hover:bg-surface-gray-3 rounded text-ink-gray-4 hover:text-ink-gray-8 disabled:opacity-50" [disabled]="page() === 1" (click)="onPageChange.emit(page() - 1)">
-              <i class="lucide-chevron-left size-4"></i>
-            </button>
-            <span class="px-2">{{ page() }}</span>
-            <button class="p-1 hover:bg-surface-gray-3 rounded text-ink-gray-4 hover:text-ink-gray-8 disabled:opacity-50" [disabled]="page() >= totalPages()" (click)="onPageChange.emit(page() + 1)">
-              <i class="lucide-chevron-right size-4"></i>
-            </button>
-          </div>
-          
-          <div class="w-px h-4 bg-outline-gray-3 mx-1"></div>
-
-          <!-- Preferences Dialog Trigger -->
-          <button class="p-1.5 hover:bg-surface-gray-3 rounded text-ink-gray-5 hover:text-ink-gray-8 transition-colors" (click)="isPreferencesOpen.set(true)">
-            <i class="lucide-settings size-4"></i>
-          </button>
-
-          <!-- Preferences Dialog Content -->
-          <neural-dialog [openModel]="isPreferencesOpen()" (openModelChange)="isPreferencesOpen.set($event)" [hasTitleSlot]="true" [hasActionsSlot]="true" size="md">
-            <div title>
-              <h3 class="text-lg font-semibold text-ink-gray-9">Preferencias</h3>
-            </div>
-
-            <div class="flex flex-col gap-6 py-2">
-              <div class="flex items-start gap-4">
-                <neural-checkbox [checkedModel]="wrapLines()" (checkedModelChange)="wrapLines.set($event)"></neural-checkbox>
-                <div class="flex flex-col">
-                  <span class="text-sm font-medium text-ink-gray-9">Ajustar líneas</span>
-                  <span class="text-xs text-ink-gray-5">Seleccione la casilla de verificación para ajustar todas las líneas.</span>
-                </div>
-              </div>
-
-              <div class="border-t border-outline-gray-2 pt-4">
-                <div class="flex flex-col mb-3">
-                  <span class="text-sm font-semibold text-ink-gray-9">Seleccionar columnas visibles</span>
-                  <span class="text-xs text-ink-gray-5">Personalice la visibilidad y el orden de las columnas.</span>
-                </div>
-                
-                <div class="flex flex-col gap-0 border border-outline-gray-2 rounded-md bg-white overflow-hidden">
-                  @for (col of allColumns(); track col.key) {
-                    <div class="flex items-center justify-between p-3 border-b border-outline-gray-1 last:border-0 hover:bg-surface-gray-1">
-                      <div class="flex items-center gap-2">
-                        <i class="lucide-grip-vertical size-4 text-ink-gray-4 cursor-grab"></i>
-                        <span class="text-sm text-ink-gray-8 font-medium">{{ col.label }}</span>
-                      </div>
-                      <neural-switch [valueModel]="isColumnVisible(col.key)" (valueModelChange)="toggleColumnVisibility(col.key, $event)"></neural-switch>
-                    </div>
-                  }
-                </div>
-              </div>
-            </div>
-
-            <div actions>
-              <div class="flex items-center justify-end gap-2 w-full">
-                <neural-button variant="ghost" (click)="isPreferencesOpen.set(false)">Cancelar</neural-button>
-                <neural-button variant="solid" theme="blue" (click)="applyPreferences()">Continuar</neural-button>
-              </div>
-            </div>
-          </neural-dialog>
-        </div>
+        
+        <!-- Preferences / Columns Dialog Trigger (Moved to search row) -->
+        <button class="flex items-center justify-center size-7 rounded-md border border-outline-gray-2 bg-white hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors shadow-sm" (click)="isPreferencesOpen.set(true)" title="Configurar columnas">
+          <i class="lucide-settings size-3.5" style="stroke-width: 1.5px;"></i>
+        </button>
       </div>
 
       <!-- Table Content -->
@@ -12539,7 +12536,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
             <tr class="border-b border-outline-gray-2 bg-white">
               @for (col of visibleColumns(); track col.key) {
                 <th 
-                  class="px-4 py-3 text-[13px] font-semibold text-ink-gray-7 truncate border-r border-outline-gray-2 last:border-r-0"
+                  class="px-4 py-2.5 text-[12px] font-semibold text-ink-gray-6 uppercase tracking-wider truncate border-r border-outline-gray-2 last:border-r-0"
                   [style.width]="col.width || 'auto'"
                 >
                   <div class="flex items-center justify-between group cursor-pointer hover:text-ink-gray-9" (click)="col.sortable ? onSort(col.key) : null">
@@ -12558,7 +12555,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 <tr class="border-b border-outline-gray-1 hover:bg-surface-gray-1 transition-colors group">
                   @for (col of visibleColumns(); track col.key) {
                     <td 
-                      class="px-4 py-3 text-[13.5px] text-ink-gray-9"
+                      class="px-4 py-2.5 text-[12px] font-medium text-ink-gray-9"
                       [class.truncate]="!wrapLines()"
                       [class.whitespace-nowrap]="!wrapLines()"
                     >
@@ -12583,15 +12580,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
           </tbody>
         </table>
       </div>
+
+      <!-- Footer / Pagination Area -->
+      <div class="flex items-center justify-between px-4 py-2 border-t border-outline-gray-2 bg-white">
+        <!-- Left Footer -->
+        <div class="text-[12px] text-ink-gray-5">
+          <!-- Espacio para contadores de selección -->
+        </div>
+
+        <!-- Right Footer: Pagination & Settings -->
+        <div class="flex items-center gap-4">
+          <div class="flex items-center gap-0.5 text-[12px] text-ink-gray-7 font-medium">
+            <button class="p-1 hover:bg-surface-gray-2 rounded text-ink-gray-5 hover:text-ink-gray-8 disabled:opacity-30 disabled:hover:bg-transparent" [disabled]="page() === 1" (click)="onPageChange.emit(1)" title="Primera página">
+              <i class="lucide-chevrons-left size-3.5" style="stroke-width: 1.5px;"></i>
+            </button>
+            <button class="p-1 hover:bg-surface-gray-2 rounded text-ink-gray-5 hover:text-ink-gray-8 disabled:opacity-30 disabled:hover:bg-transparent" [disabled]="page() === 1" (click)="onPageChange.emit(page() - 1)" title="Anterior">
+              <i class="lucide-chevron-left size-3.5" style="stroke-width: 1.5px;"></i>
+            </button>
+            
+            <span class="px-2 min-w-[70px] text-center">{{ page() }} <span class="text-ink-gray-4 mx-1">/</span> {{ totalPages() }}</span>
+            
+            <button class="p-1 hover:bg-surface-gray-2 rounded text-ink-gray-5 hover:text-ink-gray-8 disabled:opacity-30 disabled:hover:bg-transparent" [disabled]="page() >= totalPages()" (click)="onPageChange.emit(page() + 1)" title="Siguiente">
+              <i class="lucide-chevron-right size-3.5" style="stroke-width: 1.5px;"></i>
+            </button>
+            <button class="p-1 hover:bg-surface-gray-2 rounded text-ink-gray-5 hover:text-ink-gray-8 disabled:opacity-30 disabled:hover:bg-transparent" [disabled]="page() >= totalPages()" (click)="onPageChange.emit(totalPages())" title="Última página">
+              <i class="lucide-chevrons-right size-3.5" style="stroke-width: 1.5px;"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Dialog moved outside of the main flex flows -->
+      <neural-dialog [openModel]="isPreferencesOpen()" (openModelChange)="isPreferencesOpen.set($event)" [hasTitleSlot]="true" [hasActionsSlot]="true" size="md">
+        <div title>
+          <h3 class="text-lg font-semibold text-ink-gray-9">Preferencias</h3>
+        </div>
+
+        <div class="flex flex-col gap-6 py-2">
+          <div class="flex items-start gap-4">
+            <neural-checkbox [checkedModel]="wrapLines()" (checkedModelChange)="wrapLines.set($event)"></neural-checkbox>
+            <div class="flex flex-col">
+              <span class="text-sm font-medium text-ink-gray-9">Ajustar líneas</span>
+              <span class="text-xs text-ink-gray-5">Seleccione la casilla de verificación para ajustar todas las líneas.</span>
+            </div>
+          </div>
+
+          <div class="border-t border-outline-gray-2 pt-4">
+            <div class="flex flex-col mb-3">
+              <span class="text-sm font-semibold text-ink-gray-9">Seleccionar columnas visibles</span>
+              <span class="text-xs text-ink-gray-5">Personalice la visibilidad y el orden de las columnas.</span>
+            </div>
+            
+            <div class="flex flex-col gap-0 border border-outline-gray-2 rounded-md bg-white overflow-hidden">
+              @for (col of allColumns(); track col.key) {
+                <div class="flex items-center justify-between p-3 border-b border-outline-gray-1 last:border-0 hover:bg-surface-gray-1">
+                  <div class="flex items-center gap-2">
+                    <i class="lucide-grip-vertical size-4 text-ink-gray-4 cursor-grab"></i>
+                    <span class="text-sm text-ink-gray-8 font-medium">{{ col.label }}</span>
+                  </div>
+                  <neural-switch [valueModel]="isColumnVisible(col.key)" (valueModelChange)="toggleColumnVisibility(col.key, $event)"></neural-switch>
+                </div>
+              }
+            </div>
+          </div>
+        </div>
+
+        <div actions>
+          <div class="flex items-center justify-end gap-2 w-full">
+            <neural-button variant="ghost" (click)="isPreferencesOpen.set(false)">Cancelar</neural-button>
+            <neural-button variant="solid" theme="blue" (click)="applyPreferences()">Continuar</neural-button>
+          </div>
+        </div>
+      </neural-dialog>
     </div>
   `
                 }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], infoLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "infoLink", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], allColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "allColumns", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: true }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: false }] }], emptyStateTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyStateTitle", required: false }] }], emptyStateDesc: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyStateDesc", required: false }] }], onSearch: [{
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], hasInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasInfo", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], allColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "allColumns", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: true }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: false }] }], emptyStateTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyStateTitle", required: false }] }], emptyStateDesc: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyStateDesc", required: false }] }], onSearch: [{
                 type: Output
             }], onPageChange: [{
                 type: Output
             }], sortChange: [{
                 type: Output
+            }], onInfoClick: [{
+                type: Output
+            }], onRefreshClick: [{
+                type: Output
+            }], onViewChange: [{
+                type: Output
+            }], onFilterClick: [{
+                type: Output
             }], cellTemplate: [{
                 type: ContentChild,
                 args: ['cellTemplate']