Angular output target generates incorrect event handler for custom events in value accessor

[buthbence]

Bug Summary

The Angular output target generates incorrect event handlers for custom events in value accessors. It uses $event.target.value instead of $event.detail for StencilJS custom events, causing the value accessor to not work properly with Angular reactive forms.

Expected Behavior

When configuring a value accessor for a custom StencilJS component that emits custom events, the generated Angular directive should correctly extract the value from $event.detail (where StencilJS places custom event data).

Actual Behavior

The generated Angular directive uses $event.target.value in the event handler, which works for native HTML events but not for StencilJS custom events.

Reproduction Steps

Create a StencilJS component that emits a custom event:

@Event() valueChange: EventEmitter<string>;
// ...
this.valueChange.emit(newValue);

Configure the Angular output target with a value accessor:

const angularValueAccessorBindings: ValueAccessorConfig[] = [
  {
    elementSelectors: ['my-input'],
    event: 'valueChange',
    targetAttr: 'value',
    type: 'text'
  }
];

The generated directive incorrectly uses:

host: {
  '(valueChange)': 'handleChangeEvent($event.target.value)' // Incorrect
}

Should generate:

host: {
  '(valueChange)': 'handleChangeEvent($event.detail)' // Correct
}

Environment

Stencil Version: 4.29.3
Angular Output Target Version: 0.10.2
Node Version: v20.15.0

Suggested Solution

The Angular output target should detect when the event is a custom StencilJS event and generate the appropriate event handler using $event.detail. Alternatively, add a configuration option like eventTargetProperty to the ValueAccessorConfig interface to allow developers to specify how to extract the value from the event.