carriera-intern 0.0.0 → 1.1.76

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

@@ -1,1559 +0,0 @@
-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();
-  }
-}