3. Componentes, directivas, servicios e inyección de dependencias

import {
  ChangeDetectionStrategy, Component, ViewEncapsulation,
  input, output,
} from '@angular/core';
import { DatePipe } from '@angular/common';
import { Tarea } from '../modelos/tarea';

@Component({
  // 1. Cómo se invoca el componente desde otra plantilla.
  selector: 'tf-tarea-item',

  // 2. Qué se puede usar DENTRO de esta plantilla: otros componentes,
  //    directivas y pipes. Si no está aquí, no se puede usar.
  imports: [DatePipe],

  // 3. La plantilla. Con templateUrl vive en un archivo aparte;
  //    la regla práctica es: más de 15 líneas, archivo aparte.
  template: `
    <article class="item" [class.hecha]="tarea().completada">
      <h3>{{ tarea().titulo }}</h3>
      <time>{{ tarea().vence | date:'shortDate' }}</time>
      <button type="button" (click)="alternar.emit(tarea().id)">
        {{ tarea().completada ? 'Reabrir' : 'Completar' }}
      </button>
    </article>
  `,

  // 4. Estilos con ámbito propio (ver 3.8).
  styleUrl: './tarea-item.component.css',

  // 5. Detección de cambios: OnPush siempre, por defecto (ver 3.15 y cap. 4).
  changeDetection: ChangeDetectionStrategy.OnPush,

  // 6. Encapsulación de estilos. Emulated es el valor por defecto.
  encapsulation: ViewEncapsulation.Emulated,

  // 7. Enlaces y escuchas sobre el propio elemento anfitrión (ver 3.9).
  host: {
    'role': 'listitem',
    '[attr.aria-checked]': 'tarea().completada',
    '[class.vencida]': 'estaVencida()',
  },
})
export class TareaItemComponent {
  readonly tarea = input.required<Tarea>();
  readonly alternar = output<string>();

  protected estaVencida(): boolean {
    const t = this.tarea();
    return !t.completada && t.vence != null && t.vence < new Date();
  }
}

import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
import { TareasStore } from './tareas.store';
import { TareaListaComponent } from './tarea-lista.component';

