Toggle Button: respect disabled state of slotted buttons

apps/cookbook/src/app/examples/toggle-button-example/toggle-button-example.component.ts

@@ -15,6 +15,11 @@ const config = {
 <kirby-toggle-button [checked]="true" (checkChanged)="onCheckChanged($event)">
   <button kirby-button unchecked attentionLevel="3">Deactivated</button>
   <button kirby-button checked themeColor="danger">Activated</button>
+</kirby-toggle-button>
+
+<kirby-toggle-button (checkChanged)="onCheckChanged($event)">
+  <button kirby-button unchecked disabled attentionLevel="3">Disabled</button>
+  <button kirby-button checked >Activated</button>
 </kirby-toggle-button>`,
 };
 

libs/designsystem/toggle-button/src/toggle-button.component.html

@@ -1,6 +1,2 @@
-<ng-container *ngIf="!checked">
-  <ng-content select="button[kirby-button][unchecked]"></ng-content>
-</ng-container>
-<ng-container *ngIf="checked">
-  <ng-content select="button[kirby-button][checked]"></ng-content>
-</ng-container>
+<ng-content *ngIf="!checked" select="button[kirby-button][unchecked]"></ng-content>
+<ng-content *ngIf="checked" select="button[kirby-button][checked]"></ng-content>

libs/designsystem/toggle-button/src/toggle-button.component.spec.ts

@@ -1,23 +1,63 @@
-import { createComponentFactory, Spectator } from '@ngneat/spectator';
-import { first } from 'rxjs/operators';
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
 
+import { ButtonComponent } from '@kirbydesign/designsystem/button';
 import { ToggleButtonComponent } from './toggle-button.component';
 
 describe('ToggleButtonComponent', () => {
-  let spectator: Spectator<ToggleButtonComponent>;
-  const createComponent = createComponentFactory(ToggleButtonComponent);
+  let spectator: SpectatorHost<ToggleButtonComponent>;
+  const createHost = createHostFactory({
+    component: ToggleButtonComponent,
+    imports: [ButtonComponent],
+  });
+
+  describe('by default', () => {
+    beforeEach(() => {
+      spectator = createHost(`<kirby-toggle-button>
+        <button kirby-button unchecked>Unchecked</button>
+        <button kirby-button checked>Checked</button>
+      </kirby-toggle-button>`);
+    });
+    it('should toggle checked state on click', () => {
+      spectator.component.checked = false;
+
+      spectator.click('button');
+
+      expect(spectator.component.checked).toBe(true);
+    });
+
+    it('should emit checkChanged event on click', () => {
+      let checkChangedCalled;
+      spectator.output('checkChanged').subscribe((result) => (checkChangedCalled = result));
+
+      spectator.click('button');
 
-  beforeEach(() => (spectator = createComponent()));
+      expect(checkChangedCalled).toBe(true);
+    });
+  });
+
+  describe('when nested button is disabled', () => {
+    beforeEach(() => {
+      spectator = createHost(`<kirby-toggle-button>
+        <button kirby-button unchecked [disabled]="true">Unchecked</button>
+        <button kirby-button checked [disabled]="true">Checked</button>
+      </kirby-toggle-button>`);
+    });
 
-  it('should toggle checked state on click', (done) => {
-    spectator.component.checked = true;
-    spectator.component.checkChanged.pipe(first()).subscribe((check) => {
-      expect(check).toBe(false);
-      done();
+    it('should not emit change-event on click', () => {
+      let checkChangedCalled;
+      spectator.output('checkChanged').subscribe((result) => (checkChangedCalled = result));
+
+      spectator.click('button');
+
+      expect(checkChangedCalled).toBe(undefined);
     });
 
-    spectator.component.onClick();
+    it('should not toggle checked state on click', () => {
+      spectator.component.checked = true;
 
-    expect(spectator.component.checked).toBe(false);
+      spectator.click('button');
+
+      expect(spectator.component.checked).toBe(true);
+    });
   });
 });

libs/designsystem/toggle-button/src/toggle-button.component.ts

@@ -16,8 +16,13 @@ export class ToggleButtonComponent {
   @Input() checked: boolean;
   @Output() checkChanged = new EventEmitter<boolean>();
 
-  @HostListener('click')
-  onClick() {
+  @HostListener('click', ['$event'])
+  onClick(event: PointerEvent) {
+    const targetElement = event.target as HTMLElement;
+    const buttonEnabled = targetElement.closest('button[kirby-button]:not(:disabled)');
+
+    if (!buttonEnabled) return;
+
     this.checked = !this.checked;
     this.checkChanged.emit(this.checked);
   }