carriera-intern 0.0.0

package/projects/carriera-intern-components/src/app/components/input-datetime-picker/cai-input-datetime-picker.component.ts

@@ -0,0 +1,1559 @@
+import {
+  AfterViewInit,
+  Component,
+  computed,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  Output,
+  Self,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  FormsModule,
+  NgControl,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+// Imports
+import moment from 'moment';
+import { NgbModule, NgbPopover, NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
+import { Subject, takeUntil } from 'rxjs';
+import { AngularSvgIconModule } from 'angular-svg-icon';
+
+// Pipes
+import { ErrorMessagePipe } from '../input/pipes/error-message.pipe';
+
+// Components
+import { CaCustomDatetimePickersComponent } from './components/cai-custom-datetime-pickers/cai-custom-datetime-pickers.component';
+
+// Enums
+import { InputConfigNameStringEnum } from './enums/input-config-name-string.enum';
+import { eGeneralActions } from '../../enums/general-actions.enum';
+
+// Services
+import { CalendarDateTimePickerService } from './components/cai-custom-datetime-pickers/services/calendar-datetime-picker.service';
+
+// Models
+import { CaiDateTimeConfig } from './interfaces/input-datetime.interface';
+import { KeyboardNavigationHelper } from '../input/utilities/helpers/keyboard-navigation.helper';
+
+// Types
+export type InputChangeValue = string | number | Date;
+
+@Component({
+  selector: 'cai-input-datetime-picker',
+  templateUrl: './cai-input-datetime-picker.component.html',
+  styleUrls: ['./cai-input-datetime-picker.component.scss'],
+  imports: [
+    // modules
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    AngularSvgIconModule,
+    NgbModule,
+    // components
+    CaCustomDatetimePickersComponent,
+    // pipes
+    ErrorMessagePipe,
+  ],
+  providers: [CalendarDateTimePickerService],
+})
+export class CaiInputDatetimePickerComponent
+  implements AfterViewInit, ControlValueAccessor, OnDestroy
+{
+  @Input() id: string = '';
+  @Input() inputConfig!: CaiDateTimeConfig;
+  @Input() formFormat?: string;
+
+  @Output('clear') clearInputEvent: EventEmitter<boolean> =
+    new EventEmitter<boolean>();
+  @Output('blurInput') blurInputEvent: EventEmitter<boolean> =
+    new EventEmitter<boolean>();
+
+  @ViewChild('dateTimePopover') dateTimePopover!: NgbPopover;
+  @ViewChild('t2') t2!: NgbPopover;
+
+  public showDateInput: boolean = false;
+  public dateTimeInputDate: Date = new Date();
+  public dateTimeIntDate: Date = new Date();
+  public selectionInput: number = -1;
+
+  // Timers
+  private dateTimeMainTimer!: ReturnType<typeof setTimeout> | number;
+  private focusBlur!: ReturnType<typeof setTimeout> | number;
+  private timeoutCleaner!: ReturnType<typeof setTimeout> | number;
+
+  private justEnteredDatePicker: boolean = false;
+
+  // Component properties
+  public eGeneralActions = eGeneralActions;
+  public isTouchedInput: boolean = false;
+  public isFocusInput: boolean = false;
+  public preventBlur: boolean = false;
+  public valueAfterWriteValue!: string;
+  // Date
+  public newInputChanged: boolean = false;
+
+  public isDisabled = computed(
+    () => this.inputConfig.isDisabled || this.getSuperControl?.disabled,
+  );
+
+  // Outputs
+  @Output() selectLastOneForSelectionEmitter = new EventEmitter<boolean>();
+  @Output() selectLastOneAfterMouseUpEmitter = new EventEmitter<boolean>();
+  @Output() onDatePasteEmitter = new EventEmitter<ClipboardEvent>();
+  @Output() onFocusEmitter = new EventEmitter<FocusEvent>();
+  @Output() changeSelectionEmmiter = new EventEmitter<{
+    e: KeyboardEvent;
+    noPreventDefault: boolean;
+  }>();
+  @Output() setSelectionEmmiter = new EventEmitter<{
+    preventDefault: () => void;
+    stopPropagation: () => void;
+    target: any;
+  }>();
+
+  // View Children
+  @ViewChild('span1', { static: true }) span1!: ElementRef;
+  @ViewChild('span2', { static: true }) span2!: ElementRef;
+  @ViewChild('span3', { static: true }) span3!: ElementRef;
+  @ViewChild('holder1', { static: true }) holder1!: ElementRef;
+  @ViewChild('closeTooltip') closeTooltip!: NgbTooltip;
+
+  // Private
+  private destroy$: Subject<void> = new Subject<void>();
+
+  constructor(
+    @Self() public superControl: NgControl,
+    private calendarService: CalendarDateTimePickerService,
+  ) {
+    this.superControl.valueAccessor = this;
+  }
+
+  ngOnInit(): void {}
+
+  // Control Value Accessor
+  public registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  public isPopoverShown: boolean = false;
+
+  public onChange(_: InputChangeValue): void {}
+
+  public onTouched = (): void => {};
+
+  public writeValue(obj: InputChangeValue): void {
+    if (obj) this.setTimeDateInput(obj, true);
+  }
+
+  public registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  public blurInput(): void {
+    this.isFocusInput = false;
+    this.isPopoverShown = false;
+    this.t2.close();
+    this.onTouched();
+    this.blurInputEvent.emit(true);
+    // Datepicker
+    this.focusBlur = setTimeout(() => {
+      this.blurOnDateTime();
+    }, 0);
+  }
+
+  public preventInput(event: Event): void {
+    // Prevent any text from appearing in the contenteditable div
+    event.preventDefault();
+    // Clear any content that might have been added
+    if (this.holder1?.nativeElement) {
+      this.holder1.nativeElement.textContent = '';
+    }
+  }
+
+  public ngAfterViewInit(): void {
+    if (this.valueAfterWriteValue) {
+      this.setTimeDateInput(this.valueAfterWriteValue);
+    } else {
+      this.setTimePickerTime();
+    }
+
+    this.calendarService.dateChanged
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((date) => {
+        if (!this.inputConfig.isDisabled) {
+          this.setTimeDateInput(date);
+          this.t2.close();
+        }
+      });
+  }
+
+  get getSuperControl() {
+    return this.superControl.control;
+  }
+
+  get isRequired() {
+    return this.getSuperControl?.hasValidator(Validators.required);
+  }
+
+  // 05/05/2025
+  public onDatePaste(event: ClipboardEvent): void {
+    event.preventDefault();
+
+    const pasteText = event.clipboardData?.getData('text')?.trim() as string;
+    this.processPastedDate(pasteText);
+  }
+
+  private processPastedDate(pasteText: string): void {
+    // Only process if it's a date picker (not time picker)
+    if (
+      this.inputConfig.name !== InputConfigNameStringEnum.DATE_PICKER &&
+      this.inputConfig.name !==
+        InputConfigNameStringEnum.DATE_PICKER_BANK_CARD &&
+      this.isFocusInput
+    ) {
+      return;
+    }
+
+    // Try to parse mm/dd/yy format first
+    const mmddyyRegex = /^(\d{1,2})\/(\d{1,2})\/(\d{2,4})$/;
+    const match = pasteText.match(mmddyyRegex);
+
+    if (match) {
+      const [_, month, day, year] = match;
+
+      // Convert 2-digit year to 4-digit year
+      let fullYear = parseInt(year);
+      if (year.length === 2) {
+        // Years 00-31 are 2000-2031, years 32-99 are 1932-1999
+        fullYear =
+          parseInt(year) > 31 ? 1900 + parseInt(year) : 2000 + parseInt(year);
+      }
+
+      // Create date object (month is 0-indexed in JS)
+      const pastedDate = new Date(fullYear, parseInt(month) - 1, parseInt(day));
+
+      // Validate the date is valid
+      if (
+        !isNaN(pastedDate.getTime()) &&
+        pastedDate.getMonth() === parseInt(month) - 1 &&
+        pastedDate.getDate() === parseInt(day)
+      ) {
+        this.setTimeDateInput(pastedDate);
+        this.selectSpanByTabIndex(this.selectionInput);
+        this.t2.close();
+        this.blurInputEvent.emit(true);
+      }
+    }
+  }
+
+  changeSelection(e: any, noPreventDefault = false): void {
+    const isPasting = (e.ctrlKey || e.metaKey) && e.key?.toLowerCase() === 'v';
+
+    if (e.key === 'Escape') {
+      this.justEnteredDatePicker = false;
+      this.holder1.nativeElement.blur();
+      return;
+    }
+
+    if (isPasting) {
+      return;
+    }
+
+    // Tab is 9
+    if (
+      e.keyCode == 37 ||
+      e.keyCode == 38 ||
+      e.keyCode == 39 ||
+      e.keyCode == 40 ||
+      e.keyCode == 8 ||
+      e.keyCode == 9 ||
+      e.keyCode == 46 ||
+      (this.selectionInput == 3 && this.inputConfig.name === 'timepicker')
+    ) {
+      // Determine the last selectable segment index based on input type
+      const lastSegmentIndex =
+        this.inputConfig.name === 'datepickerBankCard' ? 1 : 2;
+
+      // Check if Tab/Shift+Tab should be allowed to navigate away
+      const isTabAtEnd =
+        e.keyCode == 9 &&
+        !e.shiftKey &&
+        this.selectionInput == lastSegmentIndex;
+      const isShiftTabAtStart =
+        e.keyCode == 9 && e.shiftKey && this.selectionInput == 0;
+      const shouldAllowTabNavigation = isTabAtEnd || isShiftTabAtStart;
+
+      // Prevent default and stop propagation unless we're allowing tab navigation
+      if (!shouldAllowTabNavigation) {
+        !e.noPrevent && e.preventDefault();
+        e.stopPropagation();
+      }
+
+      if (e.keyCode == 37) {
+        this.selectionInput =
+          this.selectionInput <= 0 ? 0 : this.selectionInput - 1;
+        this.selectSpanByTabIndex(this.selectionInput, true);
+      } else if (e.keyCode == 39 || e.keyCode == 9) {
+        if (
+          ((this.inputConfig.name === 'datepickerBankCard' &&
+            this.selectionInput != 1) ||
+            (this.inputConfig.name !== 'datepickerBankCard' &&
+              this.selectionInput != 2)) &&
+          !e.shiftKey
+        ) {
+          this.selectionInput = this.selectionInput + 1;
+          this.selectSpanByTabIndex(this.selectionInput, true);
+        } else if (e.keyCode == 9 && !e.shiftKey) {
+          // Tab at the end - reset selection and allow default navigation
+          this.selectionInput = -1;
+        } else if (e.shiftKey && e.keyCode == 9 && this.selectionInput != 0) {
+          if (this.selectionInput == -1) {
+            this.selectionInput = 3;
+          }
+          this.selectionInput = this.selectionInput - 1;
+          this.selectSpanByTabIndex(this.selectionInput);
+        } else if (e.shiftKey && e.keyCode == 9 && this.selectionInput == 0) {
+          // Shift+Tab at the start - reset selection and allow default navigation
+          this.selectionInput = -1;
+        }
+      } else if (e.keyCode == 38) {
+        this.setDateTimeModel('up');
+      } else if (e.keyCode == 40) {
+        this.setDateTimeModel('down');
+      } else if (e.keyCode == 8 || e.keyCode == 46) {
+        this.handleKeyboardInputs(e, true);
+      }
+    } else if (!this.isNumber(e)) {
+      if (!noPreventDefault) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    } else {
+      if (!noPreventDefault) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+      if (this.selectionInput == -1) {
+        this.selectionInput = 0;
+      }
+
+      this.handleKeyboardInputs(e);
+    }
+  }
+
+  public changeSelectionTwo(
+    event: KeyboardEvent,
+    noPreventDefault = false,
+  ): void {
+    if (!noPreventDefault) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    const isNavigationKey = this.isNavigationKey(event);
+    const isSpecialTimePickerKey =
+      this.selectionInput === 3 &&
+      this.inputConfig.name === InputConfigNameStringEnum.TIME_PICKER;
+
+    if (isNavigationKey || isSpecialTimePickerKey) {
+      event.preventDefault();
+      this.handleNavigationKey(event);
+    } else if (!this.isNumber(event)) {
+      if (!noPreventDefault) event.preventDefault();
+      else {
+        if (!noPreventDefault) event.preventDefault();
+
+        if (this.selectionInput === -1) this.selectionInput = 0;
+        this.handleKeyboardInputs(event);
+      }
+    }
+  }
+
+  private isNumber(evt: KeyboardEvent): boolean {
+    evt = evt ? evt : (window.event as KeyboardEvent);
+    let charCode = evt.which ? evt.which : evt.keyCode;
+    return (
+      (charCode >= 48 && charCode <= 57) || (charCode >= 96 && charCode <= 105)
+    );
+  }
+
+  private isNavigationKey(e: KeyboardEvent): boolean {
+    const navigationKeys = [37, 38, 39, 40, 8, 9, 46]; // Arrow keys, Backspace, Tab, Delete
+    return navigationKeys.includes(e.keyCode);
+  }
+
+  public onFocus(event?: FocusEvent): void {
+    this.onFocusEmitter.emit(event);
+  }
+
+  public closePopover(date: Date): void {
+    if (date) {
+      this.setTimeDateInput(date);
+    }
+    this.t2?.close();
+    this.blurInputEvent.emit(true);
+  }
+
+  public handleFocusInput(e: Event) {
+    const event = e as FocusEvent;
+
+    if (!this.isDisabled()) {
+      clearTimeout(this.dateTimeMainTimer);
+      clearTimeout(this.focusBlur);
+      this.showDateInput = true;
+      if (
+        (this.selectionInput === -1 &&
+          (event?.target as HTMLElement)?.nodeName === 'INPUT') ||
+        (event?.relatedTarget as HTMLElement)?.nodeName === 'INPUT' ||
+        event?.relatedTarget === null
+      ) {
+        this.preventBlur = true;
+        this.holder1.nativeElement.focus();
+        this.setSpanSelection(this.holder1.nativeElement);
+        this.selectionInput = -1;
+      }
+
+      this.t2.toggle();
+    }
+  }
+
+  public setSpanSelection(element: Node): void {
+    let range: Range;
+    let selection: Selection | null;
+
+    if (window.getSelection && document.createRange) {
+      selection = window.getSelection();
+      range = document.createRange();
+      range.selectNodeContents(element);
+      selection?.removeAllRanges();
+      selection?.addRange(range);
+    }
+  }
+
+  public setSelection(event: {
+    preventDefault: () => void;
+    stopPropagation: () => void;
+    target: any;
+  }): void {
+    const element = event.target;
+
+    const selectionInput = parseInt(element.getAttribute('tabindex'));
+
+    const currentSelection = window.getSelection();
+
+    if (currentSelection && currentSelection.toString().length > 10) {
+      this.holder1.nativeElement.focus();
+      this.selectionInput = 0;
+      this.setSpanSelection(this.holder1.nativeElement);
+      clearTimeout(this.dateTimeMainTimer);
+      clearTimeout(this.focusBlur);
+      return;
+    }
+
+    clearTimeout(this.dateTimeMainTimer);
+    if (element.classList.contains('main')) {
+      this.selectionInput = selectionInput;
+      this.setSpanSelection(element);
+    } else {
+      if (this.selectionInput === -1) {
+        this.holder1.nativeElement.focus();
+        this.selectionInput = 0;
+        this.setSpanSelection(this.span1.nativeElement);
+      } else {
+        event.preventDefault();
+        this.selectSpanByTabIndex(this.selectionInput);
+      }
+    }
+  }
+
+  // BLUR ON INPUT
+  public blurOnDateTime(): void {
+    clearTimeout(this.dateTimeMainTimer);
+    this.dateTimeMainTimer = setTimeout(() => {
+      if (this.inputConfig.name === InputConfigNameStringEnum.DATE_PICKER) {
+        if (
+          !isNaN(this.span1?.nativeElement.innerHTML) &&
+          !isNaN(this.span2?.nativeElement.innerHTML) &&
+          !isNaN(this.span3?.nativeElement.innerHTML)
+        ) {
+          this.calendarService.dateChanged.next(this.dateTimeInputDate);
+
+          if (this.justEnteredDatePicker) {
+            requestAnimationFrame(() => {
+              KeyboardNavigationHelper.focusNextInput(this.holder1);
+            });
+          }
+          this.justEnteredDatePicker = false;
+        } else {
+          this.span1.nativeElement.innerHTML = 'mm';
+          this.span2.nativeElement.innerHTML = 'dd';
+          this.span3.nativeElement.innerHTML = 'yy';
+          this.dateTimeInputDate = new Date();
+          this.showDateInput = false;
+          this.clearInput();
+          this.justEnteredDatePicker = false;
+        }
+      } else if (
+        this.inputConfig.name ===
+        InputConfigNameStringEnum.DATE_PICKER_BANK_CARD
+      ) {
+        if (
+          !isNaN(this.span1.nativeElement.innerHTML) &&
+          !isNaN(this.span2.nativeElement.innerHTML)
+        ) {
+          this.calendarService.dateChanged.next(this.dateTimeInputDate);
+          if (this.justEnteredDatePicker) {
+            requestAnimationFrame(() => {
+              KeyboardNavigationHelper.focusNextInput(this.holder1);
+            });
+          }
+          this.justEnteredDatePicker = false;
+        } else {
+          this.span1.nativeElement.innerHTML = 'mm';
+          this.span2.nativeElement.innerHTML = 'yy';
+          this.dateTimeInputDate = new Date();
+          this.showDateInput = false;
+          this.clearInput();
+          this.justEnteredDatePicker = false;
+        }
+      } else {
+        if (
+          !isNaN(this.span1.nativeElement.innerHTML) &&
+          !isNaN(this.span2.nativeElement.innerHTML)
+        ) {
+          this.calendarService.dateChanged.next(this.dateTimeInputDate);
+          if (this.justEnteredDatePicker) {
+            requestAnimationFrame(() => {
+              KeyboardNavigationHelper.focusNextInput(this.holder1);
+            });
+          }
+          this.justEnteredDatePicker = false;
+        } else {
+          this.span1.nativeElement.innerHTML = 'HH';
+          this.span2.nativeElement.innerHTML = 'MM';
+          this.setTimePickerTime();
+          this.showDateInput = false;
+          this.clearInput();
+          this.justEnteredDatePicker = false;
+        }
+      }
+
+      // Clear the timer reference after it's executed
+      this.dateTimeMainTimer = 0;
+      this.selectionInput = -1;
+      this.newInputChanged = true;
+    }, 0);
+  }
+
+  public onEditableFocus(event: FocusEvent): void {
+    if (this.isDisabled()) {
+      event.preventDefault();
+      event.stopPropagation();
+
+      this.holder1.nativeElement.blur();
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (this.isFocusInput) return;
+
+    this.onPopoverClick();
+  }
+
+  public onPopoverClick(event?: MouseEvent): void {
+    if (this.isDisabled()) return;
+
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    this.isFocusInput = true;
+    clearTimeout(this.dateTimeMainTimer);
+    clearTimeout(this.focusBlur);
+    this.holder1.nativeElement.focus();
+    this.selectionInput = -1;
+    this.setSpanSelection(this.holder1.nativeElement);
+  }
+
+  public onPopoverShown(): void {
+    this.isPopoverShown = true;
+  }
+
+  public onPopoverHidden(): void {
+    this.isPopoverShown = false;
+  }
+
+  public setTimeDateInput(date: InputChangeValue, hasValue?: boolean): void {
+    let text, dateFormat, timeFormat;
+    if (this.inputConfig.name === InputConfigNameStringEnum.DATE_PICKER) {
+      text = moment(new Date(date)).format('MM/DD/YY');
+      dateFormat = text.split('/');
+    } else if (
+      this.inputConfig.name === InputConfigNameStringEnum.DATE_PICKER_BANK_CARD
+    ) {
+      text = moment(new Date(date)).format('MM/DD/YY');
+      dateFormat = text.split('/');
+    } else {
+      date =
+        date instanceof Date
+          ? date
+          : new Date(moment().format('MM/DD/YYYY') + ' ' + date);
+      text = moment(new Date(date)).format('HH:mm');
+
+      timeFormat = moment(new Date(date)).format('hh/mm/A');
+      dateFormat = timeFormat.split('/');
+    }
+
+    if (this.formFormat) {
+      const newFormFormat = moment(new Date(date)).format(this.formFormat);
+      this.valueAfterWriteValue = newFormFormat;
+      text = newFormFormat;
+    }
+
+    // When called from writeValue, always store the value to prevent reset in ngAfterViewInit
+    if (hasValue && !this.valueAfterWriteValue) {
+      this.valueAfterWriteValue = text;
+    }
+
+    if (!hasValue) {
+      this.onChange(text);
+      // Mark as touched when user changes the value
+      this.markAsTouched();
+    }
+    this.setIsFocusInput(false);
+
+    // HAS TO BE IN TIMEOUT BECAUSE OF ANGULAR STACK
+    setTimeout(() => {
+      if (this.span1) this.span1.nativeElement.innerHTML = dateFormat[0];
+
+      if (this.span2)
+        if (
+          this.inputConfig.name !==
+          InputConfigNameStringEnum.DATE_PICKER_BANK_CARD
+        ) {
+          this.span2.nativeElement.innerHTML = dateFormat[1];
+          this.span3.nativeElement.innerHTML = dateFormat[2];
+        } else {
+          this.span2.nativeElement.innerHTML = dateFormat[2];
+        }
+    }, 0);
+
+    if (date) {
+      this.dateTimeInputDate = new Date(date);
+    }
+    this.showDateInput = true;
+  }
+
+  private markAsTouched(): void {
+    if (this.getSuperControl && !this.getSuperControl.touched) {
+      this.onTouched();
+    }
+  }
+
+  public handleKeyboardInputs(e: KeyboardEvent, isRestart?: boolean): void {
+    const spanOneValue: number | undefined =
+      isNaN(this.span1.nativeElement.innerHTML) || this.newInputChanged
+        ? undefined
+        : parseInt(this.span1.nativeElement.innerHTML);
+    const span2Value: number | undefined =
+      isNaN(this.span2.nativeElement.innerHTML) || this.newInputChanged
+        ? undefined
+        : parseInt(this.span2.nativeElement.innerHTML);
+
+    let span3Value: string | number | undefined;
+
+    if (
+      this.inputConfig.name !== InputConfigNameStringEnum.DATE_PICKER_BANK_CARD
+    ) {
+      span3Value =
+        isNaN(this.span3.nativeElement.innerHTML) || this.newInputChanged
+          ? ''
+          : parseInt(this.span3.nativeElement.innerHTML);
+    }
+
+    this.newInputChanged = false;
+    if (this.inputConfig.name === InputConfigNameStringEnum.DATE_PICKER) {
+      if (this.selectionInput === 0) {
+        if (isRestart) {
+          this.span1.nativeElement.innerHTML = 'mm';
+          this.selectionInput = 0;
+          this.selectSpanByTabIndex(0);
+        } else {
+          const currentValue = this.span1.nativeElement.innerHTML;
+          const isPlaceholder = currentValue === 'mm';
+          const hasOneDigit =
+            !isPlaceholder &&
+            currentValue.length === 2 &&
+            currentValue[1] === 'm';
+
+          if (isPlaceholder) {
+            // First digit: show as "Xm"
+            const keyValue = e.key;
+
+            if (keyValue >= '0' && keyValue <= '9') {
+              this.span1.nativeElement.innerHTML = keyValue + 'm';
+
+              if (parseInt(keyValue) > 1) {
+                // Auto-advance for 2-9 since they can only be single digit months
+                this.dateTimeInputDate = new Date(
+                  this.dateTimeInputDate.setMonth(parseInt(keyValue) - 1),
+                );
+                this.selectionInput = 1;
+                this.selectSpanByTabIndex(1, true);
+              } else {
+                this.selectionInput = 0;
+                this.selectSpanByTabIndex(0);
+              }
+              this.markAsTouched();
+            }
+          } else if (hasOneDigit) {
+            // Second digit: combine with first digit
+            const firstDigit = currentValue[0];
+            const final_value = parseInt(firstDigit + e.key);
+
+            if (final_value > 12 || final_value === 0) {
+              // Invalid, restart with new digit
+              this.span1.nativeElement.innerHTML = e.key + 'm';
+              if (parseInt(e.key) > 1) {
+                this.dateTimeInputDate = new Date(
+                  this.dateTimeInputDate.setMonth(parseInt(e.key) - 1),
+                );
+                this.selectionInput = 1;
+                this.selectSpanByTabIndex(1, true);
+              } else {
+                this.selectionInput = 0;
+                this.selectSpanByTabIndex(0);
+              }
+            } else {
+              this.dateTimeInputDate = new Date(
+                this.dateTimeInputDate.setMonth(final_value - 1),
+              );
+
+              this.span1.nativeElement.innerHTML = ('0' + final_value).slice(
+                -2,
+              );
+
+              this.selectionInput = 1;
+              this.selectSpanByTabIndex(1, true);
+              this.markAsTouched();
+            }
+          } else {
+            // Complete value exists, restart
+            const keyValue = e.key;
+            this.span1.nativeElement.innerHTML = keyValue + 'm';
+
+            if (parseInt(keyValue) > 1) {
+              this.dateTimeInputDate = new Date(
+                this.dateTimeInputDate.setMonth(parseInt(keyValue) - 1),
+              );
+              this.selectionInput = 1;
+              this.selectSpanByTabIndex(1, true);
+            } else {
+              this.selectionInput = 0;
+              this.selectSpanByTabIndex(0);
+            }
+            this.markAsTouched();
+          }
+        }
+      } else if (this.selectionInput === 1) {
+        if (isRestart) {
+          this.span2.nativeElement.innerHTML = 'dd';
+          this.selectionInput = 0;
+          this.selectSpanByTabIndex(0, true);
+        } else {
+          const currentValue = this.span2.nativeElement.innerHTML;
+          const isPlaceholder = currentValue === 'dd';
+          const hasOneDigit =
+            !isPlaceholder &&
+            currentValue.length === 2 &&
+            currentValue[1] === 'd';
+
+          if (isPlaceholder) {
+            // First digit: show as "Xd"
+            const keyValue = e.key;
+
+            if (keyValue >= '0' && keyValue <= '9') {
+              this.span2.nativeElement.innerHTML = keyValue + 'd';
+
+              if (parseInt(keyValue) > 3) {
+                // Auto-advance for 4-9 since they can only be single digit days
+                this.dateTimeInputDate = new Date(
+                  this.dateTimeInputDate.setDate(parseInt(keyValue)),
+                );
+                this.selectionInput = 2;
+                this.selectSpanByTabIndex(2, true);
+              } else {
+                this.selectSpanByTabIndex(1);
+              }
+              this.markAsTouched();
+            }
+          } else if (hasOneDigit) {
+            // Second digit: combine with first digit
+            const firstDigit = currentValue[0];
+            const final_value = parseInt(firstDigit + e.key);
+
+            if (final_value > 31 || final_value === 0) {
+              // Invalid, restart with new digit
+              this.span2.nativeElement.innerHTML = e.key + 'd';
+              if (parseInt(e.key) > 3) {
+                this.dateTimeInputDate = new Date(
+                  this.dateTimeInputDate.setDate(parseInt(e.key)),
+                );
+                this.selectionInput = 2;
+                this.selectSpanByTabIndex(2, true);
+              } else {
+                this.selectSpanByTabIndex(1);
+              }
+              this.markAsTouched();
+            } else {
+              this.dateTimeInputDate = new Date(
+                this.dateTimeInputDate.setDate(final_value),
+              );
+
+              this.span2.nativeElement.innerHTML = ('0' + final_value).slice(
+                -2,
+              );
+
+              this.selectionInput = 2;
+              this.selectSpanByTabIndex(2, true);
+            }
+          } else {
+            // Complete value exists, restart
+            const keyValue = e.key;
+            this.span2.nativeElement.innerHTML = keyValue + 'd';
+
+            if (parseInt(keyValue) > 3) {
+              this.dateTimeInputDate = new Date(
+                this.dateTimeInputDate.setDate(parseInt(keyValue)),
+              );
+              this.selectionInput = 2;
+              this.selectSpanByTabIndex(2, true);
+            } else {
+              this.selectSpanByTabIndex(1);
+            }
+            this.markAsTouched();
+          }
+        }
+      } else {
+        if (isRestart) {
+          this.span3.nativeElement.innerHTML = 'yy';
+          this.selectionInput = 1;
+          this.selectSpanByTabIndex(1, true);
+        } else {
+          const currentValue = this.span3.nativeElement.innerHTML;
+          const isPlaceholder = currentValue === 'yy';
+          const hasOneDigit =
+            !isPlaceholder &&
+            currentValue.length === 2 &&
+            currentValue[1] === 'y';
+
+          if (isPlaceholder) {
+            // First digit: show as "Xy"
+            const keyValue = e.key;
+            this.span3.nativeElement.innerHTML = keyValue + 'y';
+            this.selectSpanByTabIndex(2);
+          } else if (hasOneDigit) {
+            // Second digit: combine with first digit
+            const firstDigit = currentValue[0];
+            const finalYear = parseInt(firstDigit + e.key);
+
+            const finalShowYear =
+              finalYear > 31
+                ? parseInt(`19${finalYear}`)
+                : parseInt(`20${finalYear}`);
+            this.dateTimeInputDate = new Date(
+              this.dateTimeInputDate.setFullYear(finalShowYear),
+            );
+
+            this.span3.nativeElement.innerHTML = ('0' + finalYear).slice(-2);
+            this.selectSpanByTabIndex(2);
+            this.markAsTouched();
+
+            this.justEnteredDatePicker = true;
+            this.blurOnDateTime();
+          } else {
+            // Complete value exists, restart
+            const keyValue = e.key;
+            this.span3.nativeElement.innerHTML = keyValue + 'y';
+            this.selectSpanByTabIndex(2);
+          }
+        }
+      }
+    } else if (
+      this.inputConfig.name === InputConfigNameStringEnum.TIME_PICKER &&
+      !this.inputConfig.preventTyping
+    ) {
+      // Handle time picker keyboard input
+      if (this.selectionInput === 0) {
+        // Hours input
+        if (isRestart) {
+          this.span1.nativeElement.innerHTML = 'HH';
+          this.selectionInput = 0;
+          this.selectSpanByTabIndex(0);
+        } else {
+          const currentValue = this.span1.nativeElement.innerHTML;
+          const isPlaceholder = currentValue === 'HH';
+          const hasOneDigit =
+            !isPlaceholder &&
+            currentValue.length === 2 &&
+            currentValue[1] === 'H';
+
+          if (isPlaceholder) {
+            // First digit: show as "XH"
+            const keyValue = e.key;
+            if (keyValue >= '0' && keyValue <= '9') {
+              this.span1.nativeElement.innerHTML = keyValue + 'H';
+
+              if (parseInt(`1${keyValue}`) > 12) {
+                this.selectionInput = 1;
+                this.selectSpanByTabIndex(1, true);
+              } else {
+                this.selectionInput = 0;
+                this.selectSpanByTabIndex(0);
+              }
+              this.markAsTouched();
+            }
+          } else if (hasOneDigit) {
+            // Second digit: combine with first digit
+            const firstDigit = currentValue[0];
+            const final_value = parseInt(firstDigit + e.key);
+
+            if (final_value > 12 || final_value === 0) {
+              this.span1.nativeElement.innerHTML = e.key + 'H';
+              this.selectionInput = 1;
+              this.selectSpanByTabIndex(1, true);
+            } else {
+              const currentHour = this.dateTimeInputDate.getHours();
+              const isPM = currentHour >= 12;
+              const newHour = isPM ? final_value + 12 : final_value;
+
+              this.dateTimeInputDate = new Date(
+                this.dateTimeInputDate.setHours(newHour),
+              );
+
+              this.span1.nativeElement.innerHTML = ('0' + final_value).slice(
+                -2,
+              );
+              this.selectionInput = 1;
+              this.selectSpanByTabIndex(1, true);
+              this.markAsTouched();
+            }
+          } else {
+            // Complete value exists, restart
+            const keyValue = e.key;
+            this.span1.nativeElement.innerHTML = keyValue + 'H';
+
+            if (parseInt(`1${keyValue}`) > 12) {
+              this.selectionInput = 1;
+              this.selectSpanByTabIndex(1, true);
+            } else {
+              this.selectionInput = 0;
+              this.selectSpanByTabIndex(0);
+            }
+            this.markAsTouched();
+          }
+        }
+      } else if (this.selectionInput === 1) {
+        // Minutes input
+        if (isRestart) {
+          this.span2.nativeElement.innerHTML = 'MM';
+          this.selectionInput = 0;
+          this.selectSpanByTabIndex(0, true);
+        } else {
+          const currentValue = this.span2.nativeElement.innerHTML;
+          const isPlaceholder = currentValue === 'MM';
+          const hasOneDigit =
+            !isPlaceholder &&
+            currentValue.length === 2 &&
+            currentValue[1] === 'M';
+
+          if (isPlaceholder) {
+            // First digit: show as "XM"
+            const keyValue = e.key;
+            if (keyValue >= '0' && keyValue <= '9') {
+              this.span2.nativeElement.innerHTML = keyValue + 'M';
+
+              if (parseInt(keyValue) > 5) {
+                this.selectionInput = 2;
+                this.selectSpanByTabIndex(2, true);
+              } else {
+                this.selectSpanByTabIndex(1);
+              }
+              this.markAsTouched();
+            }
+          } else if (hasOneDigit) {
+            // Second digit: combine with first digit
+            const firstDigit = currentValue[0];
+            const final_value = parseInt(firstDigit + e.key);
+
+            if (final_value > 59) {
+              this.span2.nativeElement.innerHTML = e.key + 'M';
+              this.selectionInput = 2;
+              this.selectSpanByTabIndex(2, true);
+            } else {
+              this.dateTimeInputDate = new Date(
+                this.dateTimeInputDate.setMinutes(final_value),
+              );
+
+              this.span2.nativeElement.innerHTML = ('0' + final_value).slice(
+                -2,
+              );
+
+              this.selectionInput = 2;
+              this.selectSpanByTabIndex(2, true);
+              this.markAsTouched();
+            }
+          } else {
+            // Complete value exists, restart
+            const keyValue = e.key;
+            this.span2.nativeElement.innerHTML = keyValue + 'M';
+
+            if (parseInt(keyValue) > 5) {
+              this.selectionInput = 2;
+              this.selectSpanByTabIndex(2, true);
+            } else {
+              this.selectSpanByTabIndex(1);
+            }
+            this.markAsTouched();
+          }
+        }
+      } else if (this.selectionInput === 2) {
+        // AM/PM input
+        if (isRestart) {
+          this.span3.nativeElement.innerHTML = 'AM';
+          this.selectionInput = 0;
+          this.selectSpanByTabIndex(0, true);
+        } else {
+          const currentHour = this.dateTimeInputDate.getHours();
+          const isPM = e.key.toLowerCase() === 'p';
+
+          if (isPM && currentHour < 12) {
+            this.dateTimeInputDate = new Date(
+              this.dateTimeInputDate.setHours(currentHour + 12),
+            );
+            this.span3.nativeElement.innerHTML = 'PM';
+          } else if (!isPM && currentHour >= 12) {
+            this.dateTimeInputDate = new Date(
+              this.dateTimeInputDate.setHours(currentHour - 12),
+            );
+            this.span3.nativeElement.innerHTML = 'AM';
+          }
+
+          this.selectionInput = 0;
+          this.selectSpanByTabIndex(0, true);
+          this.markAsTouched();
+          this.justEnteredDatePicker = true;
+          this.blurOnDateTime();
+        }
+      }
+    } else if (
+      this.inputConfig.name === InputConfigNameStringEnum.DATE_PICKER_BANK_CARD
+    ) {
+      if (!this.selectionInput) {
+        if (isRestart) {
+          this.span1.nativeElement.innerHTML = 'mm';
+          this.selectionInput = 0;
+          this.selectSpanByTabIndex(0);
+        } else {
+          const currentValue = this.span1.nativeElement.innerHTML;
+          const isPlaceholder = currentValue === 'mm';
+          const hasOneDigit =
+            !isPlaceholder &&
+            currentValue.length === 2 &&
+            currentValue[1] === 'm';
+
+          if (isPlaceholder) {
+            // First digit: show as "Xm"
+            const keyValue = e.key;
+
+            if (keyValue >= '0' && keyValue <= '9') {
+              this.span1.nativeElement.innerHTML = keyValue + 'm';
+
+              if (parseInt(keyValue) > 1) {
+                // Auto-advance for 2-9 since they can only be single digit months
+                this.dateTimeInputDate = new Date(
+                  this.dateTimeInputDate.setMonth(parseInt(keyValue) - 1),
+                );
+                this.selectionInput = 1;
+                this.selectSpanByTabIndex(1, true);
+              } else {
+                this.selectSpanByTabIndex(0);
+              }
+            }
+          } else if (hasOneDigit) {
+            // Second digit: combine with first digit
+            const firstDigit = currentValue[0];
+            const final_value = parseInt(firstDigit + e.key);
+
+            if (final_value > 12 || final_value === 0) {
+              // Invalid, restart with new digit
+              this.span1.nativeElement.innerHTML = e.key + 'm';
+              if (parseInt(e.key) > 1) {
+                this.dateTimeInputDate = new Date(
+                  this.dateTimeInputDate.setMonth(parseInt(e.key) - 1),
+                );
+                this.selectionInput = 1;
+                this.selectSpanByTabIndex(1, true);
+              } else {
+                this.selectSpanByTabIndex(0);
+              }
+            } else {
+              this.dateTimeInputDate = new Date(
+                this.dateTimeInputDate.setMonth(final_value - 1),
+              );
+
+              this.span1.nativeElement.innerHTML = ('0' + final_value).slice(
+                -2,
+              );
+
+              this.selectionInput = 1;
+              this.selectSpanByTabIndex(1, true);
+            }
+          } else {
+            // Complete value exists, restart
+            const keyValue = e.key;
+            this.span1.nativeElement.innerHTML = keyValue + 'm';
+
+            if (parseInt(keyValue) > 1) {
+              this.dateTimeInputDate = new Date(
+                this.dateTimeInputDate.setMonth(parseInt(keyValue) - 1),
+              );
+              this.selectionInput = 1;
+              this.selectSpanByTabIndex(1, true);
+            } else {
+              this.selectSpanByTabIndex(0);
+            }
+          }
+        }
+      } else {
+        if (isRestart) {
+          this.span2.nativeElement.innerHTML = 'yy';
+          this.selectionInput = 2;
+          this.selectSpanByTabIndex(2, true);
+        } else {
+          const currentValue = this.span2.nativeElement.innerHTML;
+          const isPlaceholder = currentValue === 'yy';
+          const hasOneDigit =
+            !isPlaceholder &&
+            currentValue.length === 2 &&
+            currentValue[1] === 'y';
+
+          if (isPlaceholder) {
+            // First digit: show as "Xy"
+            const keyValue = e.key;
+            this.span2.nativeElement.innerHTML = keyValue + 'y';
+            this.selectSpanByTabIndex(1);
+          } else if (hasOneDigit) {
+            // Second digit: combine with first digit
+            const firstDigit = currentValue[0];
+            const finalYear = parseInt(firstDigit + e.key);
+
+            const finalShowYear =
+              finalYear > 31
+                ? parseInt(`19${finalYear}`)
+                : parseInt(`20${finalYear}`);
+            this.dateTimeInputDate = new Date(
+              this.dateTimeInputDate.setFullYear(finalShowYear),
+            );
+
+            this.span2.nativeElement.innerHTML = ('0' + finalYear).slice(-2);
+            this.selectSpanByTabIndex(1);
+
+            // Validate and update immediately when last field (YY) is completed
+            this.justEnteredDatePicker = true;
+            this.blurOnDateTime();
+          } else {
+            // Complete value exists, restart
+            const keyValue = e.key;
+            this.span2.nativeElement.innerHTML = keyValue + 'y';
+            this.selectSpanByTabIndex(1);
+          }
+        }
+      }
+    }
+  }
+
+  selectSpanByTabIndex(indx: number, changeTab?: boolean): void {
+    switch (indx) {
+      case 0:
+        this.setSpanSelection(this.span1.nativeElement);
+        break;
+      case 1:
+        this.setSpanSelection(this.span2.nativeElement);
+        break;
+      case 2:
+        this.setSpanSelection(this.span3.nativeElement);
+        break;
+      default:
+        this.setSpanSelection(this.holder1.nativeElement);
+    }
+
+    // Ensure the holder1 element stays focused
+    this.holder1.nativeElement.focus();
+
+    if (changeTab) this.newInputChanged = true;
+  }
+
+  private handleNavigationKey(event: KeyboardEvent): void {
+    switch (event.key) {
+      case 'ArrowLeft': // Left arrow
+        this.moveSelectionLeft();
+        break;
+      case 'ArrowRight': // Right arrow
+      case 'Tab': // Tab
+        this.moveSelectionRightOrTab(event);
+        break;
+      case 'ArrowUp': // Up arrow
+        this.setDateTimeModel('up');
+        break;
+      case 'ArrowDown': // Down arrow
+        this.setDateTimeModel('down');
+        break;
+      case 'Backspace': // Backspace
+      case 'Delete': // Delete
+        this.handleKeyboardInputs(event, true);
+        break;
+    }
+  }
+
+  private handleDatePickerInput(isUp: boolean, isDatePicker: boolean): void {
+    if (this.selectionInput === 0) this.updateMonth(isUp);
+    else if (this.selectionInput === 1) this.updateDate(isUp, isDatePicker);
+    else this.updateYear(isUp, isDatePicker);
+  }
+
+  private setDateTimeModel(direction: string): void {
+    if (this.selectionInput === -1) this.selectionInput = 0;
+
+    const isUp = direction === 'up';
+    const isDatePicker =
+      this.inputConfig.name === InputConfigNameStringEnum.DATE_PICKER;
+    const isBankCardPicker =
+      this.inputConfig.name === InputConfigNameStringEnum.DATE_PICKER_BANK_CARD;
+
+    if (isDatePicker || isBankCardPicker)
+      this.handleDatePickerInput(isUp, isDatePicker);
+    else this.handleTimePickerInput(isUp);
+  }
+
+  private moveSelectionRightOrTab(e: KeyboardEvent): void {
+    // Format current field before moving
+    this.formatCurrentField();
+
+    const isDatepickerBankCard =
+      this.inputConfig.name === InputConfigNameStringEnum.DATE_PICKER_BANK_CARD;
+    const maxIndex = isDatepickerBankCard ? 1 : 2;
+
+    if (this.selectionInput < maxIndex && !e.shiftKey) {
+      this.selectionInput += 1;
+      this.selectSpanByTabIndex(this.selectionInput, true);
+    }
+  }
+
+  private formatCurrentField(): void {
+    if (this.selectionInput === -1) return;
+
+    const currentSpan =
+      this.selectionInput === 0
+        ? this.span1
+        : this.selectionInput === 1
+          ? this.span2
+          : this.span3;
+
+    if (!currentSpan) return;
+
+    const currentValue = currentSpan.nativeElement.innerHTML;
+    const isDatePicker =
+      this.inputConfig.name === InputConfigNameStringEnum.DATE_PICKER;
+    const isBankCardPicker =
+      this.inputConfig.name === InputConfigNameStringEnum.DATE_PICKER_BANK_CARD;
+    const isTimePicker =
+      this.inputConfig.name === InputConfigNameStringEnum.TIME_PICKER;
+
+    // Format month (span1) in date/bank card picker
+    if ((isDatePicker || isBankCardPicker) && this.selectionInput === 0) {
+      if (currentValue.length === 2 && currentValue[1] === 'm') {
+        const digit = currentValue[0];
+        const formatted = ('0' + digit).slice(-2);
+        currentSpan.nativeElement.innerHTML = formatted;
+        this.dateTimeInputDate = new Date(
+          this.dateTimeInputDate.setMonth(parseInt(digit) - 1),
+        );
+      }
+    }
+
+    // Format day (span2) in date picker
+    if (isDatePicker && this.selectionInput === 1) {
+      if (currentValue.length === 2 && currentValue[1] === 'd') {
+        const digit = currentValue[0];
+        const formatted = ('0' + digit).slice(-2);
+        currentSpan.nativeElement.innerHTML = formatted;
+        this.dateTimeInputDate = new Date(
+          this.dateTimeInputDate.setDate(parseInt(digit)),
+        );
+      }
+    }
+
+    // Format year (span2 bank card / span3 date picker)
+    if (
+      (isDatePicker && this.selectionInput === 2) ||
+      (isBankCardPicker && this.selectionInput === 1)
+    ) {
+      if (currentValue.length === 2 && currentValue[1] === 'y') {
+        const digit = currentValue[0];
+        const formatted = ('0' + digit).slice(-2);
+        currentSpan.nativeElement.innerHTML = formatted;
+        const fullYear = parseInt(`200${digit}`);
+        this.dateTimeInputDate = new Date(
+          this.dateTimeInputDate.setFullYear(fullYear),
+        );
+      }
+    }
+
+    // Format hours (span1) in time picker
+    if (isTimePicker && this.selectionInput === 0) {
+      if (currentValue.length === 2 && currentValue[1].toLowerCase() === 'h') {
+        const digit = currentValue[0];
+        const formatted = ('0' + digit).slice(-2);
+        currentSpan.nativeElement.innerHTML = formatted;
+        const currentHour = this.dateTimeInputDate.getHours();
+        const isPM = currentHour >= 12;
+        const newHour = isPM ? parseInt(digit) + 12 : parseInt(digit);
+        this.dateTimeInputDate = new Date(
+          this.dateTimeInputDate.setHours(newHour),
+        );
+      }
+    }
+
+    // Format minutes (span2) in time picker
+    if (isTimePicker && this.selectionInput === 1) {
+      if (currentValue.length === 2 && currentValue[1].toLowerCase() === 'm') {
+        const digit = currentValue[0];
+        const formatted = ('0' + digit).slice(-2);
+        currentSpan.nativeElement.innerHTML = formatted;
+        this.dateTimeInputDate = new Date(
+          this.dateTimeInputDate.setMinutes(parseInt(digit)),
+        );
+      }
+    }
+  }
+
+  public setIsFocusInput(value: boolean): void {
+    this.isFocusInput = value;
+  }
+
+  private moveSelectionLeft(): void {
+    // Format current field before moving
+    this.formatCurrentField();
+
+    if (this.selectionInput > 0) {
+      this.selectionInput -= 1;
+      this.selectSpanByTabIndex(this.selectionInput, true);
+    }
+  }
+
+  private updateMonth(isUp: boolean): void {
+    const monthDelta = isUp ? 1 : -1;
+    this.dateTimeInputDate = new Date(
+      this.dateTimeInputDate.setMonth(
+        this.dateTimeInputDate.getMonth() + monthDelta,
+      ),
+    );
+
+    this.span1.nativeElement.innerHTML = this.padValue(
+      this.dateTimeInputDate.getMonth() + 1,
+    );
+    this.setSpanSelection(this.span1.nativeElement);
+  }
+
+  private updateDate(isUp: boolean, isDatePicker: boolean): void {
+    const dateDelta = isUp ? 1 : -1;
+    this.dateTimeInputDate = new Date(
+      this.dateTimeInputDate.setDate(
+        this.dateTimeInputDate.getDate() + dateDelta,
+      ),
+    );
+
+    const spanElement = isDatePicker
+      ? this.span2.nativeElement
+      : this.span1.nativeElement;
+    spanElement.innerHTML = this.padValue(this.dateTimeInputDate.getDate());
+    this.setSpanSelection(spanElement);
+  }
+
+  private updateYear(isUp: boolean, isDatePicker: boolean): void {
+    const yearDelta = isUp ? 1 : -1;
+    this.dateTimeInputDate = new Date(
+      this.dateTimeInputDate.setFullYear(
+        this.dateTimeInputDate.getFullYear() + yearDelta,
+      ),
+    );
+
+    const spanElement = isDatePicker
+      ? this.span3.nativeElement
+      : this.span2.nativeElement;
+    spanElement.innerHTML = this.dateTimeInputDate
+      .getFullYear()
+      .toString()
+      .slice(-2);
+    this.setSpanSelection(spanElement);
+  }
+
+  private padValue(value: number): string {
+    return ('0' + value).slice(-2);
+  }
+
+  private handleTimePickerInput(isUp: boolean): void {
+    if (this.selectionInput === 0) this.updateHours(isUp);
+    else if (this.selectionInput === 1) this.updateMinutes(isUp);
+    else this.toggleAMPM();
+  }
+
+  private updateHours(isUp: boolean): void {
+    const hoursDelta = isUp ? 1 : -1;
+    let selectedHours = this.dateTimeInputDate.getHours() + hoursDelta;
+
+    // Handle 12-hour format with AM/PM
+    if (selectedHours === 0) selectedHours = 12; // 12 AM
+    if (selectedHours === -1) selectedHours = 11; // 11 PM
+    if (selectedHours === 13) selectedHours = 1; // 1 PM
+    if (selectedHours === 25) selectedHours = 1; // 1 AM
+
+    this.dateTimeInputDate = new Date(
+      this.dateTimeInputDate.setHours(selectedHours),
+    );
+
+    // Display 12-hour format
+    const displayHour = selectedHours > 12 ? selectedHours - 12 : selectedHours;
+    this.span1.nativeElement.innerHTML = this.padValue(displayHour);
+    this.setSpanSelection(this.span1.nativeElement);
+
+    this.span3.nativeElement.innerHTML = selectedHours >= 12 ? 'PM' : 'AM';
+
+    this.markAsTouched();
+  }
+
+  private updateMinutes(isUp: boolean): void {
+    const minutesDelta = isUp ? 1 : -1;
+    this.dateTimeInputDate = new Date(
+      this.dateTimeInputDate.setMinutes(
+        this.dateTimeInputDate.getMinutes() + minutesDelta,
+      ),
+    );
+
+    this.span2.nativeElement.innerHTML = this.padValue(
+      this.dateTimeInputDate.getMinutes(),
+    );
+    this.setSpanSelection(this.span2.nativeElement);
+
+    this.markAsTouched();
+  }
+
+  private toggleAMPM(): void {
+    this.span3.nativeElement.innerHTML =
+      this.span3.nativeElement.innerHTML === 'AM' ? 'PM' : 'AM';
+
+    const hoursToAdd = this.span3.nativeElement.innerHTML === 'AM' ? -12 : 12;
+    this.dateTimeInputDate = new Date(
+      this.dateTimeInputDate.setHours(
+        this.dateTimeInputDate.getHours() + hoursToAdd,
+      ),
+    );
+
+    this.setSpanSelection(this.span3.nativeElement);
+
+    this.markAsTouched();
+  }
+
+  public clearInput(event?: Event): void {
+    this.clearInputEvent.emit(true);
+    this.onChange('');
+    this.dateTimeInputDate = new Date();
+    this.dateTimeIntDate = new Date();
+    this.showDateInput = false;
+    this.resetDateTimeInputs();
+    this.markAsTouched();
+    this.handleCloseTooltip();
+
+    if (event) {
+      event.stopPropagation();
+    }
+  }
+
+  public resetDateTimeInputs(): void {
+    if (this.span1)
+      if (this.inputConfig.name === InputConfigNameStringEnum.DATE_PICKER) {
+        this.span1.nativeElement.innerHTML = 'mm';
+        this.span2.nativeElement.innerHTML = 'dd';
+        this.span3.nativeElement.innerHTML = 'yy';
+      } else if (
+        this.inputConfig.name ===
+        InputConfigNameStringEnum.DATE_PICKER_BANK_CARD
+      ) {
+        this.span1.nativeElement.innerHTML = 'mm';
+        this.span2.nativeElement.innerHTML = 'yy';
+      } else if (
+        this.inputConfig.name === InputConfigNameStringEnum.TIME_PICKER
+      ) {
+        this.span1.nativeElement.innerHTML = 'HH';
+        this.span2.nativeElement.innerHTML = 'MM';
+        this.span3.nativeElement.innerHTML = 'AM';
+      }
+
+    this.setTimePickerTime();
+    this.newInputChanged = true;
+    this.setIsFocusInput(false);
+    this.showDateInput = false;
+  }
+
+  public setTimePickerTime(): void {
+    if (this.inputConfig.name === InputConfigNameStringEnum.TIME_PICKER)
+      this.dateTimeInputDate = new Date(
+        moment().format('MM/DD/YYYY') +
+          (this.inputConfig?.isFromDate ? ' 12:15' : ' 12:00'),
+      );
+  }
+
+  public handleCloseTooltip(): void {
+    this.closeTooltip?.close();
+  }
+
+  public openPopover(event?: MouseEvent): void {
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    this.isFocusInput = true;
+    this.holder1.nativeElement.focus();
+    this.t2.toggle();
+  }
+
+  public ngOnDestroy() {
+    // Clear all timers
+    if (this.dateTimeMainTimer) {
+      clearTimeout(this.dateTimeMainTimer);
+    }
+    if (this.focusBlur) {
+      clearTimeout(this.focusBlur);
+    }
+    if (this.timeoutCleaner) {
+      clearTimeout(this.timeoutCleaner);
+    }
+
+    // Complete the destroy subject to unsubscribe from all observables
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}