@Component({
  selector: 'tf-pagina-tareas',
  imports: [TareaListaComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <h1>Tareas del proyecto</h1>

    <input
      type="search"
      [value]="filtro()"
      (input)="filtro.set($any($event.target).value)"
      placeholder="Filtrar por título" />

    <!-- El contenedor decide QUÉ datos bajan y QUÉ pasa al recibir eventos -->
    <tf-tarea-lista
      [tareas]="visibles()"
      [cargando]="store.cargando()"
      (alternar)="store.alternarCompletada($event)"
      (eliminar)="store.eliminar($event)" />
  `,
})
export class PaginaTareasComponent {
  protected readonly store = inject(TareasStore);
  protected readonly filtro = signal('');

  // La lógica de filtrado es del contenedor, no de la lista:
  // la lista solo sabe pintar el array que recibe.
  protected readonly visibles = computed(() => {
    const texto = this.filtro().trim().toLowerCase();
    const tareas = this.store.tareas();
    return texto ? tareas.filter((t) => t.titulo.toLowerCase().includes(texto)) : tareas;
  });
}

import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
import { Tarea } from '../modelos/tarea';

@Component({
  selector: 'tf-tarea-lista',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @if (cargando()) {
      <p role="status">Cargando tareas…</p>
    } @else {
      <ul role="list">
        @for (tarea of tareas(); track tarea.id) {
          <li>
            <span>{{ tarea.titulo }}</span>
            <button type="button" (click)="alternar.emit(tarea.id)">Alternar</button>
            <button type="button" (click)="eliminar.emit(tarea.id)">Eliminar</button>
          </li>
        } @empty {
          <li>No hay tareas que coincidan con el filtro.</li>
        }
      </ul>
    }
  `,
})
export class TareaListaComponent {
  readonly tareas = input.required<readonly Tarea[]>();
  readonly cargando = input(false);

  readonly alternar = output<string>();
  readonly eliminar = output<string>();
}

import { Component, booleanAttribute, input, numberAttribute } from '@angular/core';
import { Tarea } from '../modelos/tarea';

@Component({ selector: 'tf-tarea-detalle', /* … */ })
export class TareaDetalleComponent {
  // 1) OPCIONAL CON VALOR POR DEFECTO. Tipo: InputSignal<boolean>
  readonly compacta = input(false);

  // 2) OPCIONAL SIN VALOR POR DEFECTO. El tipo incluye undefined:
  //    InputSignal<string | undefined>. Hay que tratarlo en plantilla.
  readonly nota = input<string>();

  // 3) OBLIGATORIA. No admite valor por defecto y su tipo NO incluye
  //    undefined: InputSignal<Tarea>. Si el padre no la enlaza, el
  //    compilador de plantillas lo detecta en tiempo de compilación.
  readonly tarea = input.required<Tarea>();

  // 4) ALIAS: nombre público distinto del nombre de la propiedad.
  //    En la plantilla del padre: [proyecto]="p()"
  readonly proyectoSeleccionado = input<Proyecto | null>(null, { alias: 'proyecto' });

  // 5) TRANSFORMACIÓN: convierte lo que llega antes de guardarlo.
  //    booleanAttribute permite el estilo HTML nativo: <tf-tarea-detalle solo-lectura>
  //    (presencia del atributo = true, ausencia = false, "false" = false)
  readonly soloLectura = input(false, { transform: booleanAttribute });

  // 6) numberAttribute convierte "3" (string del atributo) en 3.
  //    Si no es convertible, devuelve NaN: valida cuando importe.
  readonly maxSubtareas = input(10, { transform: numberAttribute });

  // 7) Transformación propia: normalizar en la frontera del componente,
  //    para que el resto de la clase trabaje siempre con datos limpios.
  readonly etiquetas = input([] as readonly string[], {
    transform: (valor: string | readonly string[]) =>
      typeof valor === 'string'
        ? valor.split(',').map((e) => e.trim()).filter(Boolean)
        : valor,
  });
}

import { Component, input, output, outputFromObservable } from '@angular/core';

export interface CambioTarea { readonly id: string; readonly campo: keyof Tarea; }

@Component({ selector: 'tf-tarea-editor', /* … */ })
export class TareaEditorComponent {
  readonly tarea = input.required<Tarea>();

  // 1) Salida tipada. El nombre describe lo OCURRIDO, no lo que
  //    el padre debe hacer: "guardar" (hecho), no "guardarEnApi".
  readonly guardar = output<Tarea>();

  // 2) Salida sin datos: el tipo es void y se emite con emit().
  readonly cancelar = output<void>();

  // 3) Alias, igual que en las entradas.
  readonly cambio = output<CambioTarea>({ alias: 'campoModificado' });

  // 4) Si el evento nace de un flujo de RxJS ya existente,
  //    outputFromObservable lo publica como salida sin
  //    suscribirse a mano ni gestionar la cancelación.
  readonly teclaPulsada = outputFromObservable(this.pulsaciones$);

  confirmar(borrador: Tarea): void {
    this.guardar.emit(borrador);
  }
}

export class TareaAntiguaComponent implements OnChanges {
  // 1) Entrada simple. El '!' es una PROMESA del programador
  //    de que alguien la enlazará; nadie la verifica.
  @Input() tarea!: Tarea;

  // 2) Alias como argumento del decorador.
  @Input('proyecto') proyectoSeleccionado: Proyecto | null = null;

  // 3) Obligatoriedad declarada (Angular 16+): el compilador
  //    de plantillas sí avisa si el padre no la enlaza.
  @Input({ required: true }) usuario!: Usuario;

  // 4) Transformación (Angular 16+), equivalente al transform de input().
  @Input({ transform: booleanAttribute }) soloLectura = false;

  // 5) SETTER: la forma clásica de reaccionar a un cambio de una
  //    entrada concreta. Con señales esto es un computed o un effect.
  private _filtro = '';
  @Input()
  set filtro(valor: string) {
    this._filtro = valor.trim().toLowerCase();
    this.recalcularVisibles();
  }
  get filtro(): string { return this._filtro; }

  // 6) Salida: EventEmitter extiende Subject de RxJS, así que el
  //    exterior puede llamar a next(), complete() o error() sobre
  //    ella. Es una fuga de encapsulación que output() ya no tiene.
  @Output() guardar = new EventEmitter<Tarea>();

  ngOnChanges(cambios: SimpleChanges): void { /* ver 3.5 */ }
}

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

export class TareaGraficaComponent implements OnChanges {
  @Input({ required: true }) datos!: readonly PuntoSerie[];
  @Input() escala = 1;

  ngOnChanges(cambios: SimpleChanges): void {
    // 1) SIEMPRE comprobar la clave: 'datos' solo está presente
    //    si esa entrada concreta ha cambiado en esta pasada.
    if (cambios['datos']) {
      const c = cambios['datos'];

      // 2) isFirstChange() distingue la inicialización de una
      //    actualización posterior. En la primera llamada,
      //    previousValue es undefined.
      if (c.isFirstChange()) {
        this.crearGrafica(c.currentValue);
      } else {
        this.actualizarGrafica(c.previousValue, c.currentValue);
      }
    }

    // 3) Reaccionar solo a lo que importa: si únicamente cambia
    //    la escala, no hace falta recalcular toda la serie.
    if (cambios['escala'] && !cambios['datos']) {
      this.reescalar(this.escala);
    }
  }
}

// ATENCIÓN a la comparación: Angular compara referencias con ===
// para los objetos. Si el padre hace this.datos.push(nuevo), la
// referencia del array no cambia y ngOnChanges NO se ejecuta.
// Con OnPush, además, la vista tampoco se refresca. La solución
// es la inmutabilidad: this.datos = [...this.datos, nuevo];

import { Component, ElementRef, afterNextRender, inject, viewChild } from '@angular/core';

export class TableroTareasComponent {
  private readonly lienzo = viewChild.required<ElementRef<HTMLCanvasElement>>('lienzo');

  constructor() {
    // Se registra en el contexto de inyección (constructor o campo).
    // Se ejecuta UNA vez, tras el siguiente renderizado, ya en el DOM.
    afterNextRender({
      // Fase de lectura temprana: leer geometría antes de escribir.
      earlyRead: () => this.lienzo().nativeElement.getBoundingClientRect(),

      // Fase de escritura: recibe el resultado de earlyRead.
      write: (caja) => {
        const el = this.lienzo().nativeElement;
        el.width = caja.width;
        el.height = caja.height;
        this.dibujar(el.getContext('2d')!);
      },
    });
  }
}

// Separar lectura y escritura en fases distintas evita el
// "layout thrashing": alternar medir y escribir en el mismo
// bucle obliga al navegador a recalcular el layout cada vez.

import { DestroyRef, Injectable, effect, inject } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { interval } from 'rxjs';

@Injectable()
export class SincronizacionService {
  private readonly destroyRef = inject(DestroyRef);

  constructor() {
    // FORMA 1 · takeUntilDestroyed: la preferida con RxJS.
    // Dentro del contexto de inyección puede omitirse el argumento;
    // fuera de él (por ejemplo en ngOnInit) hay que pasar el DestroyRef.
    interval(30_000)
      .pipe(takeUntilDestroyed())
      .subscribe(() => this.sincronizar());

    // FORMA 2 · DestroyRef.onDestroy: un callback de limpieza para
    // recursos que no son observables. Devuelve una función para
    // cancelar el propio registro. Funciona en servicios, directivas
    // y funciones auxiliares, no solo en componentes.
    const observador = new ResizeObserver(() => this.recolocar());
    this.destroyRef.onDestroy(() => observador.disconnect());

    // FORMA 3 · el propio effect() se destruye con su contexto.
    effect(() => this.registrar(this.estado()));
  }

  // FORMA 4 · el hook clásico, que sigue siendo perfectamente válido:
  //   ngOnDestroy(): void { this.socket.close(); }
  // Ventaja de DestroyRef: la limpieza se declara JUNTO a la creación
  // del recurso, no cuarenta líneas más abajo en otro método. Menos
  // ocasiones de olvidarla al añadir o quitar código.
}

import {
  Component, ElementRef, contentChild, contentChildren, viewChild, viewChildren,
} from '@angular/core';

@Component({
  selector: 'tf-panel',
  template: `
    <h2 #titulo>{{ etiqueta() }}</h2>
    <ul>
      @for (f of filas(); track f.id) {
        <tf-fila [fila]="f" />
      }
    </ul>
    <ng-content />
  `,
})
export class PanelComponent {
  // 1) VISTA · por referencia de plantilla (#titulo).
  //    Tipo: Signal<ElementRef<HTMLElement> | undefined>
  private readonly titulo = viewChild<ElementRef<HTMLElement>>('titulo');

  // 2) VISTA obligatoria: el tipo NO incluye undefined, pero
  //    lanza un error si no se encuentra. Úsalo solo cuando el
  //    elemento esté SIEMPRE presente (no dentro de un @if).
  private readonly cabecera = viewChild.required<ElementRef>('titulo');

  // 3) VISTA · por tipo de componente o directiva.
  //    Devuelve la INSTANCIA de la clase, no el elemento del DOM.
  private readonly primeraFila = viewChild(FilaComponent);

  // 4) VISTA · varias coincidencias. Tipo: Signal<readonly FilaComponent[]>
  //    Con @for, la señal se actualiza al cambiar la lista.
  private readonly filasVista = viewChildren(FilaComponent);

  // 5) CONTENIDO · lo que me proyectan desde fuera.
  private readonly accionPrincipal = contentChild(BotonComponent);
  private readonly acciones = contentChildren(BotonComponent);

  // 6) read: qué quiero recibir de la coincidencia. Sin read,
  //    Angular devuelve la instancia de la directiva si el selector
  //    es una clase, o el ElementRef si es una referencia de plantilla.
  private readonly elementoFila = viewChild(FilaComponent, { read: ElementRef });
  private readonly contenedorFila = viewChild(FilaComponent, { read: ViewContainerRef });

  // 7) descendants (solo en consultas de contenido): por defecto false
  //    en contentChildren, es decir, solo hijos directos del contenido.
  //    Con true, busca en todo el subárbol proyectado.
  private readonly todosLosBotones = contentChildren(BotonComponent, { descendants: true });
}

@Component({
  selector: 'tf-tarjeta',
  template: `
    <article class="tarjeta">
      <header>
        <!-- 1) Proyección SELECTIVA: solo lo que case con el selector.
                Admite selectores CSS: etiqueta, .clase, [atributo]. -->
        <ng-content select="[tarjetaTitulo]">
          <!-- 2) CONTENIDO POR DEFECTO: se pinta si nadie proyecta
                  nada que case con este selector. -->
          <h3>Sin título</h3>
        </ng-content>
        <ng-content select="[tarjetaAcciones]" />
      </header>

      <!-- 3) El ng-content SIN select recoge todo lo demás. Debe ir
              DESPUÉS de los selectivos: el orden de declaración
              determina qué se lleva cada hueco. -->
      <div class="cuerpo"><ng-content /></div>

      <footer><ng-content select="tf-tarjeta-pie" /></footer>
    </article>
  `,
})
export class TarjetaComponent {}

<tf-tarjeta>
  <h3 tarjetaTitulo>{{ tarea().titulo }}</h3>
  <button tarjetaAcciones type="button" (click)="editar()">Editar</button>
  <p>{{ tarea().descripcion }}</p>      <!-- va al hueco sin select -->
  <tf-tarjeta-pie>Vence el {{ tarea().vence | date }}</tf-tarjeta-pie>
</tf-tarjeta>

@Component({
  selector: 'tf-pestana',
  template: `@if (activa()) { <div role="tabpanel"><ng-content /></div> }`,
})
export class PestanaComponent {
  readonly titulo = input.required<string>();
  // El contenedor es quien manda: el elemento solo expone estado.
  readonly activa = signal(false);
}

@Component({
  selector: 'tf-pestanas',
  imports: [],
  template: `
    <div role="tablist">
      @for (p of pestanas(); track p.titulo()) {
        <button role="tab" type="button"
                [attr.aria-selected]="p.activa()"
                (click)="activar(p)">{{ p.titulo() }}</button>
      }
    </div>
    <ng-content />
  `,
})
export class PestanasComponent implements AfterContentInit {
  // Consulta de CONTENIDO: las pestañas las escribe quien usa
  // el componente, no esta plantilla.
  readonly pestanas = contentChildren(PestanaComponent);

  ngAfterContentInit(): void {
    // Ya hay contenido: se puede activar la primera.
    const primera = this.pestanas()[0];
    if (primera) { this.activar(primera); }
  }

  protected activar(elegida: PestanaComponent): void {
    for (const p of this.pestanas()) { p.activa.set(p === elegida); }
  }
}
// Uso, expresivo y sin estado en el consumidor:
//   <tf-pestanas>
//     <tf-pestana titulo="Tareas">…</tf-pestana>
//     <tf-pestana titulo="Miembros">…</tf-pestana>
//   </tf-pestanas>

/* :host = el propio elemento anfitrión (<tf-tarjeta>).
   Los componentes son display:inline por defecto: casi siempre
   hay que declararlo explícitamente. */
:host {
  display: block;
  border: 1px solid var(--tf-borde, #ddd);
  border-radius: var(--tf-radio, 8px);
}

/* :host con condición: se aplica solo si el anfitrión cumple
   el selector. Combina muy bien con un @HostBinding de clase. */
:host(.destacada) { border-color: var(--tf-acento); }
:host([disabled])  { opacity: 0.5; pointer-events: none; }

/* :host-context = mira hacia ARRIBA, a los ancestros del anfitrión.
   Es la forma correcta de reaccionar a un tema aplicado en <body>
   sin que el componente tenga que recibir una entrada para ello. */
:host-context(.tema-oscuro) { background: #1e1e22; color: #eee; }

/* ::ng-deep atraviesa la encapsulación hacia ABAJO. Está
   DESACONSEJADO y marcado como obsoleto desde hace años. */
:host ::ng-deep .librería-interna { padding: 0; }

import { Directive, ElementRef, HostBinding, HostListener, inject, input, output } from '@angular/core';

@Directive({ selector: '[tfArrastrable]' })
export class ArrastrableDirective {
  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef);

  // Una directiva tiene entradas y salidas igual que un componente.
  // Con el mismo nombre que el selector, se enlaza así:
  //   <li [tfArrastrable]="tarea.id">
  readonly tfArrastrable = input.required<string>();
  readonly soltada = output<{ id: string; destino: string }>();

  // @HostBinding enlaza una propiedad, atributo, clase o estilo
  // del elemento anfitrión al valor de un campo de la clase.
  @HostBinding('attr.draggable') protected readonly draggable = true;
  @HostBinding('class.arrastrando') protected arrastrando = false;
  @HostBinding('style.cursor') protected get cursor(): string {
    return this.arrastrando ? 'grabbing' : 'grab';
  }
  // Accesibilidad: una interacción de ratón necesita equivalente
  // de teclado, y el elemento debe ser alcanzable con tabulador.
  @HostBinding('attr.tabindex') protected readonly tabindex = 0;

  // @HostListener suscribe un manejador a un evento del anfitrión.
  // Angular lo cancela solo al destruir la directiva.
  @HostListener('dragstart', ['$event'])
  protected alEmpezar(evento: DragEvent): void {
    this.arrastrando = true;
    evento.dataTransfer?.setData('text/plain', this.tfArrastrable());
  }

  @HostListener('dragend')
  protected alTerminar(): void { this.arrastrando = false; }

  // Eventos globales: el prefijo window: o document: permite
  // escuchar fuera del anfitrión SIN addEventListener manual,
  // y por tanto sin tener que acordarse de eliminarlo.
  @HostListener('window:keyup.escape')
  protected alCancelar(): void { this.arrastrando = false; }
}

@Directive({
  selector: '[tfArrastrable]',
  host: {
    // Atributos estáticos: sin corchetes, valor literal.
    'draggable': 'true',
    'tabindex': '0',
    // Enlaces: expresión evaluada en el contexto de la clase.
    '[class.arrastrando]': 'arrastrando()',
    '[style.cursor]': 'arrastrando() ? "grabbing" : "grab"',
    // Escuchas: $event está disponible directamente.
    '(dragstart)': 'alEmpezar($event)',
    '(dragend)': 'arrastrando.set(false)',
    '(window:keyup.escape)': 'arrastrando.set(false)',
  },
})
export class ArrastrableDirective {
  readonly tfArrastrable = input.required<string>();
  protected readonly arrastrando = signal(false);
  protected alEmpezar(e: DragEvent): void {
    this.arrastrando.set(true);
    e.dataTransfer?.setData('text/plain', this.tfArrastrable());
  }
}
// Ventajas de host frente a los decoradores:
//  · Todos los enlaces del anfitrión se ven de un vistazo, juntos.
//  · Se heredan y se combinan mejor con hostDirectives (3.10).
//  · Es lo que aplica la migración automática de ng update.
// Inconveniente: las expresiones son cadenas de texto, así que el
// editor las comprueba menos que el código TypeScript de un método.

import { Directive, TemplateRef, ViewContainerRef, effect, inject, input } from '@angular/core';
import { SesionService } from './sesion.service';

// Contexto que la directiva pasa a la plantilla instanciada.
interface ContextoPermiso { readonly $implicit: string; readonly rol: string; }

@Directive({ selector: '[tfSiPermiso]' })
export class SiPermisoDirective {
  private readonly plantilla = inject<TemplateRef<ContextoPermiso>>(TemplateRef);
  private readonly contenedor = inject(ViewContainerRef);
  private readonly sesion = inject(SesionService);

  // MICROSINTAXIS. La expresión
  //   *tfSiPermiso="'tareas.editar'; rol as r; else sinPermiso"
  // se desazucara en:
  //   <ng-template [tfSiPermiso]="'tareas.editar'"
  //                [tfSiPermisoElse]="sinPermiso">
  // Regla: el primer valor va a la entrada con el NOMBRE del selector,
  // y cada palabra clave posterior se concatena en camelCase.
  readonly tfSiPermiso = input.required<string>();
  readonly tfSiPermisoElse = input<TemplateRef<unknown> | null>(null);

  private mostrando: boolean | null = null;

  constructor() {
    effect(() => {
      const permitido = this.sesion.puede(this.tfSiPermiso());
      // Guardar el estado anterior evita destruir y recrear la vista
      // en cada pasada: recrear pierde el foco y el estado del DOM.
      if (permitido === this.mostrando) { return; }
      this.mostrando = permitido;
      this.contenedor.clear();
      if (permitido) {
        this.contenedor.createEmbeddedView(this.plantilla, {
          $implicit: this.tfSiPermiso(),
          rol: this.sesion.rol(),
        });
      } else {
        const alternativa = this.tfSiPermisoElse();
        if (alternativa) { this.contenedor.createEmbeddedView(alternativa); }
      }
    });
  }
}

@Directive({ selector: '[tfSiExiste]' })
export class SiExisteDirective<T> {
  private readonly plantilla = inject<TemplateRef<{ $implicit: T }>>(TemplateRef);
  private readonly contenedor = inject(ViewContainerRef);

  readonly tfSiExiste = input.required<T | null | undefined>();

  // 1) Estrecha el tipo de la EXPRESIÓN de entrada: dentro del
  //    bloque, el compilador sabe que el valor no es nulo.
  //    El nombre es literal: ngTemplateGuard_ + nombre de la entrada.
  static ngTemplateGuard_tfSiExiste: 'binding';

  // 2) Tipa el CONTEXTO, de modo que la variable declarada con
  //    "let x" tenga tipo T en lugar de any.
  static ngTemplateContextGuard<T>(
    _dir: SiExisteDirective<T>,
    _ctx: unknown,
  ): _ctx is { $implicit: NonNullable<T> } {
    return true;
  }

  constructor() {
    effect(() => {
      this.contenedor.clear();
      const valor = this.tfSiExiste();
      if (valor != null) {
        this.contenedor.createEmbeddedView(this.plantilla, { $implicit: valor });
      }
    });
  }
}
// En la plantilla, 'tarea' es Tarea (no Tarea | null) y el
// compilador acepta tarea.titulo sin operador opcional:
//   <div *tfSiExiste="tareaSeleccionada() as tarea">
//     {{ tarea.titulo }}
//   </div>

@Component({
  selector: 'tf-boton-tarea',
  hostDirectives: [
    // Sin exponer nada: comportamiento interno, invisible desde fuera.
    FocoVisibleDirective,
    {
      directive: TooltipDirective,
      // inputs/outputs declara qué se REEXPORTA hacia el consumidor:
      // así <tf-boton-tarea tfTooltip="Completar"> funciona aunque
      // la entrada pertenezca a la directiva y no al componente.
      inputs: ['tfTooltip', 'tfTooltipPosicion: posicionAyuda'],
      outputs: ['tooltipMostrado'],
    },
  ],
  template: `<ng-content />`,
})
export class BotonTareaComponent {}
// Detalles importantes:
//  · Las directivas del anfitrión se instancian ANTES que el
//    componente, así que este puede inyectarlas en su constructor.
//  · Solo se admiten directivas sin selector propio (no componentes).
//  · Lo que no se declara en inputs/outputs queda encapsulado:
//    es composición con control explícito de la API pública.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'tfVencimiento',   // nombre usado en la plantilla
  pure: true,              // valor por defecto; explícito por claridad
})
export class VencimientoPipe implements PipeTransform {
  // El primer parámetro es el valor a la izquierda del |;
  // los siguientes son los argumentos tras los dos puntos:
  //   {{ tarea.vence | tfVencimiento:'corto' }}
  transform(fecha: Date | null, formato: 'corto' | 'largo' = 'largo'): string {
    if (!fecha) { return 'Sin fecha límite'; }
    const dias = Math.ceil((fecha.getTime() - Date.now()) / 86_400_000);
    if (dias < 0) { return formato === 'corto' ? `-${-dias} d` : `Vencida hace ${-dias} días`; }
    if (dias === 0) { return 'Vence hoy'; }
    if (dias === 1) { return 'Vence mañana'; }
    return formato === 'corto' ? `${dias} d` : `Vence en ${dias} días`;
  }
}
// Un pipe es una clase inyectable: puede recibir dependencias
// (por ejemplo LOCALE_ID o un servicio de traducción) con inject().
// Y se prueba con una línea, sin TestBed:
//   expect(new VencimientoPipe().transform(null)).toBe('Sin fecha límite');

