feat/multi-select-for-six-checkbox

docs/changelog.md

@@ -27,6 +27,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 ### Added
 
 - Added `hoverContent` prop to `six-tab` to override the default hover content.
+- Added `CheckboxMultiSelectValueAccessor` on Angular which binds checkbox values to an array analog
+  to a multiselect
 
 ## 5.1.0 - 2025-10-23
 

examples/angular/src/app/form/form.html

@@ -58,6 +58,14 @@ <h2>Form Example</h2>
     </six-layout-grid>
   </six-group-label>
 
+  <six-group-label class="column-span-6 checkbox-group" label="Privileges">
+    <six-layout-grid columns="1">
+      <six-checkbox value="read" six-checkbox-group [formControl]="form.controls.privileges">read</six-checkbox>
+      <six-checkbox value="write" six-checkbox-group [formControl]="form.controls.privileges">write</six-checkbox>
+      <six-checkbox value="delete" six-checkbox-group [formControl]="form.controls.privileges">delete</six-checkbox>
+    </six-layout-grid>
+  </six-group-label>
+
   <six-textarea class="column-span-6" label="Description" [formControl]="form.controls.description" />
   <six-checkbox class="column-span-6" [formControl]="form.controls.acceptsTerms"
     >Accept to Terms and Condition</six-checkbox

examples/angular/src/app/form/form.ts

@@ -28,6 +28,7 @@ export class Form {
     iban: ['', Validators.pattern(/[A-Z]{2}\d{2}[A-Z ]+/)],
     age: [null as number | null, Validators.min(18)],
     userGroup: ['user' as UserGroup, Validators.required],
+    privileges: [['read'] as Privilege[]],
     status: ['enabled' as Status | null, Validators.required],
     internal: [false, Validators.requiredTrue],
     date: [null as string | null, [Validators.required]],
@@ -63,3 +64,4 @@ function usernameValidator(control: AbstractControl): ValidationErrors | null {
 type UserGroup = 'admin' | 'developer' | 'user';
 type Status = 'enabled' | 'disabled' | 'temporary';
 type Interest = 'sport' | 'music' | 'movies';
+type Privilege = 'read' | 'write' | 'delete';

libraries/ui-library-angular/src/lib/control-value-accessors/checkbox-multi-select-value-accessor.ts

@@ -0,0 +1,52 @@
+import { Directive, ElementRef, HostListener, Injector, Input } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ValueAccessor } from './value-accessor';
+
+@Directive({
+  selector: '[six-checkbox-group]',
+  standalone: false,
+})
+export class SixCheckboxGroupDirective {}
+
+// Accessor applies only when the SixCheckboxGroupDirective attribute is present
+@Directive({
+  selector: 'six-checkbox[six-checkbox-group]',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: CheckboxMultiSelectValueAccessor,
+      multi: true,
+    },
+  ],
+  standalone: false,
+})
+export class CheckboxMultiSelectValueAccessor<T extends string = string> extends ValueAccessor {
+  @Input({ required: true }) value!: T;
+
+  constructor(injector: Injector, el: ElementRef) {
+    super(injector, el);
+  }
+
+  @HostListener('change', ['$event.target'])
+  onHostChange(el: HTMLSixCheckboxElement) {
+    const checked = el.checked;
+    const current = this.ngControl?.value;
+    if (!current) return;
+
+    const set = new Set<T>(current);
+    checked ? set.add(this.value) : set.delete(this.value);
+
+    this.handleValueChange(el, Array.from(set));
+  }
+
+  override writeValue(values: T[]): void {
+    const arr = Array.isArray(values) ? (values as T[]) : [];
+    const checkbox = this.el.nativeElement as HTMLSixCheckboxElement;
+    checkbox.checked = arr.includes(this.value);
+    this.updateValidation();
+  }
+
+  override setDisabledState(isDisabled: boolean): void {
+    this.el.nativeElement.disabled = isDisabled;
+  }
+}

libraries/ui-library-angular/src/lib/control-value-accessors/checkbox-value-accessor.ts

@@ -3,7 +3,7 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ValueAccessor } from './value-accessor';
 
 @Directive({
-  selector: 'six-checkbox',
+  selector: 'six-checkbox:not([six-checkbox-group])',
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,

libraries/ui-library-angular/src/lib/control-value-accessors/value-accessor.ts

@@ -8,7 +8,7 @@ import { UI_LIBRARY_CONFIG, UiLibraryConfig } from '../ui-library-angular-config
 @Directive()
 export class ValueAccessor implements ControlValueAccessor, AfterViewInit, OnDestroy {
   private statusChanges?: Subscription;
-  private ngControl?: NgControl;
+  public ngControl?: NgControl;
   private initialErrorText?: string;
   private validationMessagesService = inject(ValidationMessagesService);
 

libraries/ui-library-angular/src/lib/ui-library-angular.module.ts

@@ -18,6 +18,10 @@ import {
 } from './validators/six-ui-library-validators';
 import { SelectValueAccessor } from './control-value-accessors/select-value-accessor';
 import { CheckboxValueAccessor } from './control-value-accessors/checkbox-value-accessor';
+import {
+  CheckboxMultiSelectValueAccessor,
+  SixCheckboxGroupDirective,
+} from './control-value-accessors/checkbox-multi-select-value-accessor';
 import { RangeValueAccessor } from './control-value-accessors/range-value-accessor';
 import { SwitchValueAccessor } from './control-value-accessors/switch-value-accessor';
 import { TimepickerValueAccessor } from './control-value-accessors/timepicker-value-accessor';
@@ -45,6 +49,8 @@ import { DEFAULT_UI_LIBRARY_CONFIG, UI_LIBRARY_CONFIG, UiLibraryConfig } from '.
     TimepickerValueAccessor,
     SelectValueAccessor,
     CheckboxValueAccessor,
+    CheckboxMultiSelectValueAccessor,
+    SixCheckboxGroupDirective,
     SwitchValueAccessor,
     RangeValueAccessor,
 
@@ -84,6 +90,8 @@ import { DEFAULT_UI_LIBRARY_CONFIG, UI_LIBRARY_CONFIG, UiLibraryConfig } from '.
     TimepickerValueAccessor,
     SelectValueAccessor,
     CheckboxValueAccessor,
+    CheckboxMultiSelectValueAccessor,
+    SixCheckboxGroupDirective,
     SwitchValueAccessor,
     RangeValueAccessor,
 

libraries/ui-library-angular/src/public-api.ts

@@ -20,6 +20,7 @@ export * from './lib/control-value-accessors/date-value-accessor';
 export * from './lib/control-value-accessors/timepicker-value-accessor';
 export * from './lib/control-value-accessors/select-value-accessor';
 export * from './lib/control-value-accessors/checkbox-value-accessor';
+export * from './lib/control-value-accessors/checkbox-multi-select-value-accessor';
 export * from './lib/control-value-accessors/switch-value-accessor';
 export * from './lib/control-value-accessors/range-value-accessor';