fix(components/datetime): timepicker minute picker highlights closest…

… passed time (#2900)

libs/components/datetime/src/lib/modules/timepicker/timepicker.component.html

@@ -77,7 +77,9 @@
               <button
                 name="minute"
                 type="button"
-                [ngClass]="{ 'sky-btn-active': selectedMinute === minute }"
+                [ngClass]="{
+                  'sky-btn-active': highlightMinute(selectedMinute, minute)
+                }"
                 (click)="setTime($event)"
               >
                 {{ '00'.substring(0, 2 - minute.toString().length) + minute }}

libs/components/datetime/src/lib/modules/timepicker/timepicker.component.spec.ts

@@ -620,6 +620,19 @@ describe('Timepicker', () => {
       expect(component.selectedTime?.local).toEqual('2:55 AM');
     }));
 
+    it('should highlight the minute that is the passed multiple of five in the picker', fakeAsync(() => {
+      detectChangesAndTick(fixture);
+      setInput('2:33 AM', fixture);
+      openTimepicker(fixture);
+
+      const timepicker = getTimepicker();
+      const highlightedMinute = timepicker.querySelector(
+        'button[name="minute"].sky-btn-active',
+      );
+
+      expect(highlightedMinute).toHaveText('30');
+    }));
+
     it('should handle undefined date', fakeAsync(() => {
       detectChangesAndTick(fixture);
 

libs/components/datetime/src/lib/modules/timepicker/timepicker.component.ts

@@ -392,6 +392,10 @@ export class SkyTimepickerComponent implements OnInit, OnDestroy {
     this.#openPicker();
   }
 
+  protected highlightMinute(selectedMinute: number, minute: number): boolean {
+    return Math.floor(selectedMinute / 5) === minute / 5;
+  }
+
   #closePicker(): void {
     this.#destroyAffixer();
     this.#destroyOverlay();