// 1) ACCESO A DATOS. Solo habla HTTP: URLs, cabeceras, tipos del
//    contrato de la API. No sabe nada de estado ni de pantallas.
@Injectable({ providedIn: 'root' })
export class TareasApi {
  private readonly http = inject(HttpClient);
  listar(proyectoId: string) { return this.http.get<TareaDto[]>(`/api/proyectos/${proyectoId}/tareas`); }
  actualizar(id: string, cambios: Partial<TareaDto>) { return this.http.patch<TareaDto>(`/api/tareas/${id}`, cambios); }
}

// 2) REGLAS DE NEGOCIO. Funciones puras sobre el dominio: sin red,
//    sin señales, sin Angular. Es lo más fácil de probar del proyecto.
export function puedeCompletarse(t: Tarea, u: Usuario): boolean {
  return !t.bloqueada && (t.asignadaA === u.id || u.rol === 'gestor');
}

// 3) ESTADO DE LA APLICACIÓN. Mantiene la verdad en memoria y
//    coordina el acceso a datos. Expone señales de solo lectura.
@Injectable({ providedIn: 'root' })
export class TareasStore {
  private readonly api = inject(TareasApi);
  private readonly _tareas = signal<readonly Tarea[]>([]);
  private readonly _cargando = signal(false);

