Range: Fix undefined pinFormatter on initialization (#3367)

libs/designsystem/range/src/range.component.spec.ts

@@ -0,0 +1,25 @@
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+import { TestHelper } from '@kirbydesign/designsystem/testing';
+import { RangeComponent } from './range.component';
+
+describe('RangeComponent', () => {
+  let spectator: SpectatorHost<RangeComponent>;
+
+  const createHost = createHostFactory({
+    component: RangeComponent,
+    imports: [TestHelper.ionicModuleForTest],
+  });
+
+  beforeEach(() => {
+    spectator = createHost('<kirby-range></kirby-range>');
+  });
+
+  it('should create', () => {
+    expect(spectator.component).toBeTruthy();
+  });
+
+  it('should always have a pinFormatter function when pin is set', () => {
+    spectator.setInput('pin', true);
+    expect(spectator.component.pinFormatter).toBeDefined();
+  });
+});

libs/designsystem/range/src/range.component.ts

@@ -38,7 +38,7 @@ export class RangeComponent implements OnChanges, OnInit, ControlValueAccessor {
   @Input() step = 1;
   @Input() ticks: boolean;
   @Input() disabled = false;
-  @Input() pinFormatter: (value: number) => string | number;
+  @Input() pinFormatter: (value: number) => string | number = this.defaultPinFormatter;
   @Input()
   set value(value: number) {
     if (value !== this.currentValue) {
@@ -99,6 +99,10 @@ export class RangeComponent implements OnChanges, OnInit, ControlValueAccessor {
     }
   }
 
+  private defaultPinFormatter(value: number): number {
+    return value;
+  }
+
   public setDisabledState?(isDisabled: boolean): void {
     this.disabled = isDisabled;
   }