fix(components-angular): broken post-card-control value-accessors

.changeset/strong-countries-complain.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components-angular': patch
+---
+
+Fixed broken value-accessors for post-card-control.

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

@@ -2,10 +2,14 @@ import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { defineCustomElements } from '@swisspost/design-system-components/loader';
 
 import { DIRECTIVES } from './stencil-generated';
-import { BooleanValueAccessor } from './stencil-generated/boolean-value-accessor';
-import { PostCardControlValueAccessorDirective } from './custom/value-accessors/post-card-control-radio-value-accessor';
+import { PostCardControlCheckboxValueAccessorDirective } from './custom/value-accessors/post-card-control-checkbox-value-accessor';
+import { PostCardControlRadioValueAccessorDirective } from './custom/value-accessors/post-card-control-radio-value-accessor';
 
-const DECLARATIONS = [...DIRECTIVES, BooleanValueAccessor, PostCardControlValueAccessorDirective];
+const DECLARATIONS = [
+  ...DIRECTIVES,
+  PostCardControlCheckboxValueAccessorDirective,
+  PostCardControlRadioValueAccessorDirective,
+];
 
 @NgModule({
   declarations: DECLARATIONS,

packages/components-angular/projects/components/src/lib/custom/value-accessors/post-card-control-checkbox-value-accessor.ts

@@ -0,0 +1,50 @@
+import { Directive, ElementRef, HostListener } from '@angular/core';
+import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
+
+@Directive({
+  /* eslint-disable-next-line @angular-eslint/directive-selector */
+  selector: 'post-card-control[type="checkbox"]',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: PostCardControlCheckboxValueAccessorDirective,
+      multi: true,
+    },
+  ],
+})
+export class PostCardControlCheckboxValueAccessorDirective implements ControlValueAccessor {
+  private onChange: (value: any) => void = () => {
+    /**/
+  };
+  private onTouched: () => void = () => {
+    /**/
+  };
+  protected lastValue: any;
+
+  constructor(protected el: ElementRef) {}
+
+  writeValue(value: any) {
+    this.el.nativeElement.checked = this.lastValue = value === null ? false : value;
+  }
+
+  @HostListener('postChange', ['$event.detail.state'])
+  handleChangeEvent(value: any) {
+    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/components-angular/projects/components/src/lib/custom/value-accessors/post-card-control-radio-value-accessor.ts

@@ -7,12 +7,12 @@ import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
-      useExisting: PostCardControlValueAccessorDirective,
+      useExisting: PostCardControlRadioValueAccessorDirective,
       multi: true,
     },
   ],
 })
-export class PostCardControlValueAccessorDirective implements ControlValueAccessor {
+export class PostCardControlRadioValueAccessorDirective implements ControlValueAccessor {
   private onChange: (value: any) => void = () => {
     /**/
   };
@@ -28,7 +28,7 @@ export class PostCardControlValueAccessorDirective implements ControlValueAccess
       this.el.nativeElement.value != value ? false : value;
   }
 
-  @HostListener('change', ['$event.detail.value'])
+  @HostListener('postChange', ['$event.detail.value'])
   handleChangeEvent(value: any) {
     this.onChange(value);
   }

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

@@ -9,5 +9,6 @@ export { DIRECTIVES } from './lib/stencil-generated';
 // Export all custom made components & directives!
 // Skipping this step will lead to Angular Ivy errors when building for production.
 
-export { BooleanValueAccessor } from './lib/stencil-generated/boolean-value-accessor';
-export { PostCardControlValueAccessorDirective } from './lib/custom/value-accessors/post-card-control-radio-value-accessor';
+// export { BooleanValueAccessor } from './lib/stencil-generated/boolean-value-accessor';
+export { PostCardControlCheckboxValueAccessorDirective } from './lib/custom/value-accessors/post-card-control-checkbox-value-accessor';
+export { PostCardControlRadioValueAccessorDirective } from './lib/custom/value-accessors/post-card-control-radio-value-accessor';

packages/components-angular/projects/consumer-app/src/app/routes/card-control/card-control.component.html

@@ -46,7 +46,7 @@ <h3>Form Builder Form</h3>
       </div>
 
       <div class="col-4">
-        <legend>Native Checkbox</legend>
+        <legend>Native Radio Group</legend>
         <div *ngFor="let option of radioOptions; index as i" class="form-check">
           <input
             [id]="option"

packages/components/.config/bindings.angular.ts

@@ -2,11 +2,5 @@ import { ValueAccessorConfig } from '@stencil/angular-output-target';
 
 // https://stenciljs.com/docs/v4/angular#valueaccessorconfigs
 export const angularValueAccessorBindings: ValueAccessorConfig[] = [
-  {
-    elementSelectors: ['post-card-control[type="checkbox"]'],
-    event: 'change',
-    targetAttr: 'checked',
-    type: 'boolean',
-  },
-  // a custom post-card-control-value-accessor for post-card-control[type="radio"] has been implemented in the components-angular package
+  // custom post-card-control-value-accessors for post-card-control have been implemented in the components-angular package
 ];