fix(angular): Add legacy support for Angular ValueAccessors

packages/angular-output-target/resources/control-value-accessors-legacy/boolean-value-accessor.ts

@@ -0,0 +1,53 @@
+import { Directive, ElementRef, HostListener } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: '<VALUE_ACCESSOR_SELECTORS>',
+  host: {
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: BooleanValueAccessor,
+      multi: true
+    }
+  ]
+})
+export class BooleanValueAccessor implements ControlValueAccessor {
+
+  private lastValue: any;
+  private onChange: (value: any) => void = () => {/**/};
+  private onTouched: () => void = () => {/**/};
+
+  constructor(protected el: ElementRef) {}
+
+  writeValue(value: any) {
+    this.el.nativeElement.checked = this.lastValue = value == null ? false : value;
+  }
+
+  handleChangeEvent(value: any) {
+    if (value !== this.lastValue) {
+      this.lastValue = value;
+      this.onChange(value);
+    }
+  }
+
+  @HostListener('focusout')
+  _handleBlurEvent() {
+    this.onTouched();
+  }
+
+  registerOnChange(fn: (value: any) => void) {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void) {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean) {
+    this.el.nativeElement.disabled = isDisabled;
+  }
+}

packages/angular-output-target/resources/control-value-accessors-legacy/number-value-accessor.ts

@@ -0,0 +1,55 @@
+import { Directive, ElementRef, HostListener } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: '<VALUE_ACCESSOR_SELECTORS>',
+  host: {
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: NumericValueAccessor,
+      multi: true
+    }
+  ]
+})
+export class NumericValueAccessor implements ControlValueAccessor {
+
+  private lastValue: any;
+  private onChange: (value: any) => void = () => {/**/};
+  private onTouched: () => void = () => {/**/};
+
+  constructor(protected el: ElementRef) {}
+
+  writeValue(value: any) {
+    this.el.nativeElement.value = this.lastValue = value == null ? '' : value;
+  }
+
+  handleChangeEvent(value: any) {
+    if (value !== this.lastValue) {
+      this.lastValue = value;
+      this.onChange(value);
+    }
+  }
+
+  @HostListener('focusout')
+  _handleBlurEvent() {
+    this.onTouched();
+  }
+
+  registerOnChange(fn: (_: number | null) => void) {
+    this.onChange = value => {
+      fn(value === '' ? null : parseFloat(value));
+    };
+  }
+
+  registerOnTouched(fn: () => void) {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean) {
+    this.el.nativeElement.disabled = isDisabled;
+  }
+}

packages/angular-output-target/resources/control-value-accessors-legacy/radio-value-accessor.ts

@@ -0,0 +1,53 @@
+import { Directive, ElementRef, HostListener } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: '<VALUE_ACCESSOR_SELECTORS>',
+  host: {
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: RadioValueAccessor,
+      multi: true
+    }
+  ]
+})
+export class RadioValueAccessor implements ControlValueAccessor {
+
+  private lastValue: any;
+  private onChange: (value: any) => void = () => {/**/};
+  private onTouched: () => void = () => {/**/};
+
+  constructor(protected el: ElementRef) {}
+
+  writeValue(value: any) {
+    this.el.nativeElement.value = this.lastValue = value == null ? '' : value;
+  }
+
+  handleChangeEvent(value: any) {
+    if (value !== this.lastValue) {
+      this.lastValue = value;
+      this.onChange(value);
+    }
+  }
+
+  @HostListener('focusout')
+  _handleBlurEvent() {
+    this.onTouched();
+  }
+
+  registerOnChange(fn: (value: any) => void) {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void) {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean) {
+    this.el.nativeElement.disabled = isDisabled;
+  }
+}

packages/angular-output-target/resources/control-value-accessors-legacy/select-value-accessor.ts

@@ -0,0 +1,53 @@
+import { Directive, ElementRef, HostListener } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: '<VALUE_ACCESSOR_SELECTORS>',
+  host: {
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: SelectValueAccessor,
+      multi: true
+    }
+  ]
+})
+export class SelectValueAccessor implements ControlValueAccessor {
+
+  private lastValue: any;
+  private onChange: (value: any) => void = () => {/**/};
+  private onTouched: () => void = () => {/**/};
+
+  constructor(protected el: ElementRef) {}
+
+  writeValue(value: any) {
+    this.el.nativeElement.value = this.lastValue = value == null ? '' : value;
+  }
+
+  handleChangeEvent(value: any) {
+    if (value !== this.lastValue) {
+      this.lastValue = value;
+      this.onChange(value);
+    }
+  }
+
+  @HostListener('focusout')
+  _handleBlurEvent() {
+    this.onTouched();
+  }
+
+  registerOnChange(fn: (value: any) => void) {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void) {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean) {
+    this.el.nativeElement.disabled = isDisabled;
+  }
+}