  readonly tareas = this._tareas.asReadonly();
  readonly cargando = this._cargando.asReadonly();
  readonly pendientes = computed(() => this._tareas().filter((t) => !t.completada));

  async alternarCompletada(id: string): Promise<void> { /* … */ }
}

// 4) PRESENTACIÓN. Servicios de interfaz sin dominio: diálogos,
//    notificaciones, formato. Provistos en root y sustituibles.
@Injectable({ providedIn: 'root' })
export class NotificacionesService { mostrar(mensaje: string): void { /* … */ } }

export const rutasTareas: Routes = [
  {
    path: 'proyectos/:id',
    // Estas dos instancias viven mientras el usuario esté en esta
    // sección y se destruyen al navegar fuera. Ideal para el estado
    // de una funcionalidad: no contamina el resto de la aplicación.
    providers: [ProyectoActualStore, BorradorTareaService],
    loadComponent: () => import('./pagina-proyecto.component'),
    children: [/* … los hijos comparten esas instancias … */],
  },
];

// Estado POR COMPONENTE: cada tarjeta expandible tiene su propio
// servicio de edición, con su propio borrador y su propia validación.
@Component({
  selector: 'tf-tarjeta-editable',
  providers: [EdicionTareaService],
  /* … */
})
export class TarjetaEditableComponent {
  // Instancia exclusiva de ESTA tarjeta: si hay veinte tarjetas
  // en pantalla, hay veinte servicios independientes. No hace
  // falta ninguna clave ni ningún mapa por identificador.
  protected readonly edicion = inject(EdicionTareaService);
}

