feat(web): botón «Campos» que muestra el nombre del campo de SAP junto a cada etiqueta y en las cabeceras de tablas (ayuda del cursor siempre)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

apps/web/src/app/shared/grid/lines-grid.css

@@ -151,3 +151,10 @@ tr.none td {
   position: absolute;
   left: -9999px;
 }
+
+th .db {
+  display: block;
+  font: 10.5px/1.2 var(--mono, monospace);
+  font-weight: 400;
+  color: var(--quiet);
+}

apps/web/src/app/shared/grid/lines-grid.html

@@ -15,7 +15,9 @@
       <tr>
         <th class="rn">#</th>
         @for (c of columns(); track c.key; let j = $index) {
-          <th sboColResize [style.width]="c.width" [style.text-align]="alignOf(c)" [class.req]="c.required">{{ c.title }}</th>
+          <th sboColResize [style.width]="c.width" [style.text-align]="alignOf(c)" [class.req]="c.required" [attr.title]="c.key">{{ c.title }}@if (names.show()) {
+              <span class="db">{{ c.key }}</span>
+            }</th>
           @if (hasDetails() && j === detailAt()) {
             <th class="det">Lotes / Series</th>
           }

apps/web/src/app/shared/grid/lines-grid.ts

@@ -12,6 +12,7 @@ import {
   output,
   signal,
 } from '@angular/core';
+import { FieldNames } from '../../core/field-names';
 import { formatNumber, parseDecimal } from '../../core/format';
 import { SlLookupApi } from '../../core/sl/sl-lookup';
 import type { ListRow } from '../list/list.types';
@@ -57,6 +58,7 @@ export class LinesGrid {
 
   private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
   private readonly injector = inject(Injector);
+  protected readonly names = inject(FieldNames);
 
   constructor() {
     // las celdas de código con texto propio (la cuenta con su formato) piden los textos de las líneas que se cargan

apps/web/src/app/shared/grid/rows-table.ts

@@ -1,6 +1,7 @@
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { ChangeDetectionStrategy, Component, computed, effect, inject, input, model, signal } from '@angular/core';
 import { API_URL } from '../../core/api';
+import { FieldNames } from '../../core/field-names';
 import { formatNumber, parseDecimal } from '../../core/format';
 import { SlLookupApi } from '../../core/sl/sl-lookup';
 import type { ListRow } from '../list/list.types';
@@ -31,7 +32,9 @@ const dateOnly = (v: unknown): string => (typeof v === 'string' ? v.slice(0, 10)
           <tr>
             <th class="rn">#</th>
             @for (c of columns(); track c.key) {
-              <th [style.width]="c.width" [class.req]="c.required">{{ c.title }}</th>
+              <th [style.width]="c.width" [class.req]="c.required" [attr.title]="c.key">{{ c.title }}@if (fieldNames.show()) {
+                <span class="db">{{ c.key }}</span>
+              }</th>
             }
             @if (canRemove()) {
               <th class="del"></th>
@@ -145,6 +148,7 @@ const dateOnly = (v: unknown): string => (typeof v === 'string' ? v.slice(0, 10)
     .menu button:hover { background: var(--btn-h); }
     table { width: 100%; min-width: max-content; border-collapse: collapse; }
     th { padding: 4px 6px; background: var(--grid-head); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; text-align: left; white-space: nowrap; }
+    th .db { display: block; font: 10.5px/1.2 var(--mono, monospace); font-weight: 400; color: var(--quiet); }
     th.req::after { content: ' *'; color: var(--err); }
     td { padding: 0 2px; height: 27px; border: 1px solid var(--line-soft); white-space: nowrap; }
     td.ro { background: var(--field-ro); }
@@ -181,6 +185,7 @@ export class RowsTable {
     return rows.filter((r) => keys.some((k) => Number(r[k]) !== 0 && Number.isFinite(Number(r[k]))));
   });
 
+  protected readonly fieldNames = inject(FieldNames);
   private readonly lookupApi = inject(SlLookupApi);
   private readonly http = inject(HttpClient);
   /** Nombres de los catálogos de las columnas `nameOf`, por recurso. */