orbiq-neural-ui-kit 1.0.33 → 1.0.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/orbiq-neural-ui-kit.mjs +115 -80
  2. package/fesm2022/orbiq-neural-ui-kit.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/orbiq-neural-ui-kit.d.ts +7 -1
package/fesm2022/orbiq-neural-ui-kit.mjs CHANGED
@@ -12209,6 +12209,8 @@ class NeuralDataTableComponent {
12209
12209
  ...(ngDevMode ? [undefined, { debugName: "count" }] : /* istanbul ignore next */ []));
12210
12210
  hasInfo = input(false, /* @ts-ignore */
12211
12211
  ...(ngDevMode ? [{ debugName: "hasInfo" }] : /* istanbul ignore next */ []));
12212
+ newLabel = input('Nuevo', /* @ts-ignore */
12213
+ ...(ngDevMode ? [{ debugName: "newLabel" }] : /* istanbul ignore next */ []));
12212
12214
  searchPlaceholder = input('Search', /* @ts-ignore */
12213
12215
  ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
12214
12216
  allColumns = input([], /* @ts-ignore */
@@ -12233,6 +12235,11 @@ class NeuralDataTableComponent {
12233
12235
  onRefreshClick = new EventEmitter();
12234
12236
  onViewChange = new EventEmitter();
12235
12237
  onFilterClick = new EventEmitter();
12238
+ onSortChangeClick = new EventEmitter();
12239
+ onMoreClick = new EventEmitter();
12240
+ onImportClick = new EventEmitter();
12241
+ onExportClick = new EventEmitter();
12242
+ onNewClick = new EventEmitter();
12236
12243
  cellTemplate;
12237
12244
  isPreferencesOpen = signal(false, /* @ts-ignore */
12238
12245
  ...(ngDevMode ? [{ debugName: "isPreferencesOpen" }] : /* istanbul ignore next */ []));
@@ -12264,62 +12271,78 @@ class NeuralDataTableComponent {
12264
12271
  this.sortChange.emit(key);
12265
12272
  }
12266
12273
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
12267
- 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: `
12274
+ 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 }, newLabel: { classPropertyName: "newLabel", publicName: "newLabel", 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", onSortChangeClick: "onSortChangeClick", onMoreClick: "onMoreClick", onImportClick: "onImportClick", onExportClick: "onExportClick", onNewClick: "onNewClick" }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ["cellTemplate"], descendants: true }], ngImport: i0, template: `
12268
12275
  <div class="flex flex-col w-full h-full bg-white rounded-md border border-outline-gray-2 shadow-sm overflow-hidden">
12269
12276
 
12270
12277
  <!-- Top Header Area -->
12271
- <div class="flex items-center justify-between px-4 py-3 border-b border-outline-gray-2 bg-white">
12278
+ <div class="flex items-center justify-between px-4 py-2 border-b border-outline-gray-2 bg-white">
12272
12279
  <!-- Left: Title & Info -->
12273
12280
  <div class="flex items-center gap-3">
12274
- <h2 class="text-[16px] font-semibold text-ink-gray-9">{{ title() }}</h2>
12281
+ <h2 class="text-[13px] font-semibold text-ink-gray-9">{{ title() }}</h2>
12275
12282
  @if (count() !== undefined) {
12276
- <span class="text-[13px] font-medium text-ink-gray-5 px-1.5 py-0.5 rounded-full bg-surface-gray-2">{{ count() }}</span>
12283
+ <span class="text-[11px] font-medium text-ink-gray-5 px-1.5 py-0.5 rounded-full bg-surface-gray-2">{{ count() }}</span>
12277
12284
  }
12278
12285
  @if (hasInfo()) {
12279
- <button class="text-[13px] font-medium text-blue-600 hover:underline cursor-pointer flex items-center gap-1" (click)="onInfoClick.emit()">
12286
+ <button class="text-[11px] font-medium text-blue-600 hover:underline cursor-pointer flex items-center gap-1" (click)="onInfoClick.emit()">
12280
12287
  Información
12281
12288
  </button>
12282
12289
  }
12283
12290
  </div>
12284
12291
 
12285
12292
  <!-- Right: Actions Toolbar -->
12286
- <div class="flex items-center gap-2">
12293
+ <div class="flex items-center gap-1">
12287
12294
 
12288
- <!-- Built-in Actions Group -->
12289
- <div class="flex items-center p-0.5 bg-surface-gray-1 border border-outline-gray-2 rounded-md h-8">
12290
- <neural-button variant="ghost" size="sm" icon="lucide-list" [iconLeft]="true" class="!px-2 !text-[13px] !text-ink-gray-7 hover:!text-ink-gray-9" (click)="onViewChange.emit('report')">Vista</neural-button>
12291
- <div class="w-px h-4 bg-outline-gray-3 mx-0.5"></div>
12292
- <neural-button variant="ghost" size="sm" icon="lucide-filter" [iconLeft]="true" class="!px-2 !text-[13px] !text-ink-gray-7 hover:!text-ink-gray-9" (click)="onFilterClick.emit()">Filtrar</neural-button>
12293
- <div class="w-px h-4 bg-outline-gray-3 mx-0.5"></div>
12294
- <neural-button variant="ghost" size="sm" icon="lucide-arrow-up-down" [iconLeft]="true" class="!px-2 !text-[13px] !text-ink-gray-7 hover:!text-ink-gray-9" title="Orden">Orden</neural-button>
12295
+ <!-- Built-in Actions Group (Clean, no background) -->
12296
+ <div class="flex items-center gap-0.5">
12297
+ <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>
12298
+ <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>
12299
+ <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" (click)="onSortChangeClick.emit()">Orden</neural-button>
12295
12300
  </div>
12296
12301
 
12297
- <div class="flex items-center gap-1">
12298
- <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-2 text-ink-gray-6 hover:text-ink-gray-9 transition-colors border border-transparent hover:border-outline-gray-2" title="Actualizar" (click)="onRefreshClick.emit()">
12299
- <i class="lucide-refresh-cw size-4"></i>
12302
+ <div class="w-px h-3.5 bg-outline-gray-2 mx-1.5"></div>
12303
+
12304
+ <div class="flex items-center gap-0.5">
12305
+ <button class="flex items-center justify-center size-6 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Actualizar" (click)="onRefreshClick.emit()">
12306
+ <i class="lucide-refresh-cw size-3.5" style="stroke-width: 1.5px;"></i>
12307
+ </button>
12308
+ <button class="flex items-center justify-center size-6 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Importar" (click)="onImportClick.emit()">
12309
+ <i class="lucide-upload size-3.5" style="stroke-width: 1.5px;"></i>
12310
+ </button>
12311
+ <button class="flex items-center justify-center size-6 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Exportar" (click)="onExportClick.emit()">
12312
+ <i class="lucide-download size-3.5" style="stroke-width: 1.5px;"></i>
12300
12313
  </button>
12301
- <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-2 text-ink-gray-6 hover:text-ink-gray-9 transition-colors border border-transparent hover:border-outline-gray-2" title="Más acciones">
12302
- <i class="lucide-more-horizontal size-4"></i>
12314
+ <button class="flex items-center justify-center size-6 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Más acciones" (click)="onMoreClick.emit()">
12315
+ <i class="lucide-more-horizontal size-3.5" style="stroke-width: 1.5px;"></i>
12303
12316
  </button>
12304
12317
  </div>
12305
12318
 
12306
- <div class="w-px h-6 bg-outline-gray-2 mx-1"></div>
12319
+ <div class="w-px h-3.5 bg-outline-gray-2 mx-1.5"></div>
12307
12320
 
12308
- <!-- External Actions (Refresh, Create, etc) -->
12321
+ <!-- External Actions -->
12309
12322
  <ng-content select="[header-actions]"></ng-content>
12323
+
12324
+ <!-- + Nuevo Button -->
12325
+ <neural-button variant="solid" theme="blue" size="sm" icon="lucide-plus" [iconLeft]="true" class="!px-2.5 !text-[12px]" (click)="onNewClick.emit()">
12326
+ {{ newLabel() }}
12327
+ </neural-button>
12310
12328
  </div>
12311
12329
  </div>
12312
12330
 
12313
12331
  <!-- Search Area -->
12314
- <div class="px-4 py-2 border-b border-outline-gray-1 bg-surface-base">
12332
+ <div class="flex items-center justify-between px-4 py-1.5 border-b border-outline-gray-1 bg-surface-base">
12315
12333
  <div class="w-full max-w-sm">
12316
12334
  <neural-text-input
12317
12335
  [placeholder]="searchPlaceholder()"
12318
12336
  icon="lucide-search"
12319
- size="sm"
12337
+ size="xs"
12320
12338
  (valueModelChange)="onSearch.emit($event)"
12321
12339
  ></neural-text-input>
12322
12340
  </div>
12341
+
12342
+ <!-- Preferences / Columns Dialog Trigger -->
12343
+ <button class="flex items-center justify-center size-6 rounded-md bg-transparent hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" (click)="isPreferencesOpen.set(true)" title="Configurar columnas">
12344
+ <i class="lucide-settings size-3.5" style="stroke-width: 1.5px;"></i>
12345
+ </button>
12323
12346
  </div>
12324
12347
 
12325
12348
  <!-- Table Content -->
@@ -12329,13 +12352,13 @@ class NeuralDataTableComponent {
12329
12352
  <tr class="border-b border-outline-gray-2 bg-white">
12330
12353
  @for (col of visibleColumns(); track col.key) {
12331
12354
  <th
12332
- class="px-4 py-3 text-[13px] font-semibold text-ink-gray-7 truncate border-r border-outline-gray-2 last:border-r-0"
12355
+ class="px-4 py-2 text-[11px] font-medium text-ink-gray-6 truncate border-r border-outline-gray-2 last:border-r-0"
12333
12356
  [style.width]="col.width || 'auto'"
12334
12357
  >
12335
12358
  <div class="flex items-center justify-between group cursor-pointer hover:text-ink-gray-9" (click)="col.sortable ? onSort(col.key) : null">
12336
12359
  <span class="truncate">{{ col.label }}</span>
12337
12360
  @if (col.sortable) {
12338
- <i class="lucide-caret-down size-3.5 text-ink-gray-4 opacity-0 group-hover:opacity-100 transition-opacity"></i>
12361
+ <i class="lucide-caret-down size-3 text-ink-gray-4 opacity-0 group-hover:opacity-100 transition-opacity"></i>
12339
12362
  }
12340
12363
  </div>
12341
12364
  </th>
@@ -12348,7 +12371,7 @@ class NeuralDataTableComponent {
12348
12371
  <tr class="border-b border-outline-gray-1 hover:bg-surface-gray-1 transition-colors group">
12349
12372
  @for (col of visibleColumns(); track col.key) {
12350
12373
  <td
12351
- class="px-4 py-3 text-[13.5px] text-ink-gray-9"
12374
+ class="px-4 py-2.5 text-[12px] font-medium text-ink-gray-9"
12352
12375
  [class.truncate]="!wrapLines()"
12353
12376
  [class.whitespace-nowrap]="!wrapLines()"
12354
12377
  >
@@ -12375,38 +12398,31 @@ class NeuralDataTableComponent {
12375
12398
  </div>
12376
12399
 
12377
12400
  <!-- Footer / Pagination Area -->
12378
- <div class="flex items-center justify-between px-4 py-3 border-t border-outline-gray-2 bg-white">
12401
+ <div class="flex items-center justify-between px-4 py-2 border-t border-outline-gray-2 bg-white">
12379
12402
  <!-- Left Footer -->
12380
- <div class="text-[13px] text-ink-gray-5">
12403
+ <div class="text-[12px] text-ink-gray-5">
12381
12404
  <!-- Espacio para contadores de selección -->
12382
12405
  </div>
12383
12406
 
12384
12407
  <!-- Right Footer: Pagination & Settings -->
12385
12408
  <div class="flex items-center gap-4">
12386
- <div class="flex items-center gap-1 text-sm text-ink-gray-7 font-medium">
12409
+ <div class="flex items-center gap-0.5 text-[12px] text-ink-gray-7 font-medium">
12387
12410
  <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">
12388
- <i class="lucide-chevrons-left size-4"></i>
12411
+ <i class="lucide-chevrons-left size-3.5" style="stroke-width: 1.5px;"></i>
12389
12412
  </button>
12390
12413
  <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">
12391
- <i class="lucide-chevron-left size-4"></i>
12414
+ <i class="lucide-chevron-left size-3.5" style="stroke-width: 1.5px;"></i>
12392
12415
  </button>
12393
12416
 
12394
- <span class="px-2 text-[13px] min-w-[70px] text-center">{{ page() }} <span class="text-ink-gray-4 mx-1">/</span> {{ totalPages() }}</span>
12417
+ <span class="px-2 min-w-[70px] text-center">{{ page() }} <span class="text-ink-gray-4 mx-1">/</span> {{ totalPages() }}</span>
12395
12418
 
12396
12419
  <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">
12397
- <i class="lucide-chevron-right size-4"></i>
12420
+ <i class="lucide-chevron-right size-3.5" style="stroke-width: 1.5px;"></i>
12398
12421
  </button>
12399
12422
  <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">
12400
- <i class="lucide-chevrons-right size-4"></i>
12423
+ <i class="lucide-chevrons-right size-3.5" style="stroke-width: 1.5px;"></i>
12401
12424
  </button>
12402
12425
  </div>
12403
-
12404
- <div class="w-px h-5 bg-outline-gray-2"></div>
12405
-
12406
- <!-- Preferences / Columns Dialog Trigger -->
12407
- <button class="p-1.5 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" (click)="isPreferencesOpen.set(true)" title="Configurar columnas">
12408
- <i class="lucide-settings size-4"></i>
12409
- </button>
12410
12426
  </div>
12411
12427
  </div>
12412
12428
 
@@ -12472,58 +12488,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
12472
12488
  <div class="flex flex-col w-full h-full bg-white rounded-md border border-outline-gray-2 shadow-sm overflow-hidden">
12473
12489
 
12474
12490
  <!-- Top Header Area -->
12475
- <div class="flex items-center justify-between px-4 py-3 border-b border-outline-gray-2 bg-white">
12491
+ <div class="flex items-center justify-between px-4 py-2 border-b border-outline-gray-2 bg-white">
12476
12492
  <!-- Left: Title & Info -->
12477
12493
  <div class="flex items-center gap-3">
12478
- <h2 class="text-[16px] font-semibold text-ink-gray-9">{{ title() }}</h2>
12494
+ <h2 class="text-[13px] font-semibold text-ink-gray-9">{{ title() }}</h2>
12479
12495
  @if (count() !== undefined) {
12480
- <span class="text-[13px] font-medium text-ink-gray-5 px-1.5 py-0.5 rounded-full bg-surface-gray-2">{{ count() }}</span>
12496
+ <span class="text-[11px] font-medium text-ink-gray-5 px-1.5 py-0.5 rounded-full bg-surface-gray-2">{{ count() }}</span>
12481
12497
  }
12482
12498
  @if (hasInfo()) {
12483
- <button class="text-[13px] font-medium text-blue-600 hover:underline cursor-pointer flex items-center gap-1" (click)="onInfoClick.emit()">
12499
+ <button class="text-[11px] font-medium text-blue-600 hover:underline cursor-pointer flex items-center gap-1" (click)="onInfoClick.emit()">
12484
12500
  Información
12485
12501
  </button>
12486
12502
  }
12487
12503
  </div>
12488
12504
 
12489
12505
  <!-- Right: Actions Toolbar -->
12490
- <div class="flex items-center gap-2">
12506
+ <div class="flex items-center gap-1">
12491
12507
 
12492
- <!-- Built-in Actions Group -->
12493
- <div class="flex items-center p-0.5 bg-surface-gray-1 border border-outline-gray-2 rounded-md h-8">
12494
- <neural-button variant="ghost" size="sm" icon="lucide-list" [iconLeft]="true" class="!px-2 !text-[13px] !text-ink-gray-7 hover:!text-ink-gray-9" (click)="onViewChange.emit('report')">Vista</neural-button>
12495
- <div class="w-px h-4 bg-outline-gray-3 mx-0.5"></div>
12496
- <neural-button variant="ghost" size="sm" icon="lucide-filter" [iconLeft]="true" class="!px-2 !text-[13px] !text-ink-gray-7 hover:!text-ink-gray-9" (click)="onFilterClick.emit()">Filtrar</neural-button>
12497
- <div class="w-px h-4 bg-outline-gray-3 mx-0.5"></div>
12498
- <neural-button variant="ghost" size="sm" icon="lucide-arrow-up-down" [iconLeft]="true" class="!px-2 !text-[13px] !text-ink-gray-7 hover:!text-ink-gray-9" title="Orden">Orden</neural-button>
12508
+ <!-- Built-in Actions Group (Clean, no background) -->
12509
+ <div class="flex items-center gap-0.5">
12510
+ <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>
12511
+ <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>
12512
+ <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" (click)="onSortChangeClick.emit()">Orden</neural-button>
12499
12513
  </div>
12500
12514
 
12501
- <div class="flex items-center gap-1">
12502
- <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-2 text-ink-gray-6 hover:text-ink-gray-9 transition-colors border border-transparent hover:border-outline-gray-2" title="Actualizar" (click)="onRefreshClick.emit()">
12503
- <i class="lucide-refresh-cw size-4"></i>
12515
+ <div class="w-px h-3.5 bg-outline-gray-2 mx-1.5"></div>
12516
+
12517
+ <div class="flex items-center gap-0.5">
12518
+ <button class="flex items-center justify-center size-6 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Actualizar" (click)="onRefreshClick.emit()">
12519
+ <i class="lucide-refresh-cw size-3.5" style="stroke-width: 1.5px;"></i>
12520
+ </button>
12521
+ <button class="flex items-center justify-center size-6 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Importar" (click)="onImportClick.emit()">
12522
+ <i class="lucide-upload size-3.5" style="stroke-width: 1.5px;"></i>
12504
12523
  </button>
12505
- <button class="flex items-center justify-center size-8 rounded-md hover:bg-surface-gray-2 text-ink-gray-6 hover:text-ink-gray-9 transition-colors border border-transparent hover:border-outline-gray-2" title="Más acciones">
12506
- <i class="lucide-more-horizontal size-4"></i>
12524
+ <button class="flex items-center justify-center size-6 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Exportar" (click)="onExportClick.emit()">
12525
+ <i class="lucide-download size-3.5" style="stroke-width: 1.5px;"></i>
12526
+ </button>
12527
+ <button class="flex items-center justify-center size-6 rounded-md hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" title="Más acciones" (click)="onMoreClick.emit()">
12528
+ <i class="lucide-more-horizontal size-3.5" style="stroke-width: 1.5px;"></i>
12507
12529
  </button>
12508
12530
  </div>
12509
12531
 
12510
- <div class="w-px h-6 bg-outline-gray-2 mx-1"></div>
12532
+ <div class="w-px h-3.5 bg-outline-gray-2 mx-1.5"></div>
12511
12533
 
12512
- <!-- External Actions (Refresh, Create, etc) -->
12534
+ <!-- External Actions -->
12513
12535
  <ng-content select="[header-actions]"></ng-content>
12536
+
12537
+ <!-- + Nuevo Button -->
12538
+ <neural-button variant="solid" theme="blue" size="sm" icon="lucide-plus" [iconLeft]="true" class="!px-2.5 !text-[12px]" (click)="onNewClick.emit()">
12539
+ {{ newLabel() }}
12540
+ </neural-button>
12514
12541
  </div>
12515
12542
  </div>
12516
12543
 
12517
12544
  <!-- Search Area -->
12518
- <div class="px-4 py-2 border-b border-outline-gray-1 bg-surface-base">
12545
+ <div class="flex items-center justify-between px-4 py-1.5 border-b border-outline-gray-1 bg-surface-base">
12519
12546
  <div class="w-full max-w-sm">
12520
12547
  <neural-text-input
12521
12548
  [placeholder]="searchPlaceholder()"
12522
12549
  icon="lucide-search"
12523
- size="sm"
12550
+ size="xs"
12524
12551
  (valueModelChange)="onSearch.emit($event)"
12525
12552
  ></neural-text-input>
12526
12553
  </div>
12554
+
12555
+ <!-- Preferences / Columns Dialog Trigger -->
12556
+ <button class="flex items-center justify-center size-6 rounded-md bg-transparent hover:bg-surface-gray-1 text-ink-gray-6 hover:text-ink-gray-9 transition-colors" (click)="isPreferencesOpen.set(true)" title="Configurar columnas">
12557
+ <i class="lucide-settings size-3.5" style="stroke-width: 1.5px;"></i>
12558
+ </button>
12527
12559
  </div>
12528
12560
 
12529
12561
  <!-- Table Content -->
@@ -12533,13 +12565,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
12533
12565
  <tr class="border-b border-outline-gray-2 bg-white">
12534
12566
  @for (col of visibleColumns(); track col.key) {
12535
12567
  <th
12536
- class="px-4 py-3 text-[13px] font-semibold text-ink-gray-7 truncate border-r border-outline-gray-2 last:border-r-0"
12568
+ class="px-4 py-2 text-[11px] font-medium text-ink-gray-6 truncate border-r border-outline-gray-2 last:border-r-0"
12537
12569
  [style.width]="col.width || 'auto'"
12538
12570
  >
12539
12571
  <div class="flex items-center justify-between group cursor-pointer hover:text-ink-gray-9" (click)="col.sortable ? onSort(col.key) : null">
12540
12572
  <span class="truncate">{{ col.label }}</span>
12541
12573
  @if (col.sortable) {
12542
- <i class="lucide-caret-down size-3.5 text-ink-gray-4 opacity-0 group-hover:opacity-100 transition-opacity"></i>
12574
+ <i class="lucide-caret-down size-3 text-ink-gray-4 opacity-0 group-hover:opacity-100 transition-opacity"></i>
12543
12575
  }
12544
12576
  </div>
12545
12577
  </th>
@@ -12552,7 +12584,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
12552
12584
  <tr class="border-b border-outline-gray-1 hover:bg-surface-gray-1 transition-colors group">
12553
12585
  @for (col of visibleColumns(); track col.key) {
12554
12586
  <td
12555
- class="px-4 py-3 text-[13.5px] text-ink-gray-9"
12587
+ class="px-4 py-2.5 text-[12px] font-medium text-ink-gray-9"
12556
12588
  [class.truncate]="!wrapLines()"
12557
12589
  [class.whitespace-nowrap]="!wrapLines()"
12558
12590
  >
@@ -12579,38 +12611,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
12579
12611
  </div>
12580
12612
 
12581
12613
  <!-- Footer / Pagination Area -->
12582
- <div class="flex items-center justify-between px-4 py-3 border-t border-outline-gray-2 bg-white">
12614
+ <div class="flex items-center justify-between px-4 py-2 border-t border-outline-gray-2 bg-white">
12583
12615
  <!-- Left Footer -->
12584
- <div class="text-[13px] text-ink-gray-5">
12616
+ <div class="text-[12px] text-ink-gray-5">
12585
12617
  <!-- Espacio para contadores de selección -->
12586
12618
  </div>
12587
12619
 
12588
12620
  <!-- Right Footer: Pagination & Settings -->
12589
12621
  <div class="flex items-center gap-4">
12590
- <div class="flex items-center gap-1 text-sm text-ink-gray-7 font-medium">
12622
+ <div class="flex items-center gap-0.5 text-[12px] text-ink-gray-7 font-medium">
12591
12623
  <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">
12592
- <i class="lucide-chevrons-left size-4"></i>
12624
+ <i class="lucide-chevrons-left size-3.5" style="stroke-width: 1.5px;"></i>
12593
12625
  </button>
12594
12626
  <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">
12595
- <i class="lucide-chevron-left size-4"></i>
12627
+ <i class="lucide-chevron-left size-3.5" style="stroke-width: 1.5px;"></i>
12596
12628
  </button>
12597
12629
 
12598
- <span class="px-2 text-[13px] min-w-[70px] text-center">{{ page() }} <span class="text-ink-gray-4 mx-1">/</span> {{ totalPages() }}</span>
12630
+ <span class="px-2 min-w-[70px] text-center">{{ page() }} <span class="text-ink-gray-4 mx-1">/</span> {{ totalPages() }}</span>
12599
12631
 
12600
12632
  <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">
12601
- <i class="lucide-chevron-right size-4"></i>
12633
+ <i class="lucide-chevron-right size-3.5" style="stroke-width: 1.5px;"></i>
12602
12634
  </button>
12603
12635
  <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">
12604
- <i class="lucide-chevrons-right size-4"></i>
12636
+ <i class="lucide-chevrons-right size-3.5" style="stroke-width: 1.5px;"></i>
12605
12637
  </button>
12606
12638
  </div>
12607
-
12608
- <div class="w-px h-5 bg-outline-gray-2"></div>
12609
-
12610
- <!-- Preferences / Columns Dialog Trigger -->
12611
- <button class="p-1.5 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" (click)="isPreferencesOpen.set(true)" title="Configurar columnas">
12612
- <i class="lucide-settings size-4"></i>
12613
- </button>
12614
12639
  </div>
12615
12640
  </div>
12616
12641
 
@@ -12659,7 +12684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
12659
12684
  </div>
12660
12685
  `
12661
12686
  }]
12662
- }], 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: [{
12687
+ }], 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 }] }], newLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "newLabel", 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: [{
12663
12688
  type: Output
12664
12689
  }], onPageChange: [{
12665
12690
  type: Output
@@ -12673,6 +12698,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
12673
12698
  type: Output
12674
12699
  }], onFilterClick: [{
12675
12700
  type: Output
12701
+ }], onSortChangeClick: [{
12702
+ type: Output
12703
+ }], onMoreClick: [{
12704
+ type: Output
12705
+ }], onImportClick: [{
12706
+ type: Output
12707
+ }], onExportClick: [{
12708
+ type: Output
12709
+ }], onNewClick: [{
12710
+ type: Output
12676
12711
  }], cellTemplate: [{
12677
12712
  type: ContentChild,
12678
12713
  args: ['cellTemplate']