feat(forms): update interface and add example implementation

Author: Char2sGu

packages/forms/src/value-accessing/accessor-host.ts

@@ -0,0 +1,39 @@
+import {
+  Directive,
+  EventEmitter,
+  Injectable,
+  Input,
+  Output,
+} from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { merge, Subject, SubjectLike, Subscribable } from 'rxjs';
+
+@Injectable()
+export abstract class ComponentValueAccessorHost<T = any> {
+  abstract valueInput$: SubjectLike<T>;
+  abstract valueChange$: Subscribable<T>;
+  abstract disabled$: SubjectLike<boolean>;
+  abstract touched$: Subscribable<void>;
+}
+
+@Directive()
+export class SimpleComponentValueAccessorHost<T>
+  implements ComponentValueAccessorHost<T>
+{
+  // prettier-ignore
+  @Input('value') set valueInput(v: T) { this.valueInput$.next(v) }
+  valueInput$ = new Subject<T>();
+
+  @Output('valueChange')
+  valueChange$ = new EventEmitter<T>();
+
+  // prettier-ignore
+  @Input('disabled') set disabledInput(v: boolean) { this.disabled$.next(v) }
+  disabled$ = new Subject<boolean>();
+
+  @Output('touched')
+  touched$ = new EventEmitter<void>();
+
+  value = toSignal(merge(this.valueInput$, this.valueChange$));
+  disabled = toSignal(this.disabled$);
+}

packages/forms/src/value-accessing/accessor.ts

@@ -1,7 +1,7 @@
 import { inject, Injectable } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
-import { ComponentValueAccessorHost } from './host';
+import { ComponentValueAccessorHost } from './accessor-host';
 
 @Injectable()
 export class ComponentValueAccessor implements ControlValueAccessor {
@@ -16,6 +16,6 @@ export class ComponentValueAccessor implements ControlValueAccessor {
     this.host.touched$.subscribe({ next: fn });
   }
   setDisabledState(disabled: boolean): void {
-    this.host.disabled$?.next(disabled);
+    this.host.disabled$.next(disabled);
   }
 }

packages/forms/src/value-accessing/host.ts

@@ -1,3 +1,3 @@
 export * from './accessor';
-export * from './host';
+export * from './accessor-host';
 export * from './provide';

packages/forms/src/value-accessing/index.ts

@@ -3,7 +3,7 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { provide, provideMulti } from '@angularity/core';
 
 import { ComponentValueAccessor } from './accessor';
-import { ComponentValueAccessorHost } from './host';
+import { ComponentValueAccessorHost } from './accessor-host';
 
 export function provideComponentValueAccessor(
   host: ProviderToken<ComponentValueAccessorHost>,