refactor(panel): selector de emoji y color reutilizable

Extrae app-emoji-picker y app-color-picker a shared/ y los usa en las
pestañas de niños, materiales, rutinas y recompensas, que tenían el mismo
problema: input de color a pelo y emoji escrito a mano. Ahora se elige el
icono de una rejilla de emojis y el color de la paleta del handoff.

frontend/src/app/features/parents/children-tab.component.ts

@@ -3,17 +3,18 @@ import { FormsModule } from '@angular/forms';
 import { ParentApiService } from '../../core/parent-api.service';
 import { I18nService } from '../../core/i18n.service';
 import { ChildSummary } from '../../core/models';
+import { EmojiPickerComponent } from '../../shared/emoji-picker.component';
+import { ColorPickerComponent } from '../../shared/color-picker.component';
 
 /** Pestaña Niños: dar de alta y de baja perfiles de hijo en la familia. */
 @Component({
   selector: 'app-children-tab',
-  imports: [FormsModule],
+  imports: [FormsModule, EmojiPickerComponent, ColorPickerComponent],
   template: `
     <!-- Alta -->
     <div class="adm-card">
       <p class="adm-label">Nuevo niño/a</p>
 
-      <!-- Nombre -->
       <div class="field">
         <label class="field__label">
           Nombre
@@ -22,42 +23,22 @@ import { ChildSummary } from '../../core/models';
         <input class="field__input" [(ngModel)]="name" placeholder="Ej. Nora" maxlength="40" />
       </div>
 
-      <!-- Mascota: elegir un emoji -->
       <div class="field">
         <label class="field__label">
           Mascota
           <span class="field__info" title="El animalito que representa al niño. Toca uno.">ⓘ</span>
         </label>
-        <div class="picker">
-          @for (m of mascots; track m) {
-            <button type="button" class="emoji" [class.emoji--sel]="mascot() === m" (click)="mascot.set(m)">
-              {{ m }}
-            </button>
-          }
-        </div>
+        <app-emoji-picker [value]="mascot()" (valueChange)="mascot.set($event)" [options]="mascots" />
       </div>
 
-      <!-- Color de acento -->
       <div class="field">
         <label class="field__label">
           Color
           <span class="field__info" title="Color que identifica al niño en sus tarjetas y bordes.">ⓘ</span>
         </label>
-        <div class="picker">
-          @for (c of colors; track c) {
-            <button
-              type="button"
-              class="swatch"
-              [class.swatch--sel]="accentColor() === c"
-              [style.background]="c"
-              [attr.aria-label]="'Color ' + c"
-              (click)="accentColor.set(c)"
-            ></button>
-          }
-        </div>
+        <app-color-picker [value]="accentColor()" (valueChange)="accentColor.set($event)" />
       </div>
 
-      <!-- Edad + hora de salida -->
       <div class="grid2">
         <div class="field">
           <label class="field__label">
@@ -76,9 +57,7 @@ import { ChildSummary } from '../../core/models';
         </div>
       </div>
 
-      <button class="adm-btn field__add" [disabled]="!canAdd()" (click)="add()">
-        + Añadir niño/a
-      </button>
+      <button class="adm-btn field__add" [disabled]="!canAdd()" (click)="add()">+ Añadir niño/a</button>
     </div>
 
     <!-- Lista -->
@@ -100,14 +79,7 @@ import { ChildSummary } from '../../core/models';
   styles: [
     `
       .field { margin-bottom: var(--space-4); }
-      .field__label {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        font-weight: 700;
-        color: var(--text-1);
-        margin-bottom: 6px;
-      }
+      .field__label { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text-1); margin-bottom: 6px; }
       .field__opt { font-weight: 400; color: var(--text-3); }
       .field__info { cursor: help; color: var(--text-4); font-size: 0.85rem; }
       .field__input {
@@ -121,58 +93,19 @@ import { ChildSummary } from '../../core/models';
         width: 100%;
         box-sizing: border-box;
       }
-      .grid2 {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: var(--space-4);
-      }
-      @media (max-width: 520px) {
-        .grid2 { grid-template-columns: 1fr; }
-      }
-      .picker { display: flex; flex-wrap: wrap; gap: 8px; }
-      .emoji {
-        all: unset;
-        cursor: pointer;
-        width: 48px;
-        height: 48px;
-        border-radius: 14px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 26px;
-        background: var(--surface-soft);
-        border: 2px solid transparent;
-        transition: transform 0.1s, border-color 0.15s;
-      }
-      .emoji:hover { transform: scale(1.08); }
-      .emoji--sel { border-color: var(--accent-blue); background: color-mix(in srgb, var(--accent-blue) 12%, #fff); }
-      .swatch {
-        all: unset;
-        cursor: pointer;
-        width: 40px;
-        height: 40px;
-        border-radius: 50%;
-        box-shadow: var(--shadow-card);
-        border: 3px solid transparent;
-        transition: transform 0.1s;
-      }
-      .swatch:hover { transform: scale(1.1); }
-      .swatch--sel { border-color: var(--text-strong); transform: scale(1.1); }
+      .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
+      @media (max-width: 520px) { .grid2 { grid-template-columns: 1fr; } }
       .field__add { margin-top: var(--space-2); }
     `,
   ],
 })
 export class ChildrenTabComponent {
-  /** Avisa al panel de que la lista de niños cambió (para refrescar el selector). */
   @Output() changed = new EventEmitter<void>();
 
   private readonly api = inject(ParentApiService);
   protected readonly i18n = inject(I18nService);
 
-  /** Emojis de mascota disponibles para elegir. */
   protected readonly mascots = ['🦊', '🐢', '🦉', '🐶', '🐱', '🐰', '🦁', '🐼', '🐸', '🐨', '🐵', '🦄', '🐯', '🐧'];
-  /** Paleta de acento del handoff. */
-  protected readonly colors = ['#F2A65A', '#5B8DEF', '#A78BD0', '#7FBF6B', '#5BC0BE', '#F4C95D', '#EC8FA4'];
 
   protected readonly children = signal<ChildSummary[]>([]);
   protected readonly mascot = signal('');
@@ -189,7 +122,6 @@ export class ChildrenTabComponent {
     this.api.listChildren().subscribe((list) => this.children.set(list));
   }
 
-  /** Se puede dar de alta cuando hay nombre, mascota y una edad válida. */
   canAdd(): boolean {
     return this.name.trim().length > 0 && this.mascot() !== '' && !!this.age && this.age > 0;
   }
@@ -218,7 +150,6 @@ export class ChildrenTabComponent {
   }
 
   remove(c: ChildSummary): void {
-    // Borra el niño y todo lo suyo (horario, rutinas, tareas, monedero...).
     this.api.deleteChild(c.id).subscribe(() => {
       this.reload();
       this.changed.emit();

frontend/src/app/features/parents/materials-tab.component.ts

@@ -3,23 +3,38 @@ import { FormsModule } from '@angular/forms';
 import { ParentApiService } from '../../core/parent-api.service';
 import { I18nService } from '../../core/i18n.service';
 import { ActivityView, MaterialView } from '../../core/models';
+import { EmojiPickerComponent } from '../../shared/emoji-picker.component';
+import { ColorPickerComponent } from '../../shared/color-picker.component';
 
 /** Pestaña Materiales: catálogo de materiales y actividades (con su material). */
 @Component({
   selector: 'app-materials-tab',
-  imports: [FormsModule],
+  imports: [FormsModule, EmojiPickerComponent, ColorPickerComponent],
   template: `
     <!-- Alta de material -->
     <div class="adm-card">
       <p class="adm-label">Nuevo material</p>
-      <div class="adm-row">
-        <input class="adm-input adm-input--sm" [(ngModel)]="mIcon" placeholder="🎒" maxlength="4" />
-        <input class="adm-input" [(ngModel)]="mEs" placeholder="Nombre (ES)" />
-        <input class="adm-input" [(ngModel)]="mCa" placeholder="Nom (CA)" />
-        <input class="adm-input adm-input--sm" type="color" [(ngModel)]="mColor" />
-        <button class="adm-btn" [disabled]="!mEs || !mCa || !mIcon" (click)="addMaterial()">+ {{ i18n.t('add') }}</button>
+      <div class="grid2">
+        <div class="field">
+          <label class="field__label">Nombre (ES)</label>
+          <input class="field__input" [(ngModel)]="mEs" placeholder="Ej. Flauta" />
         </div>
-      <div class="adm-list" style="margin-top:12px">
+        <div class="field">
+          <label class="field__label">Nom (CA)</label>
+          <input class="field__input" [(ngModel)]="mCa" placeholder="Ex. Flauta" />
+        </div>
+      </div>
+      <div class="field">
+        <label class="field__label">Icono <span class="field__info" title="Toca un emoji para el material.">ⓘ</span></label>
+        <app-emoji-picker [(value)]="mIcon" [options]="materialIcons" />
+      </div>
+      <div class="field">
+        <label class="field__label">Color</label>
+        <app-color-picker [(value)]="mColor" />
+      </div>
+      <button class="adm-btn" [disabled]="!mEs || !mCa || !mIcon" (click)="addMaterial()">+ {{ i18n.t('add') }}</button>
+
+      <div class="adm-list" style="margin-top:16px">
         @for (m of materials(); track m.id) {
           <div class="adm-item">
             <span>{{ m.icon }}</span>
@@ -35,26 +50,38 @@ import { ActivityView, MaterialView } from '../../core/models';
     <!-- Alta de actividad con su material -->
     <div class="adm-card">
       <p class="adm-label">Nueva actividad</p>
-      <div class="adm-row">
-        <input class="adm-input adm-input--sm" [(ngModel)]="aIcon" placeholder="🤸" maxlength="4" />
-        <input class="adm-input" [(ngModel)]="aEs" placeholder="Actividad (ES)" />
-        <input class="adm-input" [(ngModel)]="aCa" placeholder="Activitat (CA)" />
-        <input class="adm-input adm-input--sm" type="color" [(ngModel)]="aColor" />
+      <div class="grid2">
+        <div class="field">
+          <label class="field__label">Actividad (ES)</label>
+          <input class="field__input" [(ngModel)]="aEs" placeholder="Ej. Gimnasia" />
         </div>
-      <p class="adm-label" style="margin-top:12px">Material que conlleva:</p>
-      <div class="adm-row">
+        <div class="field">
+          <label class="field__label">Activitat (CA)</label>
+          <input class="field__input" [(ngModel)]="aCa" placeholder="Ex. Gimnàstica" />
+        </div>
+      </div>
+      <div class="field">
+        <label class="field__label">Icono <span class="field__info" title="Toca un emoji para la actividad.">ⓘ</span></label>
+        <app-emoji-picker [(value)]="aIcon" [options]="activityIcons" />
+      </div>
+      <div class="field">
+        <label class="field__label">Color</label>
+        <app-color-picker [(value)]="aColor" />
+      </div>
+      <div class="field">
+        <label class="field__label">Material que conlleva</label>
+        <div class="picker">
           @for (m of materials(); track m.id) {
             <label class="adm-chip">
               <input type="checkbox" [checked]="selectedMaterials.has(m.id)" (change)="toggleMaterial(m.id)" />
               {{ m.icon }} {{ i18n.label(m.labelEs, m.labelCa) }}
             </label>
+          } @empty {
+            <span class="adm-empty">Crea materiales primero ↑</span>
           }
         </div>
-      <div class="adm-row" style="margin-top:12px">
-        <button class="adm-btn" [disabled]="!aEs || !aCa || !aIcon" (click)="addActivity()">
-          + {{ i18n.t('add') }}
-        </button>
       </div>
+      <button class="adm-btn" [disabled]="!aEs || !aCa || !aIcon" (click)="addActivity()">+ {{ i18n.t('add') }}</button>
     </div>
 
     <!-- Actividades existentes -->
@@ -65,8 +92,7 @@ import { ActivityView, MaterialView } from '../../core/models';
           <div class="adm-item">
             <span>{{ a.icon }}</span>
             <span class="adm-item__grow">
-              <strong>{{ i18n.label(a.labelEs, a.labelCa) }}</strong>
-              — {{ materialNames(a) }}
+              <strong>{{ i18n.label(a.labelEs, a.labelCa) }}</strong> — {{ materialNames(a) }}
             </span>
             <button class="adm-del" (click)="delActivity(a)">✕</button>
           </div>
@@ -76,22 +102,40 @@ import { ActivityView, MaterialView } from '../../core/models';
       </div>
     </div>
   `,
+  styles: [
+    `
+      .field { margin-bottom: var(--space-4); }
+      .field__label { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text-1); margin-bottom: 6px; }
+      .field__info { cursor: help; color: var(--text-4); font-size: 0.85rem; }
+      .field__input {
+        font-family: var(--font-body); font-size: 1rem; padding: 12px 14px;
+        border: 2px solid var(--border-2); border-radius: var(--radius-sm);
+        background: var(--surface); color: var(--text-strong); width: 100%; box-sizing: border-box;
+      }
+      .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
+      @media (max-width: 520px) { .grid2 { grid-template-columns: 1fr; } }
+      .picker { display: flex; flex-wrap: wrap; gap: 8px; }
+    `,
+  ],
 })
 export class MaterialsTabComponent {
   private readonly api = inject(ParentApiService);
   protected readonly i18n = inject(I18nService);
 
+  protected readonly materialIcons = ['✏️', '📘', '📏', '🎵', '📓', '👕', '👟', '🧖', '💧', '📖', '📒', '🍎', '🎒', '🖍️', '✂️', '📐', '🧮', '🎨'];
+  protected readonly activityIcons = ['🤸', '🎵', '📘', '📖', '🎨', '⚽', '🔬', '🧮', '🌍', '🎭', '💻', '🏃'];
+
   protected readonly materials = signal<MaterialView[]>([]);
   protected readonly activities = signal<ActivityView[]>([]);
 
   protected mIcon = '';
   protected mEs = '';
   protected mCa = '';
-  protected mColor = '#5b8def';
+  protected mColor = '#5B8DEF';
   protected aIcon = '';
   protected aEs = '';
   protected aCa = '';
-  protected aColor = '#7fbf6b';
+  protected aColor = '#7FBF6B';
   protected selectedMaterials = new Set<number>();
 
   constructor() {

frontend/src/app/features/parents/rewards-tab.component.ts

@@ -4,11 +4,13 @@ import { ApiService } from '../../core/api.service';
 import { ParentApiService } from '../../core/parent-api.service';
 import { I18nService } from '../../core/i18n.service';
 import { RewardAdminView } from '../../core/models';
+import { EmojiPickerComponent } from '../../shared/emoji-picker.component';
+import { ColorPickerComponent } from '../../shared/color-picker.component';
 
 /** Pestaña Recompensas: catálogo de premios + gamificación y ajustes del niño. */
 @Component({
   selector: 'app-rewards-tab',
-  imports: [FormsModule],
+  imports: [FormsModule, EmojiPickerComponent, ColorPickerComponent],
   template: `
     <!-- Gamificación + ajustes del niño -->
     <div class="adm-card">
@@ -38,17 +40,34 @@ import { RewardAdminView } from '../../core/models';
     <!-- Alta de premio -->
     <div class="adm-card">
       <p class="adm-label">Nuevo premio</p>
-      <div class="adm-row">
-        <input class="adm-input adm-input--sm" [(ngModel)]="icon" placeholder="🎮" maxlength="4" />
-        <input class="adm-input" [(ngModel)]="labelEs" placeholder="Premio (ES)" />
-        <input class="adm-input" [(ngModel)]="labelCa" placeholder="Premi (CA)" />
-        <input class="adm-input adm-input--sm" type="number" min="1" [(ngModel)]="cost" placeholder="🪙" />
-        <input class="adm-input adm-input--sm" type="color" [(ngModel)]="color" />
+      <div class="grid2">
+        <div class="field">
+          <label class="field__label">Premio (ES)</label>
+          <input class="field__input" [(ngModel)]="labelEs" placeholder="Ej. 30 min de tablet" />
+        </div>
+        <div class="field">
+          <label class="field__label">Premi (CA)</label>
+          <input class="field__input" [(ngModel)]="labelCa" placeholder="Ex. 30 min de tauleta" />
+        </div>
+      </div>
+      <div class="field">
+        <label class="field__label">Icono <span class="field__info" title="Toca un emoji para el premio.">ⓘ</span></label>
+        <app-emoji-picker [(value)]="icon" [options]="rewardIcons" />
+      </div>
+      <div class="grid2">
+        <div class="field">
+          <label class="field__label">Coste 🪙</label>
+          <input class="field__input" type="number" min="1" [(ngModel)]="cost" placeholder="monedas" />
+        </div>
+        <div class="field">
+          <label class="field__label">Color</label>
+          <app-color-picker [(value)]="color" />
+        </div>
+      </div>
       <button class="adm-btn" [disabled]="!labelEs || !labelCa || !icon || !cost" (click)="add()">
         + {{ i18n.t('add') }}
       </button>
     </div>
-    </div>
 
     <!-- Catálogo de premios -->
     <div class="adm-card">
@@ -67,6 +86,20 @@ import { RewardAdminView } from '../../core/models';
       </div>
     </div>
   `,
+  styles: [
+    `
+      .field { margin-bottom: var(--space-4); }
+      .field__label { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text-1); margin-bottom: 6px; }
+      .field__info { cursor: help; color: var(--text-4); font-size: 0.85rem; }
+      .field__input {
+        font-family: var(--font-body); font-size: 1rem; padding: 12px 14px;
+        border: 2px solid var(--border-2); border-radius: var(--radius-sm);
+        background: var(--surface); color: var(--text-strong); width: 100%; box-sizing: border-box;
+      }
+      .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
+      @media (max-width: 520px) { .grid2 { grid-template-columns: 1fr; } }
+    `,
+  ],
 })
 export class RewardsTabComponent {
   @Input({ required: true }) set childId(value: number) {
@@ -100,11 +133,12 @@ export class RewardsTabComponent {
   protected ttsEnabled = true;
   protected dyslexiaFont = true;
 
+  protected readonly rewardIcons = ['🎮', '🍕', '🛝', '🍿', '🌙', '🦖', '🍦', '🎬', '🧸', '🎨', '⚽', '🚲', '🎁', '🍫', '🐾', '🎡'];
   protected icon = '';
   protected labelEs = '';
   protected labelCa = '';
   protected cost: number | null = null;
-  protected color = '#5b8def';
+  protected color = '#5B8DEF';
 
   constructor() {
     this.reload();

frontend/src/app/features/parents/routines-tab.component.ts

@@ -3,6 +3,8 @@ import { FormsModule } from '@angular/forms';
 import { ParentApiService } from '../../core/parent-api.service';
 import { I18nService } from '../../core/i18n.service';
 import { RoutineView } from '../../core/models';
+import { EmojiPickerComponent } from '../../shared/emoji-picker.component';
+import { ColorPickerComponent } from '../../shared/color-picker.component';
 
 const DAYS: { key: string; es: string; ca: string }[] = [
   { key: 'MONDAY', es: 'Lunes', ca: 'Dilluns' },
@@ -15,7 +17,7 @@ const DAYS: { key: string; es: string; ca: string }[] = [
 /** Pestaña Rutinas de tarde por día de la semana, de un niño. */
 @Component({
   selector: 'app-routines-tab',
-  imports: [FormsModule],
+  imports: [FormsModule, EmojiPickerComponent, ColorPickerComponent],
   template: `
     <div class="adm-card">
       <div class="adm-row">
@@ -35,13 +37,25 @@ const DAYS: { key: string; es: string; ca: string }[] = [
 
     <div class="adm-card">
       <p class="adm-label">Nueva rutina</p>
-      <div class="adm-row">
-        <input class="adm-input adm-input--sm" [(ngModel)]="icon" placeholder="🎹" maxlength="4" />
-        <input class="adm-input" [(ngModel)]="labelEs" placeholder="Rutina (ES)" />
-        <input class="adm-input" [(ngModel)]="labelCa" placeholder="Rutina (CA)" />
-        <input class="adm-input adm-input--sm" type="color" [(ngModel)]="color" />
-        <button class="adm-btn" [disabled]="!labelEs || !labelCa || !icon" (click)="add()">+ {{ i18n.t('add') }}</button>
+      <div class="grid2">
+        <div class="field">
+          <label class="field__label">Rutina (ES)</label>
+          <input class="field__input" [(ngModel)]="labelEs" placeholder="Ej. Hacer los deberes" />
         </div>
+        <div class="field">
+          <label class="field__label">Rutina (CA)</label>
+          <input class="field__input" [(ngModel)]="labelCa" placeholder="Ex. Fer els deures" />
+        </div>
+      </div>
+      <div class="field">
+        <label class="field__label">Icono <span class="field__info" title="Toca un emoji para la rutina.">ⓘ</span></label>
+        <app-emoji-picker [(value)]="icon" [options]="routineIcons" />
+      </div>
+      <div class="field">
+        <label class="field__label">Color</label>
+        <app-color-picker [(value)]="color" />
+      </div>
+      <button class="adm-btn" [disabled]="!labelEs || !labelCa || !icon" (click)="add()">+ {{ i18n.t('add') }}</button>
     </div>
 
     <div class="adm-card">
@@ -60,6 +74,20 @@ const DAYS: { key: string; es: string; ca: string }[] = [
       </div>
     </div>
   `,
+  styles: [
+    `
+      .field { margin-bottom: var(--space-4); }
+      .field__label { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text-1); margin-bottom: 6px; }
+      .field__info { cursor: help; color: var(--text-4); font-size: 0.85rem; }
+      .field__input {
+        font-family: var(--font-body); font-size: 1rem; padding: 12px 14px;
+        border: 2px solid var(--border-2); border-radius: var(--radius-sm);
+        background: var(--surface); color: var(--text-strong); width: 100%; box-sizing: border-box;
+      }
+      .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
+      @media (max-width: 520px) { .grid2 { grid-template-columns: 1fr; } }
+    `,
+  ],
 })
 export class RoutinesTabComponent {
   @Input({ required: true }) set childId(value: number) {
@@ -78,10 +106,11 @@ export class RoutinesTabComponent {
     this.routines().filter((r) => r.dayOfWeek === this.day()),
   );
 
+  protected readonly routineIcons = ['🎒', '🥪', '📝', '🎹', '🍽️', '🛁', '🦷', '📚', '🧹', '🐕', '🛏️', '🎨', '⚽', '🧺'];
   protected icon = '';
   protected labelEs = '';
   protected labelCa = '';
-  protected color = '#a78bd0';
+  protected color = '#A78BD0';
 
   private reload(): void {
     this.api.listRoutines(this._childId).subscribe((l) => this.routines.set(l));

frontend/src/app/shared/color-picker.component.ts

@@ -0,0 +1,44 @@
+import { Component, model } from '@angular/core';
+
+/** Selector de color de acento: paleta del handoff, clicable. Two-way con [(value)]. */
+@Component({
+  selector: 'app-color-picker',
+  imports: [],
+  template: `
+    <div class="picker">
+      @for (c of colors; track c) {
+        <button
+          type="button"
+          class="swatch"
+          [class.swatch--sel]="value() === c"
+          [style.background]="c"
+          [attr.aria-label]="'Color ' + c"
+          (click)="value.set(c)"
+        ></button>
+      }
+    </div>
+  `,
+  styles: [
+    `
+      .picker { display: flex; flex-wrap: wrap; gap: 8px; }
+      .swatch {
+        all: unset;
+        cursor: pointer;
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        box-shadow: var(--shadow-card);
+        border: 3px solid transparent;
+        transition: transform 0.1s;
+      }
+      .swatch:hover { transform: scale(1.1); }
+      .swatch--sel { border-color: var(--text-strong); transform: scale(1.1); }
+    `,
+  ],
+})
+export class ColorPickerComponent {
+  /** Color seleccionado (hex). Por defecto el primero de la paleta. */
+  readonly value = model<string>('#F2A65A');
+
+  protected readonly colors = ['#F2A65A', '#5B8DEF', '#A78BD0', '#7FBF6B', '#5BC0BE', '#F4C95D', '#EC8FA4'];
+}

frontend/src/app/shared/emoji-picker.component.ts

@@ -0,0 +1,43 @@
+import { Component, input, model } from '@angular/core';
+
+/** Selector de emoji clicable a partir de una lista de opciones. Two-way con [(value)]. */
+@Component({
+  selector: 'app-emoji-picker',
+  imports: [],
+  template: `
+    <div class="picker">
+      @for (e of options(); track e) {
+        <button type="button" class="emoji" [class.emoji--sel]="value() === e" (click)="value.set(e)">
+          {{ e }}
+        </button>
+      }
+    </div>
+  `,
+  styles: [
+    `
+      .picker { display: flex; flex-wrap: wrap; gap: 8px; }
+      .emoji {
+        all: unset;
+        cursor: pointer;
+        width: 48px;
+        height: 48px;
+        border-radius: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 26px;
+        background: var(--surface-soft);
+        border: 2px solid transparent;
+        transition: transform 0.1s, border-color 0.15s;
+      }
+      .emoji:hover { transform: scale(1.08); }
+      .emoji--sel { border-color: var(--accent-blue); background: color-mix(in srgb, var(--accent-blue) 12%, #fff); }
+    `,
+  ],
+})
+export class EmojiPickerComponent {
+  /** Emoji seleccionado. */
+  readonly value = model<string>('');
+  /** Lista de emojis ofrecidos. */
+  readonly options = input<string[]>([]);
+}