packages/angular-output-target/resources/control-value-accessors-legacy/text-value-accessor.ts

@@ -0,0 +1,53 @@
+import { Directive, ElementRef, HostListener } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: '<VALUE_ACCESSOR_SELECTORS>',
+  host: {
+    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: TextValueAccessor,
+      multi: true
+    }
+  ]
+})
+export class TextValueAccessor implements ControlValueAccessor {
+
+  private lastValue: any;
+  private onChange: (value: any) => void = () => {/**/};
+  private onTouched: () => void = () => {/**/};
+
+  constructor(protected el: ElementRef) {}
+
+  writeValue(value: any) {
+    this.el.nativeElement.value = this.lastValue = value == null ? '' : value;
+  }
+
+  handleChangeEvent(value: any) {
+    if (value !== this.lastValue) {
+      this.lastValue = value;
+      this.onChange(value);
+    }
+  }
+
+  @HostListener('focusout')
+  _handleBlurEvent() {
+    this.onTouched();
+  }
+
+  registerOnChange(fn: (value: any) => void) {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void) {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean) {
+    this.el.nativeElement.disabled = isDisabled;
+  }
+}

packages/angular-output-target/resources/control-value-accessors/value-accessor.ts

@@ -1,12 +1,13 @@
 import { Directive, ElementRef, HostListener } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
-@Directive({})
+@Directive()
 export class ValueAccessor implements ControlValueAccessor {
 
+  protected lastValue: any;
+
   private onChange: (value: any) => void = () => {/**/};
   private onTouched: () => void = () => {/**/};
-  protected lastValue: any;
 
   constructor(protected el: ElementRef) {}
 
@@ -29,6 +30,7 @@ export class ValueAccessor implements ControlValueAccessor {
   registerOnChange(fn: (value: any) => void) {
     this.onChange = fn;
   }
+
   registerOnTouched(fn: () => void) {
     this.onTouched = fn;
   }

packages/angular-output-target/src/generate-value-accessors.ts

@@ -25,6 +25,10 @@ export default async function generateValueAccessors(
     return;
   }
 
+  const sourcePath =
+    outputTarget.legacyValueAccessors !== true
+      ? '../resources/control-value-accessors/'
+      : '../resources/control-value-accessors-legacy/';
   const targetDir = path.dirname(outputTarget.directivesProxyFile);
 
   const normalizedValueAccessors: NormalizedValueAccessors = outputTarget.valueAccessorConfigs.reduce(
@@ -56,11 +60,7 @@ export default async function generateValueAccessors(
       const valueAccessorType = type as ValueAccessorTypes; // Object.keys converts to string
       const targetFileName = `${type}-value-accessor.ts`;
       const targetFilePath = path.join(targetDir, targetFileName);
-      const srcFilePath = path.join(
-        __dirname,
-        '../resources/control-value-accessors/',
-        targetFileName,
-      );
+      const srcFilePath = path.join(__dirname, sourcePath, targetFileName);
       const srcFileContents = await compilerCtx.fs.readFile(srcFilePath);
 
       const finalText = createValueAccessor(
@@ -71,7 +71,9 @@ export default async function generateValueAccessors(
     }),
   );
 
-  await copyResources(config, ['value-accessor.ts'], targetDir);
+  if (outputTarget.legacyValueAccessors !== true) {
+    await copyResources(config, ['value-accessor.ts'], targetDir);
+  }
 }
 
 export function createValueAccessor(srcFileContents: string, valueAccessor: ValueAccessor) {

packages/angular-output-target/src/types.ts

@@ -4,6 +4,7 @@ export interface OutputTargetAngular {
   directivesArrayFile?: string;
   directivesUtilsFile?: string;
   valueAccessorConfigs?: ValueAccessorConfig[];
+  legacyValueAccessors?: boolean;
   excludeComponents?: string[];
 }