Issue #SB-23817 feat: Timer input user experience

projects/common-form-elements/src/lib/dynamic-form/dynamic-form.component.ts

@@ -356,12 +356,12 @@ export class DynamicFormComponent implements OnInit, OnChanges, OnDestroy  {
 
   validateMaxTime(maxTimeValue, field, control: AbstractControl): ValidationErrors | null {
     if (control.value && maxTimeValue) {
-      const maxTimeInputTimeArray = control.value.split(':');
-      const maxTimeAllowedArray = maxTimeValue.split(':');
-      const maxTimeAllowedInSeconds = (_.parseInt(maxTimeAllowedArray[0]) * 3600) +
-      (_.parseInt(maxTimeAllowedArray[1]) * 60);
-      const maxTimeInputInSeconds = (_.parseInt(maxTimeInputTimeArray[0]) * 3600) +
-      (_.parseInt(maxTimeInputTimeArray[1]) * 60);
+      const maxTimeInputTime = control.value.split(':');
+      const maxTimeAllowed = maxTimeValue.split(':');
+      const maxTimeAllowedInSeconds = (_.parseInt(maxTimeAllowed[0]) * 3600) +
+      (_.parseInt(maxTimeAllowed[1]) * 60);
+      const maxTimeInputInSeconds = (_.parseInt(maxTimeInputTime[0]) * 3600) +
+      (_.parseInt(maxTimeInputTime[1]) * 60);
       if (maxTimeInputInSeconds > maxTimeAllowedInSeconds) {
         return { maxtimevalue: true };
       }

projects/common-form-elements/src/lib/dynamic-timer/dynamic-timer.component.html

@@ -22,8 +22,8 @@
       <div>
         <input class="p-10 mr-20" list="hours" #hourField name="hour" id="hour" maxlength="2"
         placeholder="{{placeholders[0]}}"
-        (change)="onChangeTimer(field, 'hr', $event.target.value)"
-        (keyup)="onChangeTimer(field, 'hr', $event.target.value);"
+        (change)="onChangeTimer('hr', $event.target.value)"
+        (keyup)="onChangeTimer('hr', $event.target.value);"
         (focusout)="onFocusOutEvent('hr', $event.target.value)"
         [attr.disabled]="disabled ? true : ( depends ? (isDependsInvalid ? true : null) : null )">
         <datalist id="hours">
@@ -33,8 +33,8 @@
       <div>
         <input class="p-10 mr-20" list="minutes" #minField name="minute" id="minute" maxlength="2"
         placeholder="{{placeholders[1]}}"
-        (change)="onChangeTimer(field, 'min', $event.target.value)"
-        (keyup)="onChangeTimer(field, 'min', $event.target.value)"
+        (change)="onChangeTimer('min', $event.target.value)"
+        (keyup)="onChangeTimer('min', $event.target.value)"
         (focusout)="onFocusOutEvent('min', $event.target.value)"
         [attr.disabled]="disabled ? true : ( depends ? (isDependsInvalid ? true : null) : null )">
         <datalist id="minutes">

projects/common-form-elements/src/lib/dynamic-timer/dynamic-timer.component.ts

@@ -228,7 +228,7 @@ export class DynamicTimerComponent implements OnInit, OnDestroy {
     }
   }
 
-  onChangeTimer(field, fieldType, value) {
+  onChangeTimer(fieldType, value) {
     if (fieldType === 'hr') {
       const numericValue = value.replace(/[^0-9]/g, '');
       this.defaultHr = numericValue;