// nk-input.directive.ts — Anbindung von <nk-input> an Angular Signal Forms (paketierung.md §4.2a, Stufe 4d).
// Implementiert FormValueControl, NICHT ControlValueAccessor — niemals beides am selben Element.
// `[field]` aus @angular/forms/signals liest `value` (Model), setzt `disabled`/`readonly`/`required`
// als Inputs und `touched`; das Element meldet seinen Wert selbst per ElementInternals (setFormValue).
// Quelle zum Kopieren — @node-k/ui liefert kein kompiliertes Angular-Paket. Liegt als .ts.txt, weil der
// Design-System-Compiler jede .ts als Komponente zu bündeln versucht; im Zielprojekt als nk-input.directive.ts ablegen.
import { Directive, ElementRef, effect, inject, input, model } from '@angular/core';
import type { FormValueControl } from '@angular/forms/signals';

type NkInputElement = HTMLElement & { value: string; disabled: boolean; readonly: boolean; required: boolean };

@Directive({
  selector: 'nk-input[field]',
  host: { '(input)': 'onInput($event)', '(focusout)': 'touched.set(true)' },
})
export class NkInputDirective implements FormValueControl<string> {
  readonly value = model('');
  readonly disabled = input(false);
  readonly readonly = input(false);
  readonly required = input(false);
  readonly touched = model(false);

  readonly #el = inject<ElementRef<NkInputElement>>(ElementRef).nativeElement;

  constructor() {
    effect(() => { const v = this.value(); if (this.#el.value !== v) this.#el.value = v; });
    effect(() => { this.#el.disabled = this.disabled(); });
    effect(() => { this.#el.readonly = this.readonly(); });
    effect(() => { this.#el.required = this.required(); });
  }

  protected onInput(e: Event) { this.value.set((e.target as NkInputElement).value); }
}
