Add option for setting selectedIndex in segmentSelect call-back

apps/cookbook/src/app/showcase/segmented-control-showcase/segmented-control-showcase.component.ts

@@ -48,8 +48,8 @@ export class SegmentedControlShowcaseComponent {
     {
       name: 'selectedIndex',
       description:
-        'Gets/sets the index of the selected segment within the `segmentItems` array. The value -1 indicates no element is selected.',
-      defaultValue: 'undefined',
+        'The index of the segment selected within the provided `Items` array. The value -1 means no element selected. Define this parameter as two-way-binding when used for controlling the selection',
+      defaultValue: '-1',
       type: ['number'],
     },
     {

libs/designsystem/src/lib/components/segmented-control/segmented-control.component.spec.ts

@@ -1,5 +1,6 @@
+import { fakeAsync, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+import { createHostFactory, Spectator, SpectatorHost } from '@ngneat/spectator';
 import { MockComponents, MockDirective } from 'ng-mocks';
 
 import { DesignTokenHelper } from '@kirbydesign/core';
@@ -17,7 +18,6 @@ const fatFingerSize = DesignTokenHelper.fatFingerSize;
 
 describe('SegmentedControlComponent', () => {
   let component: SegmentedControlComponent;
-  let onSegmentSelectSpy: jasmine.Spy;
   let items: SegmentItem[] = [
     {
       text: 'First item',
@@ -59,7 +59,6 @@ describe('SegmentedControlComponent', () => {
       }
     );
     component = spectator.component;
-    onSegmentSelectSpy = spyOn(component.segmentSelect, 'emit');
   });
 
   it('should create', () => {
@@ -114,6 +113,7 @@ describe('SegmentedControlComponent', () => {
 
     describe('when updating items', () => {
       it('should not emit segmentSelect event', async () => {
+        const onSegmentSelectSpy = spyOn(component.segmentSelect, 'emit');
         const ionSegmentElement = spectator.queryHost<HTMLIonSegmentElement>('ion-segment');
         await TestHelper.whenReady(ionSegmentElement);
 
@@ -164,6 +164,32 @@ describe('SegmentedControlComponent', () => {
 
         expect(component.value).toBe(items[2]);
       });
+
+      it('should set the correct value when changing the selected-index', () => {
+        spectator.setInput('selectedIndex', 2);
+
+        expect(component.value).toBe(items[2]);
+      });
+
+      it('should invoke the selected-index-change when changing the selected-index', () => {
+        const subscriber = jasmine.createSpy('subcriber');
+        spectator.output('selectedIndexChange').subscribe(subscriber);
+
+        spectator.setInput('selectedIndex', 2);
+
+        expect(subscriber).toHaveBeenCalledTimes(1);
+      });
+
+      it('should set the correct value when changing the selected-index in segment-select call-back', fakeAsync(() => {
+        spectator
+          .output('segmentSelect')
+          .subscribe((value) => spectator.setInput('selectedIndex', 2));
+
+        spectator.dispatchMouseEvent('kirby-chip:first-of-type', 'click');
+        tick();
+
+        expect(component.value).toBe(items[2]);
+      }));
     });
   });
 });

libs/designsystem/src/lib/components/segmented-control/segmented-control.component.ts

@@ -66,13 +66,16 @@ export class SegmentedControlComponent {
     return this._selectedIndex;
   }
 
-  @Input() set selectedIndex(value: number) {
-    if (value !== this._selectedIndex) {
-      this._selectedIndex = value;
+  @Input() set selectedIndex(index: number) {
+    if (index !== this._selectedIndex) {
+      this._selectedIndex = index;
       this._value = this.items[this.selectedIndex];
+      this.selectedIndexChange.emit(this.selectedIndex);
     }
   }
 
+  @Output() selectedIndexChange = new EventEmitter<number>();
+
   private _value: SegmentItem;
   get value(): SegmentItem {
     return this._value;
@@ -102,9 +105,12 @@ export class SegmentedControlComponent {
 
   onSegmentSelect(selectedId: string) {
     const selectedItemIndex = this.items.findIndex((item) => selectedId === item.id);
+
     if (selectedItemIndex !== this.selectedIndex) {
       this.selectedIndex = selectedItemIndex;
-      this.segmentSelect.emit(this.value);
+      setTimeout(() => {
+        this.segmentSelect.emit(this.value);
+      });
     }
   }
 }