export const configuracionApp: ApplicationConfig = {
  providers: [
    // 1) FORMA ABREVIADA: equivale a { provide: X, useClass: X }.
    TareasStore,

    // 2) useClass · sustituir la implementación de un token.
    //    Es la receta de la inversión de dependencias.
    { provide: TareasApi, useClass: TareasApiHttp },

    // 3) useValue · un valor ya construido: configuración, constantes,
    //    un objeto de un tercero. No se instancia nada.
    { provide: CONFIG_API, useValue: { url: '/api', reintentos: 3 } },

    // 4) useFactory · cuando la construcción requiere lógica.
    //    deps declara qué recibe la función, EN ORDEN.
    {
      provide: ALMACEN_LOCAL,
      useFactory: (plataforma: object) =>
        isPlatformBrowser(plataforma) ? window.localStorage : new AlmacenMemoria(),
      deps: [PLATFORM_ID],
    },
    // Alternativa moderna: dentro de una factory se puede usar
    // inject() directamente y omitir deps. Es más legible y no
    // se desincroniza al añadir dependencias.
    { provide: ALMACEN_LOCAL, useFactory: () => inject(PlataformaService).almacen() },

    // 5) useExisting · un ALIAS: el mismo objeto con dos tokens.
    //    Sirve para exponer una interfaz reducida sin duplicar
    //    la instancia. Con useClass habría DOS instancias.
    { provide: SoloLecturaTareas, useExisting: TareasStore },

    // 6) multi: true · varios proveedores para un mismo token;
    //    inject() devuelve un ARRAY con todos. Es el mecanismo de
    //    los interceptores HTTP y de los validadores de formulario.
    { provide: VALIDADOR_TAREA, useClass: ValidadorTitulo, multi: true },
    { provide: VALIDADOR_TAREA, useClass: ValidadorFecha, multi: true },
  ],
};

