feat(tegel-angular): reactive forms integration

packages/angular-17/projects/components/src/lib/components.module.ts

@@ -1,10 +1,29 @@
 import { APP_INITIALIZER, NgModule } from '@angular/core';
-import { DIRECTIVES } from './stencil-generated';
 import { defineCustomElements } from '@scania/tegel/loader';
+import { DIRECTIVES } from './stencil-generated';
+import { TextValueAccessor } from './stencil-generated/text-value-accessor';
+import { BooleanValueAccessor } from './stencil-generated/boolean-value-accessor';
+import { NumericValueAccessor } from './stencil-generated/number-value-accessor';
+import { TdsRadioValueAccessor } from './directives/tds-radio-value-accessor';
+import { TdsDropdownValueAccessor } from './directives/tds-dropdown-value-accessor';
 
 @NgModule({
-  declarations: [...DIRECTIVES],
-  exports: [...DIRECTIVES],
+  declarations: [
+    ...DIRECTIVES,
+    BooleanValueAccessor,
+    NumericValueAccessor,
+    TextValueAccessor,
+    TdsRadioValueAccessor,
+    TdsDropdownValueAccessor,
+  ],
+  exports: [
+    ...DIRECTIVES,
+    BooleanValueAccessor,
+    NumericValueAccessor,
+    TextValueAccessor,
+    TdsRadioValueAccessor,
+    TdsDropdownValueAccessor,
+  ],
   providers: [
     {
       provide: APP_INITIALIZER,

packages/angular-17/projects/components/src/lib/directives/tds-dropdown-value-accessor.ts

@@ -0,0 +1,24 @@
+import { Directive } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { ValueAccessor } from '../stencil-generated/value-accessor';
+
+/**
+ * A custom value accessor for the tds-dropdown. It extends the default ValueAccessor that is auto-generated by Stencil
+ * The tds-dropdown requires slightly different event handling since it doesn't act like any of the native inputs.
+ * The main difference between this value accessor and the other value accessors that are auto-generated by Stencil, is that this one handles `$event.detail.value` instead of `$event.target.value`.
+ */
+@Directive({
+  selector: 'tds-dropdown',
+  host: {
+    '(tdsChange)': 'handleChangeEvent($event.detail.value)',
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: TdsDropdownValueAccessor,
+      multi: true,
+    },
+  ],
+})
+export class TdsDropdownValueAccessor extends ValueAccessor {}

packages/angular-17/projects/components/src/lib/directives/tds-radio-value-accessor.ts

@@ -0,0 +1,29 @@
+import { Directive } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { ValueAccessor } from '../stencil-generated/value-accessor';
+/**
+ * A custom value accessor for the tds-radio-button and tds-chip of type radio. It extends the default ValueAccessor that is auto-generated by Stencil
+ * Stencil offers an autogenerated radio value accessor but does not currently work as expected.
+ * An issue was submitted to their repository: /~https://github.com/ionic-team/stencil-ds-output-targets/issues/434
+ * If the issue is ever fixed this value accessor can be replaced with the one auto-generated by Stencil.
+ */
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: 'tds-radio-button, tds-chip[type="radio"]',
+  host: {
+    '(tdsChange)': 'handleChangeEvent($event.target.value)',
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: TdsRadioValueAccessor,
+      multi: true,
+    },
+  ],
+})
+export class TdsRadioValueAccessor extends ValueAccessor {
+  writeValue(value: any) {
+    this.el.nativeElement.checked = value === this.el.nativeElement.value;
+  }
+}

packages/angular-17/projects/components/src/public-api.ts

@@ -4,4 +4,9 @@
 
 export * from './lib/components.module';
 export { DIRECTIVES } from './lib/stencil-generated';
+export { TextValueAccessor } from './lib/stencil-generated/text-value-accessor';
+export { BooleanValueAccessor } from './lib/stencil-generated/boolean-value-accessor';
+export { NumericValueAccessor } from './lib/stencil-generated/number-value-accessor';
+export { TdsRadioValueAccessor } from './lib/directives/tds-radio-value-accessor';
+export { TdsDropdownValueAccessor } from './lib/directives/tds-dropdown-value-accessor';
 export * from './lib/stencil-generated/components';

packages/angular-17/tsconfig.json

@@ -9,7 +9,7 @@
     },
     "outDir": "./dist/out-tsc",
     "strict": true,
-    "noImplicitOverride": true,
+    "noImplicitOverride": false,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,

packages/angular/projects/components/src/lib/components.module.ts

@@ -1,10 +1,29 @@
 import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { DIRECTIVES } from './stencil-generated';
 import { defineCustomElements } from '@scania/tegel/loader';
