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/form/field-base.ts

@@ -8,4 +8,6 @@ export abstract class FieldBase {
   readonly readOnly = input(false, { alias: 'readonly', transform: booleanAttribute });
   readonly disabled = input(false, { transform: booleanAttribute });
   readonly error = input<string>();
+  /** Nombre del campo de SAP (ayuda y «Ver campos»). */
+  readonly dbName = input<string>();
 }

apps/web/src/app/shared/form/fields.ts

@@ -13,7 +13,7 @@ import { SboField } from './sbo-field';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [SboField, TextInput],
   template: `
-    <sbo-field [label]="label()" [required]="required()" [error]="error()">
+    <sbo-field [label]="label()" [dbName]="dbName()" [required]="required()" [error]="error()">
       <sbo-input
         [(value)]="value"
         [readonly]="readOnly()"
@@ -37,7 +37,7 @@ export class TextField extends FieldBase {
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [SboField, CheckboxInput],
   template: `
-    <sbo-field [label]="label()" [error]="error()">
+    <sbo-field [label]="label()" [dbName]="dbName()" [error]="error()">
       <sbo-checkbox [(value)]="value" [readonly]="readOnly()" [disabled]="disabled()" />
     </sbo-field>
   `,
@@ -52,7 +52,7 @@ export class CheckboxField extends FieldBase {
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [SboField, TextareaInput],
   template: `
-    <sbo-field [label]="label()" [required]="required()" [error]="error()">
+    <sbo-field [label]="label()" [dbName]="dbName()" [required]="required()" [error]="error()">
       <sbo-textarea
         [(value)]="value"
         [readonly]="readOnly()"
@@ -78,7 +78,7 @@ export class TextareaField extends FieldBase {
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [SboField, NumberInput],
   template: `
-    <sbo-field [label]="label()" [required]="required()" [error]="error()">
+    <sbo-field [label]="label()" [dbName]="dbName()" [required]="required()" [error]="error()">
       <sbo-number
         [(value)]="value"
         [decimals]="decimals()"
@@ -100,7 +100,7 @@ export class NumberField extends FieldBase {
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [SboField, DateInput],
   template: `
-    <sbo-field [label]="label()" [required]="required()" [error]="error()">
+    <sbo-field [label]="label()" [dbName]="dbName()" [required]="required()" [error]="error()">
       <sbo-date [(value)]="value" [readonly]="readOnly()" [disabled]="disabled()" [required]="required()" />
     </sbo-field>
   `,
@@ -115,7 +115,7 @@ export class DateField extends FieldBase {
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [SboField, SelectInput],
   template: `
-    <sbo-field [label]="label()" [required]="required()" [error]="error()">
+    <sbo-field [label]="label()" [dbName]="dbName()" [required]="required()" [error]="error()">
       <sbo-select
         [(value)]="value"
         [options]="options()"

apps/web/src/app/shared/form/lookup-field.ts

@@ -33,6 +33,7 @@ const NAMES = new Map<string, string>();
   template: `
     <sbo-field
       [label]="label()"
+      [dbName]="dbName()"
       [required]="required()"
       [error]="error() || missingText()"
       action

apps/web/src/app/shared/form/sbo-field.ts

@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component, booleanAttribute, input, output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, booleanAttribute, inject, input, output } from '@angular/core';
+import { FieldNames } from '../../core/field-names';
 
 let nextId = 0;
 
@@ -19,8 +20,11 @@ let nextId = 0;
         [class.req]="required()"
         [class.ga]="action()"
         [class.link]="linkable()"
+        [attr.title]="dbName() ?? null"
         (click)="labelClick.emit()"
-        >{{ label() }}</label
+        >{{ label() }}@if (dbName() && names.show()) {
+          <span class="db">{{ dbName() }}</span>
+        }</label
       >
       <div class="ctl">
         <div class="sbo-group"><ng-content /></div>
@@ -65,6 +69,12 @@ let nextId = 0;
       border-top: 5px solid transparent;
       border-bottom: 5px solid transparent;
     }
+    .db {
+      display: block;
+      margin-top: -2px;
+      font: 10.5px/1.2 var(--mono, monospace);
+      color: var(--quiet);
+    }
     label.link {
       cursor: pointer;
     }
@@ -83,7 +93,10 @@ let nextId = 0;
   `,
 })
 export class SboField {
+  protected readonly names = inject(FieldNames);
   readonly label = input.required<string>();
+  /** Nombre del campo de SAP; sale como ayuda del cursor y, con «Ver campos», debajo de la etiqueta. */
+  readonly dbName = input<string>();
   readonly required = input(false, { transform: booleanAttribute });
   readonly action = input(false, { transform: booleanAttribute });
   /** La etiqueta es un enlace (ej. abrir el socio de negocio). */