import { InjectionToken, inject } from '@angular/core';

// La interfaz es el contrato para TypeScript (no existe al ejecutar).
export interface ConfiguracionTaskFlow {
  readonly urlApi: string;
  readonly tareasPorPagina: number;
  readonly funcionalidades: readonly string[];
}

// El token es el objeto real que sirve de llave. El parámetro de
// tipo es lo que da seguridad de tipos a inject(): el resultado es
// ConfiguracionTaskFlow, no any. La cadena es SOLO para mensajes
// de error legibles; no identifica el token (dos tokens con la
// misma descripción son distintos).
export const CONFIG_TASKFLOW = new InjectionToken<ConfiguracionTaskFlow>(
  'ConfiguracionTaskFlow',
  {
    // factory opcional: valor por defecto. Con esto el token es
    // tree-shakable y NUNCA lanza NullInjectorError, porque si
    // nadie lo provee, se construye con esta función.
    providedIn: 'root',
    factory: () => ({ urlApi: '/api', tareasPorPagina: 25, funcionalidades: [] }),
  },
);

// Uso, con tipado completo y sin aserciones:
//   private readonly config = inject(CONFIG_TASKFLOW);
//   this.config.tareasPorPagina  // number

// ALTERNATIVA a los tokens para contratos: una CLASE ABSTRACTA.
// Existe en tiempo de ejecución (sirve de token) y a la vez define
// el contrato para el compilador. Suele leerse mejor que un token.
export abstract class RelojServicio { abstract ahora(): Date; }
// { provide: RelojServicio, useClass: RelojSistema }
// En pruebas: { provide: RelojServicio, useValue: { ahora: () => new Date('2026-01-01') } }