+import { TextValueAccessor } from './stencil-generated/text-value-accessor';
+import { BooleanValueAccessor } from './stencil-generated/boolean-value-accessor';
+import { NumericValueAccessor } from './stencil-generated/number-value-accessor';
+import { TdsRadioValueAccessor } from './directives/tds-radio-value-accessor';
+import { TdsDropdownValueAccessor } from './directives/tds-dropdown-value-accessor';
 
 @NgModule({
-  declarations: [...DIRECTIVES],
-  exports: [...DIRECTIVES],
+  declarations: [
+    ...DIRECTIVES,
+    BooleanValueAccessor,
+    NumericValueAccessor,
+    TextValueAccessor,
+    TdsRadioValueAccessor,
+    TdsDropdownValueAccessor,
+  ],
+  exports: [
+    ...DIRECTIVES,
+    BooleanValueAccessor,
+    NumericValueAccessor,
+    TextValueAccessor,
+    TdsRadioValueAccessor,
+    TdsDropdownValueAccessor,
+  ],
   providers: [
     {
       provide: APP_INITIALIZER,

packages/angular/projects/components/src/lib/directives/tds-dropdown-value-accessor.ts

@@ -0,0 +1,24 @@
+import { Directive } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { ValueAccessor } from '../stencil-generated/value-accessor';
+
+/**
+ * A custom value accessor for the tds-dropdown. It extends the default ValueAccessor that is auto-generated by Stencil
+ * The tds-dropdown requires slightly different event handling since it doesn't act like any of the native inputs.
+ * The main difference between this value accessor and the other value accessors that are auto-generated by Stencil, is that this one handles `$event.detail.value` instead of `$event.target.value`.
+ */
+@Directive({
+  selector: 'tds-dropdown',
+  host: {
+    '(tdsChange)': 'handleChangeEvent($event.detail.value)',
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: TdsDropdownValueAccessor,
+      multi: true,
+    },
+  ],
+})
+export class TdsDropdownValueAccessor extends ValueAccessor {}

packages/angular/projects/components/src/lib/directives/tds-radio-value-accessor.ts

@@ -0,0 +1,29 @@
+import { Directive } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { ValueAccessor } from '../stencil-generated/value-accessor';
+/**
+ * A custom value accessor for the tds-radio-button and tds-chip of type radio. It extends the default ValueAccessor that is auto-generated by Stencil
+ * Stencil offers an autogenerated radio value accessor but does not currently work as expected.
+ * An issue was submitted to their repository: /~https://github.com/ionic-team/stencil-ds-output-targets/issues/434
+ * If the issue is ever fixed this value accessor can be replaced with the one auto-generated by Stencil.
+ */
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: 'tds-radio-button, tds-chip[type="radio"]',
+  host: {
+    '(tdsChange)': 'handleChangeEvent($event.target.value)',
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: TdsRadioValueAccessor,
+      multi: true,
+    },
+  ],
+})
+export class TdsRadioValueAccessor extends ValueAccessor {
+  writeValue(value: any) {
+    this.el.nativeElement.checked = value === this.el.nativeElement.value;
+  }
+}

packages/angular/projects/components/src/public-api.ts

@@ -4,4 +4,9 @@
 
 export * from './lib/components.module';
 export { DIRECTIVES } from './lib/stencil-generated';
+export { TextValueAccessor } from './lib/stencil-generated/text-value-accessor';
+export { BooleanValueAccessor } from './lib/stencil-generated/boolean-value-accessor';
+export { NumericValueAccessor } from './lib/stencil-generated/number-value-accessor';
+export { TdsRadioValueAccessor } from './lib/directives/tds-radio-value-accessor';
+export { TdsDropdownValueAccessor } from './lib/directives/tds-dropdown-value-accessor';
 export * from './lib/stencil-generated/components';

packages/angular/tsconfig.json

@@ -11,7 +11,7 @@
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
     "strict": true,
-    "noImplicitOverride": true,
+    "noImplicitOverride": false,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,

packages/core/src/components/text-field/text-field.tsx

@@ -95,8 +95,8 @@ export class TdsTextField {
 
   // Data input event in value prop
   handleInput(event): void {
-    this.tdsInput.emit(event);
     this.value = event.target.value;
+    this.tdsInput.emit(event);
   }
 
   /** Focus event for the Text Field */

packages/core/src/components/textarea/textarea.tsx

@@ -96,8 +96,8 @@ export class TdsTextarea {
 
   // Data input event in value prop
   handleInput(event): void {
-    this.tdsInput.emit(event);
     this.value = event.target.value;
+    this.tdsInput.emit(event);
   }
 
   /** Focus event for the Textarea */

packages/core/stencil.config.ts

@@ -12,26 +12,20 @@ function getTsConfigFile() {
 
 const angularValueAccessorBindings: ValueAccessorConfig[] = [
   {
-    elementSelectors: ['tds-radio-button'],
+    elementSelectors: ['tds-checkbox', 'tds-chip[type="checkbox"]'],
     event: 'tdsChange',
-    targetAttr: 'value',
-    type: 'radio',
-  },
-  {
-    elementSelectors: ['tds-checkbox'],
-    event: 'tdsChange',
-    targetAttr: 'value',
+    targetAttr: 'checked',
     type: 'boolean',
   },
   {
-    elementSelectors: ['tds-text-field', 'tds-textarea'],
-    event: 'tdsChange',
-    targetAttr: 'value',
-    type: 'text',
+    elementSelectors: ['tds-toggle'],
+    event: 'tdsToggle',
+    targetAttr: 'checked',
+    type: 'boolean',
   },
   {
-    elementSelectors: ['tds-dropdown'],
-    event: 'tdsChange',
+    elementSelectors: ['tds-text-field', 'tds-textarea', 'tds-datetime'],
+    event: 'tdsInput',
     targetAttr: 'value',
     type: 'text',
   },
@@ -41,18 +35,13 @@ const angularValueAccessorBindings: ValueAccessorConfig[] = [
     targetAttr: 'value',
     type: 'number',
   },
-  {
-    elementSelectors: ['tds-chip'],
-    event: 'tdsChange',
-    targetAttr: 'value',
-    type: 'radio',
-  },
-  {
-    elementSelectors: ['tds-chip'],
-    event: 'tdsChange',
-    targetAttr: 'value',
-    type: 'boolean',
-  },
+  /*
+   * tds-dropdown does not need to be configured in this array, since it has to use a custom directive that is defined in the angular package
+   */
+  /* The radio value accessor generated by stencil does not currently behave as expected.
+   * tds-radio-button uses a custom value accessor defined in the angular package
+   * /~https://github.com/ionic-team/stencil-ds-output-targets/issues/434
+   */
 ];
 
 export const config: Config = {