// CONTEXTO DE INYECCIÓN: los lugares donde inject() es válido.
//  1. El cuerpo del constructor de una clase que Angular instancia.
//  2. Los inicializadores de campo de esa clase.
//  3. La función factory de un provider o de un InjectionToken.
//  4. Dentro de runInInjectionContext().
// FUERA de esos sitios lanza NG0203: inject() must be called from
// an injection context.

@Injectable({ providedIn: 'root' })
export class ExportacionService {
  // (2) inicializador de campo: correcto y es el estilo habitual.
  private readonly http = inject(HttpClient);
  private readonly inyector = inject(Injector);

  ngOnInit(): void {
    // INCORRECTO: un hook del ciclo de vida NO es contexto de
    // inyección. Se ejecuta mucho después de la construcción.
    // const api = inject(TareasApi);  // NG0203
  }

  async exportarTardio(): Promise<void> {
    // (4) Cuando de verdad hace falta inyectar tarde —por ejemplo
    // tras un import() dinámico— se recupera el contexto a partir
    // de un Injector guardado en la construcción.
    const { GeneradorCsv } = await import('./generador-csv');
    runInInjectionContext(this.inyector, () => new GeneradorCsv().generar());
  }
}

// El caso que más confunde: effect() y toSignal() REQUIEREN
// contexto de inyección para saber cuándo destruirse.
//   constructor() { effect(() => …); }        // correcto
//   ngOnInit()    { effect(() => …); }        // NG0203
//   ngOnInit()    { effect(() => …, { injector: this.inyector }); } // válido

@Component({
  selector: 'tf-nodo-arbol',
  // Cada nodo provee su propio servicio de nivel...
  providers: [NivelService],
  template: `<ng-content />`,
})
export class NodoArbolComponent {
  // ...y necesita el del PADRE para calcular su profundidad.
  // Sin skipSelf se inyectaría el suyo propio y la profundidad
  // sería siempre 0. Sin optional, el nodo raíz —que no tiene
  // padre— lanzaría NullInjectorError.
  private readonly padre = inject(NivelService, { skipSelf: true, optional: true });
  private readonly propio = inject(NivelService);

  constructor() {
    this.propio.profundidad = (this.padre?.profundidad ?? -1) + 1;
  }
}

// Equivalencia con los decoradores clásicos de parámetro:
//   constructor(
//     @SkipSelf() @Optional() private padre: NivelService,
//     private propio: NivelService,
//   ) {}
// Existen también @Self() y @Host(), y @Inject(TOKEN) para
// inyectar un token que no es una clase desde el constructor.