carriera-intern 1.1.88 → 1.1.90

package/fesm2022/carriera-intern.mjs

@@ -1,10 +1,10 @@
 import * as i1 from '@angular/forms';
-import { Validators, FormsModule, FormControl, ReactiveFormsModule, FormGroup } from '@angular/forms';
+import { Validators, FormsModule, FormControl, ReactiveFormsModule, NgControl, NG_VALIDATORS, FormGroup } from '@angular/forms';
 import * as i0 from '@angular/core';
-import { Pipe, input, output, signal, effect, Optional, Self, Component, HostListener, Directive, EventEmitter, Output, Input, computed, ViewChild, Injectable, inject, Inject, forwardRef, ViewContainerRef, Renderer2, DestroyRef, NgZone, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
+import { Pipe, input, output, signal, effect, Optional, Self, Component, HostListener, Directive, EventEmitter, Output, Input, computed, ViewChild, Injectable, inject, Inject, forwardRef, ViewContainerRef, DestroyRef, Injector, ElementRef, Renderer2, NgZone, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
 import * as i2 from '@ng-bootstrap/ng-bootstrap';
 import { NgbPopover, NgbTooltipModule, NgbDropdownModule, NgbTooltip, NgbPopoverModule, NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import * as i4 from 'angular-svg-icon';
+import * as i1$2 from 'angular-svg-icon';
 import { SvgIconComponent, AngularSvgIconModule } from 'angular-svg-icon';
 import * as i2$1 from '@angular/common';
 import { NgTemplateOutlet, CommonModule } from '@angular/common';
@@ -12,12 +12,13 @@ import { base64ToFile, ImageCropperComponent } from 'ngx-image-cropper';
 import { LottieComponent } from 'ngx-lottie';
 import * as pdfjsLib from 'pdfjs-dist';
 import * as i1$1 from '@angular/platform-browser';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import moment from 'moment';
 import { Subject, takeUntil, distinctUntilChanged as distinctUntilChanged$1, tap, filter, debounceTime, switchMap, of, catchError } from 'rxjs';
 import { distinctUntilChanged, takeUntil as takeUntil$1 } from 'rxjs/operators';
 import * as i3 from '@angular/cdk/scrolling';
 import { ScrollingModule, VIRTUAL_SCROLL_STRATEGY, CdkScrollable } from '@angular/cdk/scrolling';
-import * as i1$2 from '@angular/cdk/clipboard';
+import * as i1$3 from '@angular/cdk/clipboard';
 
 /**
  * Creates a validator that ignores validation rules when the control is autofilled.
@@ -6615,7 +6616,7 @@ class CaCustomDatetimePickersComponent {
         this.outputType[2] = this.timeMinutes[this.scrollTypes.minutesScroll];
         this.outputType[4] = this.timeOfDay[this.scrollTypes.pmAmScroll];
         this.selectedDateTime = this.createStringFromOutput();
-        let currentDate = moment().format('MM/DD/YYYY');
+        let currentDate = moment().format('MM/DD/YY');
         // this.calendarService.dateChanged.next(
         //     new Date(currentDate + ' ' + this.selectedDateTime)
         // );
@@ -6623,7 +6624,7 @@ class CaCustomDatetimePickersComponent {
     }
     setDefaultTime(event) {
         event?.stopPropagation();
-        let currentDate = moment().format('MM/DD/YYYY');
+        let currentDate = moment().format('MM/DD/YY');
         //this.calendarService.dateChanged.next(new Date(currentDate + ' 08:00'));
         this.closePopover.emit(new Date(currentDate + ' 08:00'));
     }
@@ -6738,1341 +6739,1025 @@ var InputConfigNameStringEnum;
     InputConfigNameStringEnum["ADDRESS"] = "Address";
 })(InputConfigNameStringEnum || (InputConfigNameStringEnum = {}));
 
-var eGeneralActions;
-(function (eGeneralActions) {
-    eGeneralActions["ADD"] = "Add";
-    eGeneralActions["ADD_LOWERCASE"] = "add";
-    eGeneralActions["ADD_NEW_ITEM"] = "Add New Item";
-    eGeneralActions["UPDATE"] = "Update";
-    eGeneralActions["UPDATE_LOWERCASE"] = "update";
-    eGeneralActions["DELETE"] = "Delete";
-    eGeneralActions["DELETE_LOWERCASE"] = "delete";
-    eGeneralActions["EDIT"] = "Edit";
-    eGeneralActions["EDIT_LOWERCASE"] = "edit";
-    eGeneralActions["EDIT_UPPERCASE"] = "EDIT";
-    eGeneralActions["SAVE"] = "Save";
-    eGeneralActions["SAVE_LOWERCASE"] = "save";
-    eGeneralActions["CANCEL"] = "Cancel";
-    eGeneralActions["CANCEL_LOWERCASE"] = "cancel";
-    eGeneralActions["ENTER"] = "Enter";
-    eGeneralActions["ESCAPE"] = "Escape";
-    eGeneralActions["CONFIRM"] = "Confirm";
-    eGeneralActions["CONFIRM_LOWERCASE"] = "confirm";
-    eGeneralActions["SET"] = "Set";
-    eGeneralActions["SET_LOWERCASE"] = "set";
-    eGeneralActions["REMOVE"] = "Remove";
-    eGeneralActions["REMOVE_LOWERCASE"] = "remove";
-    eGeneralActions["SELECT"] = "Select";
-    eGeneralActions["SELECT_LOWERCASE"] = "select";
-    eGeneralActions["SEARCH"] = "Search";
-    eGeneralActions["SEARCH_LOWERCASE"] = "search";
-    eGeneralActions["SELECT_ALL"] = "Select All";
-    eGeneralActions["SELECT_REMAINING"] = "Select Remaining";
-    eGeneralActions["CLEAR_SELECTED"] = "Clear Selected";
-    eGeneralActions["ACTIVATE"] = "Activate";
-    eGeneralActions["ACTIVATE_LOWERCASE"] = "activate";
-    eGeneralActions["DEACTIVATE"] = "deactivate";
-    eGeneralActions["DEACTIVATE_LOWERCASE"] = "deactivate";
-    eGeneralActions["CLOSE"] = "Close";
-    eGeneralActions["CLOSE_LOWERCASE"] = "close";
-    eGeneralActions["CLOSE_UPPERCASE"] = "CLOSE";
-    eGeneralActions["OPEN"] = "Open";
-    eGeneralActions["OPEN_LOWERCASE"] = "open";
-    eGeneralActions["NEXT"] = "Next";
-    eGeneralActions["NEXT_LOWERCASE"] = "next";
-    eGeneralActions["PREVIOUS"] = "Previous";
-    eGeneralActions["PREVIOUS_LOWERCASE"] = "previous";
-    eGeneralActions["CLEAR"] = "Clear";
-    eGeneralActions["CLEAR_LOWERCASE"] = "clear";
-    eGeneralActions["CLEAR_ALL"] = "Clear All";
-    eGeneralActions["SHOW_MORE"] = "show more";
-    eGeneralActions["OPEN_MODAL"] = "open-modal";
-    eGeneralActions["EXPAND"] = "Expand";
-    eGeneralActions["EXPAND_LOWERCASE"] = "expand";
-    eGeneralActions["EXPAND_UPPERCASE"] = "EXPAND";
-    eGeneralActions["COLLAPSE"] = "Collapse";
-    eGeneralActions["COLLAPSE_LOWERCASE"] = "collapse";
-    eGeneralActions["COLLAPSE_UPPERCASE"] = "COLLAPSE";
-    eGeneralActions["SORT_BY"] = "Sort By";
-    eGeneralActions["COPY"] = "Copy";
-    eGeneralActions["COPIED"] = "Copied";
-})(eGeneralActions || (eGeneralActions = {}));
-
-class CaiInputDatetimePickerComponent {
-    superControl;
-    calendarService;
-    id = '';
-    inputConfig;
-    formFormat;
-    forceInvalidStyling = false;
-    clearInputEvent = new EventEmitter();
-    blurInputEvent = new EventEmitter();
-    dateTimePopover;
-    t2;
-    showDateInput = false;
-    dateTimeInputDate = new Date();
-    dateTimeIntDate = new Date();
-    selectionInput = -1;
-    // Timers
-    dateTimeMainTimer;
-    focusBlur;
-    timeoutCleaner;
-    justEnteredDatePicker = false;
-    // Component properties
-    eGeneralActions = eGeneralActions;
-    isTouchedInput = false;
-    isFocusInput = false;
-    preventBlur = false;
-    valueAfterWriteValue;
-    // Date
-    newInputChanged = false;
-    isDisabled = computed(() => this.inputConfig.isDisabled || this.getSuperControl?.disabled, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
-    // Outputs
-    selectLastOneForSelectionEmitter = new EventEmitter();
-    selectLastOneAfterMouseUpEmitter = new EventEmitter();
-    onDatePasteEmitter = new EventEmitter();
-    onFocusEmitter = new EventEmitter();
-    changeSelectionEmmiter = new EventEmitter();
-    setSelectionEmmiter = new EventEmitter();
-    // View Children
-    span1;
-    span2;
-    span3;
-    holder1;
-    closeTooltip;
-    // Private
-    destroy$ = new Subject();
-    constructor(superControl, calendarService) {
-        this.superControl = superControl;
-        this.calendarService = calendarService;
-        this.superControl.valueAccessor = this;
-    }
-    ngOnInit() { }
-    // Control Value Accessor
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    isPopoverShown = false;
-    onChange(_) { }
-    onTouched = () => { };
-    writeValue(obj) {
-        if (obj)
-            this.setTimeDateInput(obj, true);
+class InputDatetimeDateInputHelper {
+    static DATE_PLACEHOLDERS = ['MM', 'DD', 'YY'];
+    static DATE_PART_LENGTHS = [2, 2, 2];
+    static isValidDatePartIndex(highlightedPart) {
+        return (highlightedPart === 0 || highlightedPart === 1 || highlightedPart === 2);
+    }
+    static getNormalizedDatePart(part, index) {
+        const placeholder = this.DATE_PLACEHOLDERS[index];
+        const maxLength = this.DATE_PART_LENGTHS[index];
+        if (!part)
+            return placeholder;
+        const trimmed = part.slice(0, maxLength);
+        return trimmed + placeholder.slice(trimmed.length);
+    }
+    static parseDateParts(currentValue) {
+        if (!currentValue) {
+            return [...this.DATE_PLACEHOLDERS];
+        }
+        const [month, day, year] = currentValue.split('/');
+        return [
+            this.getNormalizedDatePart(month, 0),
+            this.getNormalizedDatePart(day, 1),
+            this.getNormalizedDatePart(year, 2),
+        ];
     }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
+    static composeDateValue(parts) {
+        return `${parts[0]}/${parts[1]}/${parts[2]}`;
+    }
+    static normalizeEmptyDateValue(parts) {
+        const isCompletelyEmpty = parts[0] === this.DATE_PLACEHOLDERS[0] &&
+            parts[1] === this.DATE_PLACEHOLDERS[1] &&
+            parts[2] === this.DATE_PLACEHOLDERS[2];
+        return isCompletelyEmpty ? null : this.composeDateValue(parts);
+    }
+    static buildDatePartFromDigits(digits, partIndex) {
+        const maxLength = this.DATE_PART_LENGTHS[partIndex];
+        const placeholder = this.DATE_PLACEHOLDERS[partIndex];
+        const slicedDigits = digits.slice(0, maxLength);
+        if (slicedDigits.length === maxLength) {
+            if (partIndex === 0) {
+                const clampedMonth = Math.min(Number(slicedDigits), 12);
+                return String(clampedMonth).padStart(2, '0');
+            }
+            if (partIndex === 1) {
+                const clampedDay = Math.min(Number(slicedDigits), 31);
+                return String(clampedDay).padStart(2, '0');
+            }
+        }
+        return slicedDigits + placeholder.slice(slicedDigits.length);
+    }
+    static isDatePartFull(part, partIndex) {
+        return (part.length === this.DATE_PART_LENGTHS[partIndex] && /^\d+$/.test(part));
+    }
+    static getDatePartEnteredLength(part, partIndex) {
+        const placeholder = this.DATE_PLACEHOLDERS[partIndex];
+        const maxLength = this.DATE_PART_LENGTHS[partIndex];
+        const normalizedPart = this.getNormalizedDatePart(part, partIndex);
+        let enteredLength = 0;
+        for (let i = 0; i < maxLength; i += 1) {
+            if (normalizedPart[i] === placeholder[i])
+                break;
+            enteredLength += 1;
+        }
+        return enteredLength;
     }
-    blurInput() {
-        this.isFocusInput = false;
-        this.isPopoverShown = false;
-        this.t2.close();
-        this.onTouched();
-        this.blurInputEvent.emit(true);
-        // Datepicker
-        this.focusBlur = setTimeout(() => {
-            this.blurOnDateTime();
-        }, 0);
+    static isLeapYear(year) {
+        if (year % 400 === 0)
+            return true;
+        if (year % 100 === 0)
+            return false;
+        return year % 4 === 0;
     }
-    preventInput(event) {
-        // 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 = '';
+    static getMonthMaxDay(month, year) {
+        switch (month) {
+            case 2:
+                if (year === undefined)
+                    return 29;
+                return this.isLeapYear(year) ? 29 : 28;
+            case 4:
+            case 6:
+            case 9:
+            case 11:
+                return 30;
+            default:
+                return 31;
         }
     }
-    ngAfterViewInit() {
-        if (this.valueAfterWriteValue) {
-            this.setTimeDateInput(this.valueAfterWriteValue);
+    static enforceDayLimitByMonth(parts) {
+        const monthPart = parts[0];
+        const dayPart = parts[1];
+        const yearPart = parts[2];
+        if (!this.isDatePartFull(monthPart, 0) ||
+            !this.isDatePartFull(dayPart, 1)) {
+            return;
         }
-        else {
-            this.setTimePickerTime();
+        const month = Number(monthPart);
+        const day = Number(dayPart);
+        const resolvedYear = this.isDatePartFull(yearPart, 2)
+            ? 2000 + Number(yearPart)
+            : undefined;
+        const monthMaxDay = this.getMonthMaxDay(month, resolvedYear);
+        if (day > monthMaxDay) {
+            parts[1] = String(monthMaxDay).padStart(2, '0');
         }
-        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
-    onDatePaste(event) {
-        event.preventDefault();
-        const pasteText = event.clipboardData?.getData('text')?.trim();
-        this.processPastedDate(pasteText);
-    }
-    processPastedDate(pasteText) {
-        // 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;
+    static handleDateDigitInput(currentValue, nextValueParts, highlightedPart, insertedCharacter) {
+        const isSingleDigit = /^\d$/.test(insertedCharacter);
+        if (!isSingleDigit) {
+            return {
+                nextValue: currentValue,
+                nextHighlightedPart: highlightedPart,
+            };
         }
-        // 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, noPreventDefault = false) {
-        const isPasting = (e.ctrlKey || e.metaKey) && e.key?.toLowerCase() === 'v';
-        if (e.key === 'Escape') {
-            this.justEnteredDatePicker = false;
-            this.holder1.nativeElement.blur();
-            return;
+        const isPartAlreadyFull = this.isDatePartFull(nextValueParts[highlightedPart], highlightedPart);
+        if (isPartAlreadyFull) {
+            nextValueParts[highlightedPart] = this.buildDatePartFromDigits(insertedCharacter, highlightedPart);
+            this.enforceDayLimitByMonth(nextValueParts);
+            return {
+                nextValue: this.normalizeEmptyDateValue(nextValueParts),
+                nextHighlightedPart: highlightedPart,
+            };
         }
-        if (isPasting) {
-            return;
+        const existingDigits = nextValueParts[highlightedPart].replace(/\D/g, '');
+        const nextDigits = `${existingDigits}${insertedCharacter}`;
+        nextValueParts[highlightedPart] = this.buildDatePartFromDigits(nextDigits, highlightedPart);
+        this.enforceDayLimitByMonth(nextValueParts);
+        const didFillCurrentPart = nextDigits.length >= this.DATE_PART_LENGTHS[highlightedPart];
+        const nextHighlightedPart = didFillCurrentPart
+            ? highlightedPart === 2
+                ? null
+                : highlightedPart + 1
+            : highlightedPart;
+        return {
+            nextValue: this.normalizeEmptyDateValue(nextValueParts),
+            nextHighlightedPart,
+        };
+    }
+    static handleDateInput(currentValue, event, highlightedPart) {
+        const inputEvent = event;
+        const inputType = inputEvent.inputType ?? '';
+        const insertedCharacter = inputEvent.data ?? '';
+        const isSingleDigit = /^\d$/.test(insertedCharacter);
+        if (highlightedPart === null && isSingleDigit) {
+            return {
+                nextValue: currentValue,
+                nextHighlightedPart: 0,
+            };
         }
-        // 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);
-            }
+        const effectiveHighlightedPart = highlightedPart;
+        if (inputType === 'deleteSoftLineBackward') {
+            return {
+                nextValue: null,
+                nextHighlightedPart: 0,
+            };
         }
-        else if (!this.isNumber(e)) {
-            if (!noPreventDefault) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
+        const isBackwardContentDelete = inputType === 'deleteContentBackward';
+        const isWordBackwardDelete = inputType === 'deleteWordLineBackward' ||
+            inputType === 'deleteWordBackward';
+        if (isBackwardContentDelete && effectiveHighlightedPart === null) {
+            return {
+                nextValue: currentValue,
+                nextHighlightedPart: 2,
+            };
         }
-        else {
-            if (!noPreventDefault) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-            if (this.selectionInput == -1) {
-                this.selectionInput = 0;
-            }
-            this.handleKeyboardInputs(e);
+        if (isWordBackwardDelete && effectiveHighlightedPart === null) {
+            return {
+                nextValue: currentValue,
+                nextHighlightedPart: 2,
+            };
         }
-    }
-    changeSelectionTwo(event, noPreventDefault = false) {
-        if (!noPreventDefault) {
-            event.preventDefault();
-            event.stopPropagation();
+        if (!this.isValidDatePartIndex(effectiveHighlightedPart)) {
+            return {
+                nextValue: currentValue,
+                nextHighlightedPart: effectiveHighlightedPart,
+            };
         }
-        const isNavigationKey = this.isNavigationKey(event);
-        const isSpecialTimePickerKey = this.selectionInput === 3 &&
-            this.inputConfig.name === InputConfigNameStringEnum.TIME_PICKER;
-        if (isNavigationKey || isSpecialTimePickerKey) {
-            event.preventDefault();
-            this.handleNavigationKey(event);
+        const nextValueParts = this.parseDateParts(currentValue);
+        if (isWordBackwardDelete) {
+            const currentEnteredLength = this.getDatePartEnteredLength(nextValueParts[effectiveHighlightedPart], effectiveHighlightedPart);
+            const targetPart = currentEnteredLength === 0 && effectiveHighlightedPart > 0
+                ? (effectiveHighlightedPart - 1)
+                : effectiveHighlightedPart;
+            nextValueParts[targetPart] = this.DATE_PLACEHOLDERS[targetPart];
+            return {
+                nextValue: this.normalizeEmptyDateValue(nextValueParts),
+                nextHighlightedPart: targetPart,
+            };
         }
-        else if (!this.isNumber(event)) {
-            if (!noPreventDefault)
-                event.preventDefault();
-            else {
-                if (!noPreventDefault)
-                    event.preventDefault();
-                if (this.selectionInput === -1)
-                    this.selectionInput = 0;
-                this.handleKeyboardInputs(event);
+        if (isBackwardContentDelete) {
+            const currentPart = nextValueParts[effectiveHighlightedPart];
+            const enteredLength = this.getDatePartEnteredLength(currentPart, effectiveHighlightedPart);
+            if (enteredLength > 0) {
+                const nextDigits = currentPart.slice(0, enteredLength - 1);
+                nextValueParts[effectiveHighlightedPart] = this.buildDatePartFromDigits(nextDigits, effectiveHighlightedPart);
+                return {
+                    nextValue: this.normalizeEmptyDateValue(nextValueParts),
+                    // Keep focus on current part even when deleting its final digit.
+                    // A second backspace (when empty) will move focus backward.
+                    nextHighlightedPart: effectiveHighlightedPart,
+                };
             }
+            return {
+                nextValue: this.normalizeEmptyDateValue(nextValueParts),
+                nextHighlightedPart: effectiveHighlightedPart > 0
+                    ? (effectiveHighlightedPart - 1)
+                    : 0,
+            };
         }
+        return this.handleDateDigitInput(currentValue, nextValueParts, effectiveHighlightedPart, insertedCharacter);
+    }
+}
+
+class InputDatetimeTimeInputHelper {
+    static TIME_PLACEHOLDERS = ['HH', 'MM', 'AM'];
+    static TIME_PART_LENGTHS = [2, 2, 2];
+    static isValidTimePartIndex(highlightedPart) {
+        return (highlightedPart === 0 || highlightedPart === 1 || highlightedPart === 2);
+    }
+    static getNormalizedTimePart(part, index) {
+        const placeholder = this.TIME_PLACEHOLDERS[index];
+        const maxLength = this.TIME_PART_LENGTHS[index];
+        if (!part)
+            return placeholder;
+        const trimmed = part.slice(0, maxLength).toUpperCase();
+        return trimmed + placeholder.slice(trimmed.length);
+    }
+    static parseTimeParts(currentValue) {
+        if (!currentValue) {
+            return [...this.TIME_PLACEHOLDERS];
+        }
+        const [timePart, ampmPart] = currentValue.split(' ');
+        const [hour, minute] = (timePart ?? '').split(':');
+        return [
+            this.getNormalizedTimePart(hour, 0),
+            this.getNormalizedTimePart(minute, 1),
+            this.getNormalizedTimePart(ampmPart, 2),
+        ];
     }
-    isNumber(evt) {
-        evt = evt ? evt : window.event;
-        let charCode = evt.which ? evt.which : evt.keyCode;
-        return ((charCode >= 48 && charCode <= 57) || (charCode >= 96 && charCode <= 105));
+    static composeTimeValue(parts) {
+        return `${parts[0]}:${parts[1]} ${parts[2]}`;
+    }
+    static normalizeEmptyTimeValue(parts) {
+        const isCompletelyEmpty = parts[0] === this.TIME_PLACEHOLDERS[0] &&
+            parts[1] === this.TIME_PLACEHOLDERS[1] &&
+            parts[2] === this.TIME_PLACEHOLDERS[2];
+        return isCompletelyEmpty ? null : this.composeTimeValue(parts);
+    }
+    static buildTimePartFromInput(input, partIndex) {
+        const maxLength = this.TIME_PART_LENGTHS[partIndex];
+        const placeholder = this.TIME_PLACEHOLDERS[partIndex];
+        const slicedInput = input.slice(0, maxLength).toUpperCase();
+        return slicedInput + placeholder.slice(slicedInput.length);
+    }
+    static getTimePartEnteredLength(part, partIndex) {
+        const placeholder = this.TIME_PLACEHOLDERS[partIndex];
+        const maxLength = this.TIME_PART_LENGTHS[partIndex];
+        const normalizedPart = this.getNormalizedTimePart(part, partIndex);
+        let enteredLength = 0;
+        for (let i = 0; i < maxLength; i += 1) {
+            if (normalizedPart[i] === placeholder[i])
+                break;
+            enteredLength += 1;
+        }
+        return enteredLength;
     }
-    isNavigationKey(e) {
-        const navigationKeys = [37, 38, 39, 40, 8, 9, 46]; // Arrow keys, Backspace, Tab, Delete
-        return navigationKeys.includes(e.keyCode);
+    static clamp(value, min, max) {
+        return Math.min(Math.max(value, min), max);
     }
-    onFocus(event) {
-        this.onFocusEmitter.emit(event);
-    }
-    closePopover(date) {
-        if (date) {
-            this.setTimeDateInput(date);
-        }
-        this.t2?.close();
-        this.blurInputEvent.emit(true);
-    }
-    handleFocusInput(e) {
-        const event = e;
-        if (!this.isDisabled()) {
-            clearTimeout(this.dateTimeMainTimer);
-            clearTimeout(this.focusBlur);
-            this.showDateInput = true;
-            if ((this.selectionInput === -1 &&
-                event?.target?.nodeName === 'INPUT') ||
-                event?.relatedTarget?.nodeName === 'INPUT' ||
-                event?.relatedTarget === null) {
-                this.preventBlur = true;
-                this.holder1.nativeElement.focus();
-                this.setSpanSelection(this.holder1.nativeElement);
-                this.selectionInput = -1;
-            }
-            this.t2.toggle();
-        }
-    }
-    setSpanSelection(element) {
-        let range;
-        let selection;
-        if (window.getSelection && document.createRange) {
-            selection = window.getSelection();
-            range = document.createRange();
-            range.selectNodeContents(element);
-            selection?.removeAllRanges();
-            selection?.addRange(range);
-        }
-    }
-    setSelection(event) {
-        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;
+    static to12HourAndMeridiem(hour24, currentMeridiem) {
+        const normalizedHour = this.clamp(hour24, 0, 23);
+        const safeMeridiem = currentMeridiem === 'PM' ? 'PM' : 'AM';
+        if (normalizedHour === 0) {
+            return { hour12: '12', meridiem: 'AM' };
         }
-        clearTimeout(this.dateTimeMainTimer);
-        if (element.classList.contains('main')) {
-            this.selectionInput = selectionInput;
-            this.setSpanSelection(element);
+        if (normalizedHour === 12) {
+            return { hour12: '12', meridiem: safeMeridiem };
         }
-        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
-    blurOnDateTime() {
-        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);
-    }
-    onEditableFocus(event) {
-        if (this.isDisabled()) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.holder1.nativeElement.blur();
-            return;
+        if (normalizedHour > 12) {
+            return {
+                hour12: String(normalizedHour - 12).padStart(2, '0'),
+                meridiem: 'PM',
+            };
         }
-        event.preventDefault();
-        event.stopPropagation();
-        if (this.isFocusInput)
-            return;
-        this.onPopoverClick();
+        return { hour12: String(normalizedHour).padStart(2, '0'), meridiem: 'AM' };
     }
-    onPopoverClick(event) {
-        if (this.isDisabled())
-            return;
-        if (event) {
-            event.preventDefault();
-            event.stopPropagation();
+    static handleTimeDigitInput(currentValue, nextValueParts, highlightedPart, insertedCharacter) {
+        const isSingleDigit = /^\d$/.test(insertedCharacter);
+        if (!isSingleDigit) {
+            return {
+                nextValue: currentValue,
+                nextHighlightedPart: highlightedPart,
+            };
         }
-        this.isFocusInput = true;
-        clearTimeout(this.dateTimeMainTimer);
-        clearTimeout(this.focusBlur);
-        this.holder1.nativeElement.focus();
-        this.selectionInput = -1;
-        this.setSpanSelection(this.holder1.nativeElement);
-    }
-    onPopoverShown() {
-        this.isPopoverShown = true;
-    }
-    onPopoverHidden() {
-        this.isPopoverShown = false;
+        if (highlightedPart === 2) {
+            return {
+                nextValue: currentValue,
+                nextHighlightedPart: highlightedPart,
+            };
+        }
+        const currentPart = nextValueParts[highlightedPart];
+        const isPartAlreadyFull = currentPart.length === this.TIME_PART_LENGTHS[highlightedPart] &&
+            /^\d+$/.test(currentPart);
+        const existingDigits = currentPart.replace(/\D/g, '');
+        const nextDigits = isPartAlreadyFull
+            ? insertedCharacter
+            : `${existingDigits}${insertedCharacter}`;
+        if (highlightedPart === 0) {
+            if (nextDigits.length < this.TIME_PART_LENGTHS[0]) {
+                nextValueParts[0] = this.buildTimePartFromInput(nextDigits, 0);
+                return {
+                    nextValue: this.normalizeEmptyTimeValue(nextValueParts),
+                    nextHighlightedPart: 0,
+                };
+            }
+            const clampedHour = this.clamp(Number(nextDigits), 0, 23);
+            const { hour12, meridiem } = this.to12HourAndMeridiem(clampedHour, nextValueParts[2]);
+            nextValueParts[0] = hour12;
+            nextValueParts[2] = meridiem;
+            return {
+                nextValue: this.normalizeEmptyTimeValue(nextValueParts),
+                nextHighlightedPart: 1,
+            };
+        }
+        if (nextDigits.length < this.TIME_PART_LENGTHS[1]) {
+            nextValueParts[1] = this.buildTimePartFromInput(nextDigits, 1);
+            return {
+                nextValue: this.normalizeEmptyTimeValue(nextValueParts),
+                nextHighlightedPart: 1,
+            };
+        }
+        const clampedMinute = this.clamp(Number(nextDigits), 0, 59);
+        nextValueParts[1] = String(clampedMinute).padStart(2, '0');
+        return {
+            nextValue: this.normalizeEmptyTimeValue(nextValueParts),
+            nextHighlightedPart: 2,
+        };
     }
-    setTimeDateInput(date, hasValue) {
-        let text, dateFormat, timeFormat;
-        if (this.inputConfig.name === InputConfigNameStringEnum.DATE_PICKER) {
-            text = moment(new Date(date)).format('MM/DD/YY');
-            dateFormat = text.split('/');
+    static handleTimeInput(currentValue, event, highlightedPart) {
+        const inputEvent = event;
+        const inputType = inputEvent.inputType ?? '';
+        const insertedCharacter = inputEvent.data ?? '';
+        const isSingleDigit = /^\d$/.test(insertedCharacter);
+        if (highlightedPart === null && isSingleDigit) {
+            return {
+                nextValue: currentValue,
+                nextHighlightedPart: 0,
+            };
         }
-        else if (this.inputConfig.name === InputConfigNameStringEnum.DATE_PICKER_BANK_CARD) {
-            text = moment(new Date(date)).format('MM/DD/YY');
-            dateFormat = text.split('/');
+        const effectiveHighlightedPart = highlightedPart;
+        if (inputType === 'deleteSoftLineBackward') {
+            return {
+                nextValue: null,
+                nextHighlightedPart: 0,
+            };
         }
-        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();
+        const isBackwardContentDelete = inputType === 'deleteContentBackward';
+        const isWordBackwardDelete = inputType === 'deleteWordLineBackward' ||
+            inputType === 'deleteWordBackward';
+        if ((isBackwardContentDelete || isWordBackwardDelete) &&
+            effectiveHighlightedPart === null) {
+            return {
+                nextValue: currentValue,
+                nextHighlightedPart: 2,
+            };
         }
-        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);
+        if (!this.isValidTimePartIndex(effectiveHighlightedPart)) {
+            return {
+                nextValue: currentValue,
+                nextHighlightedPart: effectiveHighlightedPart,
+            };
         }
-        this.showDateInput = true;
-    }
-    markAsTouched() {
-        if (this.getSuperControl && !this.getSuperControl.touched) {
-            this.onTouched();
+        const nextValueParts = this.parseTimeParts(currentValue);
+        if (isWordBackwardDelete) {
+            const currentEnteredLength = this.getTimePartEnteredLength(nextValueParts[effectiveHighlightedPart], effectiveHighlightedPart);
+            const targetPart = currentEnteredLength === 0 && effectiveHighlightedPart > 0
+                ? (effectiveHighlightedPart - 1)
+                : effectiveHighlightedPart;
+            nextValueParts[targetPart] = this.TIME_PLACEHOLDERS[targetPart];
+            return {
+                nextValue: this.normalizeEmptyTimeValue(nextValueParts),
+                nextHighlightedPart: targetPart,
+            };
         }
-    }
-    handleKeyboardInputs(e, isRestart) {
-        const spanOneValue = isNaN(this.span1.nativeElement.innerHTML) || this.newInputChanged
-            ? undefined
-            : parseInt(this.span1.nativeElement.innerHTML);
-        const span2Value = isNaN(this.span2.nativeElement.innerHTML) || this.newInputChanged
-            ? undefined
-            : parseInt(this.span2.nativeElement.innerHTML);
-        let span3Value;
-        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);
-                    }
-                }
+        if (isBackwardContentDelete) {
+            const currentPart = nextValueParts[effectiveHighlightedPart];
+            const enteredLength = this.getTimePartEnteredLength(currentPart, effectiveHighlightedPart);
+            if (enteredLength > 0) {
+                const nextInput = currentPart.slice(0, enteredLength - 1);
+                nextValueParts[effectiveHighlightedPart] = this.buildTimePartFromInput(nextInput, effectiveHighlightedPart);
+                return {
+                    nextValue: this.normalizeEmptyTimeValue(nextValueParts),
+                    // Keep focus on current part when deleting its final character.
+                    // A second backspace (while empty) then moves focus backward.
+                    nextHighlightedPart: effectiveHighlightedPart,
+                };
             }
+            return {
+                nextValue: this.normalizeEmptyTimeValue(nextValueParts),
+                nextHighlightedPart: effectiveHighlightedPart > 0
+                    ? (effectiveHighlightedPart - 1)
+                    : 0,
+            };
         }
-        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();
-                }
+        if (effectiveHighlightedPart === 2) {
+            const uppercaseCharacter = insertedCharacter.toUpperCase();
+            if (uppercaseCharacter === 'A' || uppercaseCharacter === 'P') {
+                nextValueParts[2] = uppercaseCharacter === 'A' ? 'AM' : 'PM';
+                return {
+                    nextValue: this.normalizeEmptyTimeValue(nextValueParts),
+                    nextHighlightedPart: null,
+                };
             }
+            return {
+                nextValue: currentValue,
+                nextHighlightedPart: effectiveHighlightedPart,
+            };
         }
-        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);
-                    }
-                }
-            }
+        return this.handleTimeDigitInput(currentValue, nextValueParts, effectiveHighlightedPart, insertedCharacter);
+    }
+}
+
+class InputDatetimeFormatHelper {
+    static MIN_VALID_YEAR = 1900;
+    static isDateControlValueValid(value) {
+        const parsedDate = this.toDate(value, true);
+        return !!parsedDate && parsedDate.getFullYear() >= this.MIN_VALID_YEAR;
+    }
+    static isTimeControlValueValid(value) {
+        if (typeof value !== 'string') {
+            return false;
+        }
+        return this.parseTimeControlValue(value) !== null;
+    }
+    static parseDateControlValue(value) {
+        const dateFormats = [
+            'MM/DD/YY',
+            'M/D/YY',
+            'MM/DD/YYYY',
+            'M/D/YYYY',
+            'YYYY-MM-DD',
+        ];
+        const canonicalDate = value.trim().split('T')[0];
+        const parsedDate = moment(canonicalDate, dateFormats, true);
+        if (parsedDate.isValid() && parsedDate.year() >= this.MIN_VALID_YEAR) {
+            return this.buildLocalDate(parsedDate);
+        }
+        const fallback = moment(value, moment.ISO_8601, true);
+        return fallback.isValid() && fallback.year() >= this.MIN_VALID_YEAR
+            ? this.buildLocalDate(fallback)
+            : null;
+    }
+    static parseTimeControlValue(value) {
+        const parsedTime = moment(value.trim(), ['HH:mm', 'H:mm', 'hh:mm A', 'h:mm A', 'HH:mm A'], true);
+        if (!parsedTime.isValid())
+            return null;
+        const now = new Date();
+        return new Date(now.getFullYear(), now.getMonth(), now.getDate(), parsedTime.hour(), parsedTime.minute(), 0, 0);
+    }
+    static buildLocalDate(value) {
+        // setFullYear avoids JS Date's 1900 offset for years 00-99.
+        const normalizedDate = new Date(0);
+        normalizedDate.setFullYear(value.year(), value.month(), value.date());
+        normalizedDate.setHours(12, 0, 0, 0);
+        return normalizedDate;
+    }
+    static handleInput(currentValue, event, highlightedPart, isDatePicker) {
+        if (isDatePicker) {
+            return InputDatetimeDateInputHelper.handleDateInput(currentValue, event, highlightedPart);
+        }
+        else {
+            return InputDatetimeTimeInputHelper.handleTimeInput(currentValue, event, highlightedPart);
         }
     }
-    selectSpanByTabIndex(indx, changeTab) {
-        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);
+    static toDate(value, isDatePicker) {
+        if (value instanceof Date && !Number.isNaN(value.getTime())) {
+            return value;
+        }
+        if (typeof value === 'number') {
+            const parsedDate = new Date(value);
+            if (!Number.isNaN(parsedDate.getTime()))
+                return parsedDate;
+        }
+        if (typeof value === 'string') {
+            const parsedDate = isDatePicker
+                ? this.parseDateControlValue(value)
+                : this.parseTimeControlValue(value);
+            if (parsedDate)
+                return parsedDate;
+        }
+        return null;
+    }
+    static isControlValueValid(value, isDatePicker) {
+        if (value === null || value === undefined || value === '') {
+            return true;
+        }
+        return isDatePicker
+            ? this.isDateControlValueValid(value)
+            : this.isTimeControlValueValid(value);
+    }
+    static toControlValue(date, isDatePicker) {
+        return isDatePicker
+            ? moment(date).format('MM/DD/YY')
+            : moment(date).format('hh:mm A');
+    }
+    static toFormValue(date, isDatePicker) {
+        return isDatePicker
+            ? moment(date).format('MM/DD/YY')
+            : moment(date).format('HH:mm');
+    }
+    static toCurrentValue(value, isDatePicker) {
+        const dateValue = this.toDate(value, isDatePicker);
+        if (!dateValue)
+            return null;
+        return this.toControlValue(dateValue, isDatePicker);
+    }
+    static getDisplayedValues(value, isDatePicker) {
+        let displayedValues = {
+            month: 'MM',
+            day: 'DD',
+            year: 'YY',
+            minute: 'MM',
+            hour: 'HH',
+            ampm: 'AM',
+        };
+        if (!value)
+            return displayedValues;
+        if (isDatePicker) {
+            displayedValues.month = value?.slice(0, 2) ?? 'MM';
+            displayedValues.day = value?.slice(3, 5) ?? 'DD';
+            displayedValues.year = value?.slice(6, 8) ?? 'YY';
+        }
+        else {
+            displayedValues.hour = value?.slice(0, 2) ?? 'HH';
+            displayedValues.minute = value?.slice(3, 5) ?? 'MM';
+            displayedValues.ampm = value?.slice(6, 8) ?? 'AM';
         }
-        // Ensure the holder1 element stays focused
-        this.holder1.nativeElement.focus();
-        if (changeTab)
-            this.newInputChanged = true;
+        return displayedValues;
     }
-    handleNavigationKey(event) {
-        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;
+}
+
+class InputDatetimePasteHelper {
+    static MIN_VALID_YEAR = 1900;
+    static buildLocalDate(value) {
+        const normalizedDate = new Date(0);
+        normalizedDate.setFullYear(value.year(), value.month(), value.date());
+        normalizedDate.setHours(12, 0, 0, 0);
+        return normalizedDate;
+    }
+    static parseDateInput(rawValue) {
+        const normalizedValue = rawValue.trim();
+        if (!normalizedValue)
+            return null;
+        const compactDigits = normalizedValue.replace(/\D/g, '');
+        const dateFormats = [
+            'MM/DD/YYYY',
+            'M/D/YYYY',
+            'MM-DD-YYYY',
+            'M-D-YYYY',
+            'MM.DD.YYYY',
+            'M.D.YYYY',
+            'YYYY-MM-DD',
+            'YYYY/M/D',
+            'YYYY.MM.DD',
+            'MM/DD/YY',
+            'M/D/YY',
+            'YYYYMMDD',
+            'MMDDYYYY',
+        ];
+        const candidates = [];
+        candidates.push(moment(normalizedValue, dateFormats, true));
+        if (/^\d{8}$/.test(compactDigits)) {
+            candidates.push(moment(compactDigits, 'YYYYMMDD', true));
+            candidates.push(moment(compactDigits, 'MMDDYYYY', true));
+        }
+        candidates.push(moment(normalizedValue, moment.ISO_8601, true));
+        const validCandidate = candidates.find((candidate) => candidate.isValid() && candidate.year() >= this.MIN_VALID_YEAR);
+        return validCandidate ? this.buildLocalDate(validCandidate) : null;
+    }
+    static parseTimeInput(rawValue) {
+        const normalizedValue = rawValue.trim().replace(/\./g, ':').toUpperCase();
+        if (!normalizedValue)
+            return null;
+        const compactDigits = normalizedValue.replace(/\D/g, '');
+        const timeFormats = [
+            'HH:mm',
+            'H:mm',
+            'HHmm',
+            'Hmm',
+            'hh:mm A',
+            'h:mm A',
+            'hh:mmA',
+            'h:mmA',
+            'h A',
+            'ha',
+            'hA',
+        ];
+        const candidates = [];
+        candidates.push(moment(normalizedValue, timeFormats, true));
+        if (/^\d{3,4}$/.test(compactDigits)) {
+            candidates.push(moment(compactDigits, 'Hmm', true));
+            candidates.push(moment(compactDigits, 'HHmm', true));
+        }
+        const validCandidate = candidates.find((candidate) => candidate.isValid());
+        if (!validCandidate)
+            return null;
+        const now = new Date();
+        return new Date(now.getFullYear(), now.getMonth(), now.getDate(), validCandidate.hour(), validCandidate.minute(), 0, 0);
+    }
+    static parsePastedValue(rawValue, isDatePicker) {
+        return isDatePicker
+            ? this.parseDateInput(rawValue)
+            : this.parseTimeInput(rawValue);
+    }
+}
+
+class CaiInputDatetimePickerComponent {
+    inputListener;
+    mainPopover;
+    clearButtonTooltip;
+    iconContainer;
+    dropdownIcon;
+    destroyRef = inject(DestroyRef);
+    injector = inject(Injector);
+    calendarService = inject(CalendarDateTimePickerService);
+    onValidatorChange = () => { };
+    superControl = null;
+    id = '';
+    inputConfig;
+    forceInvalidStyling = false;
+    clearInputEvent = new EventEmitter();
+    blurInputEvent = new EventEmitter();
+    onFocusEmitter = new EventEmitter();
+    isDisabled = computed(() => this.inputConfig.isDisabled || this.getSuperControl?.disabled, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    isDatePicker = computed(() => this.inputConfig?.name === InputConfigNameStringEnum.DATE_PICKER ||
+        this.inputConfig?.name ===
+            InputConfigNameStringEnum.DATE_PICKER_BANK_CARD, ...(ngDevMode ? [{ debugName: "isDatePicker" }] : []));
+    isInputFocused = signal(false, ...(ngDevMode ? [{ debugName: "isInputFocused" }] : []));
+    highlightedPart = signal(null, ...(ngDevMode ? [{ debugName: "highlightedPart" }] : []));
+    dateTime = signal(new Date(), ...(ngDevMode ? [{ debugName: "dateTime" }] : []));
+    currentValue = signal(null, ...(ngDevMode ? [{ debugName: "currentValue" }] : []));
+    isFocusedThroughPopoverToggle = signal(false, ...(ngDevMode ? [{ debugName: "isFocusedThroughPopoverToggle" }] : []));
+    isInputSelected = signal(false, ...(ngDevMode ? [{ debugName: "isInputSelected" }] : []));
+    displayedValues = computed(() => {
+        return (InputDatetimeFormatHelper.getDisplayedValues(this.currentValue(), this.isDatePicker()) ?? []);
+    }, ...(ngDevMode ? [{ debugName: "displayedValues" }] : []));
+    hasDate = computed(() => {
+        const currentValue = this.currentValue();
+        if (!currentValue)
+            return false;
+        return this.isDatePicker()
+            ? /^\d{2}\/\d{2}\/\d{2}$/.test(currentValue)
+            : /^\d{2}:\d{2}\s(?:AM|PM)$/.test(currentValue);
+    }, ...(ngDevMode ? [{ debugName: "hasDate" }] : []));
+    get getSuperControl() {
+        return this.superControl?.control ?? null;
+    }
+    get isRequired() {
+        return this.getSuperControl?.hasValidator(Validators.required);
+    }
+    constructor() {
+        this.initializeDateChangedListener();
+    }
+    ngOnInit() {
+        this.superControl = this.injector.get(NgControl, null);
+        if (this.superControl) {
+            this.superControl.valueAccessor = this;
         }
     }
-    handleDatePickerInput(isUp, isDatePicker) {
-        if (this.selectionInput === 0)
-            this.updateMonth(isUp);
-        else if (this.selectionInput === 1)
-            this.updateDate(isUp, isDatePicker);
-        else
-            this.updateYear(isUp, isDatePicker);
-    }
-    setDateTimeModel(direction) {
-        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);
+    registerDateChange(date) {
+        this.dateTime.set(date);
+        const isDatePicker = this.isDatePicker();
+        const nextCurrentValue = InputDatetimeFormatHelper.toControlValue(date, isDatePicker);
+        this.currentValue.set(nextCurrentValue);
+        this.onChange(InputDatetimeFormatHelper.toFormValue(date, isDatePicker));
+        this.onValidatorChange();
+    }
+    initializeDateChangedListener() {
+        // Date-picker changes (day/month/year selection) come from calendarService.dateChanged.
+        effect(() => {
+            this.calendarService.dateChanged
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe((date) => {
+                const dateTime = date && this.toDate(date);
+                if (dateTime) {
+                    this.registerDateChange(dateTime);
+                }
+                this.inputListener?.nativeElement?.blur();
+            });
+        });
+    }
+    toDate(value) {
+        return InputDatetimeFormatHelper.toDate(value, this.isDatePicker());
     }
-    moveSelectionRightOrTab(e) {
-        // 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);
+    moveHighlightedPartRight() {
+        if (this.highlightedPart() === null) {
+            this.highlightedPart.set(0);
+            return;
+        }
+        if (this.highlightedPart() === 2) {
+            this.highlightedPart.set(0);
+            return;
         }
+        this.highlightedPart.set((this.highlightedPart() ?? 0) + 1);
     }
-    formatCurrentField() {
-        if (this.selectionInput === -1)
+    moveHighlightedPartLeft() {
+        if (this.highlightedPart() === null) {
+            this.highlightedPart.set(0);
             return;
-        const currentSpan = this.selectionInput === 0
-            ? this.span1
-            : this.selectionInput === 1
-                ? this.span2
-                : this.span3;
-        if (!currentSpan)
+        }
+        if (this.highlightedPart() === 0) {
+            this.highlightedPart.set(2);
             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)));
-            }
-        }
-    }
-    setIsFocusInput(value) {
-        this.isFocusInput = value;
-    }
-    moveSelectionLeft() {
-        // Format current field before moving
-        this.formatCurrentField();
-        if (this.selectionInput > 0) {
-            this.selectionInput -= 1;
-            this.selectSpanByTabIndex(this.selectionInput, true);
-        }
-    }
-    updateMonth(isUp) {
-        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);
-    }
-    updateDate(isUp, isDatePicker) {
-        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);
-    }
-    updateYear(isUp, isDatePicker) {
-        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);
-    }
-    padValue(value) {
-        return ('0' + value).slice(-2);
-    }
-    handleTimePickerInput(isUp) {
-        if (this.selectionInput === 0)
-            this.updateHours(isUp);
-        else if (this.selectionInput === 1)
-            this.updateMinutes(isUp);
-        else
-            this.toggleAMPM();
-    }
-    updateHours(isUp) {
-        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();
+        }
+        this.highlightedPart.set((this.highlightedPart() ?? 2) - 1);
     }
-    updateMinutes(isUp) {
-        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();
+    closePopover() {
+        this.mainPopover.close();
+        this.highlightedPart.set(0);
     }
-    toggleAMPM() {
-        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();
+    openPopover() {
+        this.mainPopover.open();
+        this.highlightedPart.set(null);
+    }
+    markAsTouched() {
+        if (this.getSuperControl && !this.getSuperControl.touched) {
+            this.onTouched();
+        }
+    }
+    isTargetPopoverToggle(event) {
+        const target = event?.target;
+        const targetNode = target instanceof Node ? target : null;
+        return Boolean(targetNode &&
+            (this.iconContainer?.nativeElement?.contains(targetNode) ||
+                this.dropdownIcon?.nativeElement?.contains(targetNode)));
+    }
+    // Control Value Accessor
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    onChange(_) { }
+    onTouched = () => { };
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    validate(control) {
+        if (InputDatetimeFormatHelper.isControlValueValid(control.value, this.isDatePicker())) {
+            return null;
+        }
+        return { invalidDateTime: true };
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
+    }
+    writeValue(value) {
+        const parsedDate = this.toDate(value);
+        this.currentValue.set(parsedDate
+            ? InputDatetimeFormatHelper.toControlValue(parsedDate, this.isDatePicker())
+            : null);
+        this.dateTime.set(parsedDate ?? new Date());
+        this.onValidatorChange();
     }
     clearInput(event) {
         this.clearInputEvent.emit(true);
-        this.onChange('');
-        this.dateTimeInputDate = new Date();
-        this.dateTimeIntDate = new Date();
-        this.showDateInput = false;
-        this.resetDateTimeInputs();
+        this.currentValue.set(null);
+        this.dateTime.set(new Date());
+        this.onChange(null);
+        this.onValidatorChange();
         this.markAsTouched();
-        this.handleCloseTooltip();
+        if (!this.mainPopover.isOpen()) {
+            this.highlightedPart.set(0);
+        }
         if (event) {
             event.stopPropagation();
         }
     }
-    resetDateTimeInputs() {
-        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;
+    onInputFocus() {
+        this.isInputFocused.set(true);
+        if (!this.isFocusedThroughPopoverToggle()) {
+            this.highlightedPart.set(0);
+        }
+        this.onFocusEmitter.emit();
+    }
+    onInputBlur() {
+        this.isInputFocused.set(false);
+        this.isInputSelected.set(false);
+        this.isFocusedThroughPopoverToggle.set(false);
+        this.closePopover();
+        this.highlightedPart.set(null);
+        this.blurInputEvent.emit();
+    }
+    togglePopover() {
+        if (this.mainPopover.isOpen()) {
+            this.closePopover();
+        }
+        else {
+            this.openPopover();
+        }
+    }
+    focusInput(event) {
+        event?.stopPropagation();
+        event?.preventDefault();
+        this.isInputSelected.set(false);
+        const isTargetPopoverToggle = this.isTargetPopoverToggle(event);
+        if (isTargetPopoverToggle && !this.mainPopover.isOpen()) {
+            this.isFocusedThroughPopoverToggle.set(true);
+        }
+        this.inputListener?.nativeElement?.focus();
+    }
+    onPopoverDateChanged(date) {
+        // Time-picker changes (Set/Default actions) come from the closePopover output.
+        const dateTime = date && this.toDate(date);
+        if (dateTime) {
+            this.registerDateChange(dateTime);
+            this.inputListener?.nativeElement?.blur();
+        }
     }
-    setTimePickerTime() {
-        if (this.inputConfig.name === InputConfigNameStringEnum.TIME_PICKER)
-            this.dateTimeInputDate = new Date(moment().format('MM/DD/YYYY') +
-                (this.inputConfig?.isFromDate ? ' 12:15' : ' 12:00'));
+    highlightPart(event, part) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.focusInput();
+        this.closePopover();
+        this.highlightedPart.set(part);
     }
-    handleCloseTooltip() {
-        this.closeTooltip?.close();
+    onInputChange(event) {
+        if (this.mainPopover.isOpen()) {
+            this.closePopover();
+        }
+        if (this.isInputSelected()) {
+            this.currentValue.set(null);
+            this.dateTime.set(new Date());
+            this.onChange(null);
+            this.onValidatorChange();
+            this.markAsTouched();
+            this.isInputSelected.set(false);
+            this.highlightedPart.set(0);
+        }
+        const { nextValue, nextHighlightedPart } = InputDatetimeFormatHelper.handleInput(this.currentValue(), event, this.highlightedPart() ?? null, this.isDatePicker());
+        this.currentValue.set(nextValue);
+        const parsedDate = nextValue ? this.toDate(nextValue) : null;
+        if (parsedDate) {
+            this.dateTime.set(parsedDate);
+        }
+        this.onValidatorChange();
+        requestAnimationFrame(() => {
+            if (parsedDate) {
+                this.onChange(InputDatetimeFormatHelper.toFormValue(parsedDate, this.isDatePicker()));
+                return;
+            }
+            this.onChange(nextValue);
+        });
+        this.highlightedPart.set(nextHighlightedPart);
     }
-    openPopover(event) {
+    onInputSelect(event) {
         if (event) {
             event.preventDefault();
             event.stopPropagation();
         }
-        this.isFocusInput = true;
-        this.holder1.nativeElement.focus();
-        this.t2.toggle();
-    }
-    ngOnDestroy() {
-        // Clear all timers
-        if (this.dateTimeMainTimer) {
-            clearTimeout(this.dateTimeMainTimer);
+        if (this.isTargetPopoverToggle(event)) {
+            return;
         }
-        if (this.focusBlur) {
-            clearTimeout(this.focusBlur);
+        this.isInputSelected.set(true);
+        this.highlightedPart.set(null);
+    }
+    onInputPaste(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const pastedText = event.clipboardData?.getData('text') ?? '';
+        const isDatePicker = this.isDatePicker();
+        const parsedDate = InputDatetimePasteHelper.parsePastedValue(pastedText, isDatePicker);
+        if (!parsedDate) {
+            return;
         }
-        if (this.timeoutCleaner) {
-            clearTimeout(this.timeoutCleaner);
+        this.dateTime.set(parsedDate);
+        this.currentValue.set(InputDatetimeFormatHelper.toControlValue(parsedDate, isDatePicker));
+        this.highlightedPart.set(null);
+        this.mainPopover.close();
+        this.onValidatorChange();
+        requestAnimationFrame(() => {
+            this.onChange(InputDatetimeFormatHelper.toFormValue(parsedDate, isDatePicker));
+        });
+    }
+    onKeyDown(event) {
+        const isModifierPressed = event.altKey || event.metaKey;
+        const isCtrlOrCmdPressed = event.ctrlKey || event.metaKey;
+        const preventAndStop = () => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        switch (event.key) {
+            case 'ArrowLeft':
+                preventAndStop();
+                if (this.mainPopover.isOpen()) {
+                    this.closePopover();
+                    return;
+                }
+                this.moveHighlightedPartLeft();
+                return;
+            case 'ArrowRight':
+                preventAndStop();
+                if (this.mainPopover.isOpen()) {
+                    this.closePopover();
+                    return;
+                }
+                this.moveHighlightedPartRight();
+                return;
+            case 'ArrowUp':
+                preventAndStop();
+                if (isModifierPressed) {
+                    this.closePopover();
+                }
+                return;
+            case 'a': {
+                if (isCtrlOrCmdPressed) {
+                    preventAndStop();
+                    this.onInputSelect();
+                }
+                return;
+            }
+            case 'c': {
+                if (this.hasDate() && isCtrlOrCmdPressed) {
+                    preventAndStop();
+                    this.onInputSelect();
+                    navigator.clipboard.writeText(this.currentValue() ?? '');
+                }
+                return;
+            }
+            case 'Backspace':
+                if (this.isInputSelected()) {
+                    preventAndStop();
+                    this.clearInput();
+                    this.isInputSelected.set(false);
+                    this.highlightedPart.set(0);
+                }
+                return;
+            case 'Delete':
+                if (this.isInputSelected()) {
+                    preventAndStop();
+                    this.clearInput();
+                    this.isInputSelected.set(false);
+                    this.highlightedPart.set(0);
+                }
+                return;
+            case 'ArrowDown':
+                preventAndStop();
+                if (isModifierPressed) {
+                    this.openPopover();
+                }
+                return;
+            case 'Enter':
+                preventAndStop();
+                KeyboardNavigationHelper.focusNextInput(this.inputListener);
+                return;
+            case 'Escape':
+                preventAndStop();
+                this.inputListener?.nativeElement?.blur();
+                return;
+            default:
+                return;
         }
-        // Complete the destroy subject to unsubscribe from all observables
-        this.destroy$.next();
-        this.destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CaiInputDatetimePickerComponent, deps: [{ token: i1.NgControl, self: true }, { token: CalendarDateTimePickerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: CaiInputDatetimePickerComponent, isStandalone: true, selector: "cai-input-datetime-picker", inputs: { id: "id", inputConfig: "inputConfig", formFormat: "formFormat", forceInvalidStyling: "forceInvalidStyling" }, outputs: { clearInputEvent: "clear", blurInputEvent: "blurInput", selectLastOneForSelectionEmitter: "selectLastOneForSelectionEmitter", selectLastOneAfterMouseUpEmitter: "selectLastOneAfterMouseUpEmitter", onDatePasteEmitter: "onDatePasteEmitter", onFocusEmitter: "onFocusEmitter", changeSelectionEmmiter: "changeSelectionEmmiter", setSelectionEmmiter: "setSelectionEmmiter" }, providers: [CalendarDateTimePickerService], viewQueries: [{ propertyName: "dateTimePopover", first: true, predicate: ["dateTimePopover"], descendants: true }, { propertyName: "t2", first: true, predicate: ["t2"], descendants: true }, { propertyName: "span1", first: true, predicate: ["span1"], descendants: true, static: true }, { propertyName: "span2", first: true, predicate: ["span2"], descendants: true, static: true }, { propertyName: "span3", first: true, predicate: ["span3"], descendants: true, static: true }, { propertyName: "holder1", first: true, predicate: ["holder1"], descendants: true, static: true }, { propertyName: "closeTooltip", first: true, predicate: ["closeTooltip"], descendants: true }], ngImport: i0, template: "@let inTable = inputConfig?.inTable; @let inverse = inputConfig?.inverse;\n@let size = inputConfig?.size;\n<!--  -->\n@let invalid =\n  getSuperControl?.invalid &&\n  (getSuperControl?.touched || getSuperControl?.dirty);\n@let valid = getSuperControl?.valid && getSuperControl?.value;\n@let disabled = getSuperControl?.disabled || inputConfig?.isDisabled;\n@let isBilling = inputConfig?.isBilling;\n@let showClear = !disabled && !inputConfig.hideClear;\n@let hasFloatingError = inTable && invalid;\n<!-- Date Time Input -->\n<div\n  [id]=\"id\"\n  class=\"datetime-input-container\"\n  [class]=\"{\n    'datetime-valid': valid && !forceInvalidStyling,\n    'datetime-invalid': invalid || forceInvalidStyling,\n    'datetime-disabled': disabled,\n    'datetime-focus': isFocusInput,\n    'datetime-has-text': getSuperControl?.value,\n    'datetime-required': isRequired && !disabled,\n    'datetime-in-table': inTable,\n    'datetime-inverse': inverse,\n    'datetime-billing': isBilling,\n    'datetime-popover-open': t2.isOpen(),\n    'datetime-size-22': size === 22,\n    'datetime-icon-hidden': inputConfig.isIconHidden,\n  }\"\n  #t2=\"ngbPopover\"\n  [ngbPopover]=\"!disabled ? dateTimePopover : null\"\n  [placement]=\"['bottom-start', 'top-start']\"\n  [triggers]=\"'manual'\"\n  [popoverClass]=\"'datetimepopovermain'\"\n  [autoClose]=\"'outside'\"\n  [container]=\"'body'\"\n  (pointerdown)=\"onPopoverClick($event)\"\n  (shown)=\"onPopoverShown()\"\n  (hidden)=\"onPopoverHidden()\"\n>\n  <div class=\"datetime-label\">\n    {{ inputConfig.label }}\n  </div>\n\n  <div\n    #holder1\n    [tabindex]=\"disabled ? '-1' : '0'\"\n    contenteditable=\"true\"\n    (keydown)=\"changeSelection($event)\"\n    (input)=\"preventInput($event)\"\n    (focus)=\"onEditableFocus($event)\"\n    (blur)=\"blurInput()\"\n    (paste)=\"onDatePaste($event)\"\n    class=\"datetime-input-listener\"\n    [ngbTooltip]=\"hasFloatingError ? errorTooltip : null\"\n    [container]=\"'body'\"\n    [placement]=\"'bottom'\"\n    [disableTooltip]=\"isFocusInput\"\n    tooltipClass=\"tooltip tooltip-bg-red-500 input-tooltip\"\n  ></div>\n\n  @if (!inputConfig.isIconHidden) {\n    <div class=\"datetime-icon-container\" (pointerdown)=\"openPopover($event)\">\n      <svg-icon\n        class=\"datetime-icon\"\n        [name]=\"\n          inputConfig.placeholderIcon === 'date' ? 'cai-date' : 'cai-time'\n        \"\n      ></svg-icon>\n      <div class=\"datetime-separator\"></div>\n    </div>\n  }\n  <div class=\"datetime-input\">\n    <span\n      #span1\n      class=\"main\"\n      [ngClass]=\"{\n        'reset-selection-color': !isFocusInput,\n      }\"\n      [innerHTML]=\"inputConfig.name === 'datepicker' ? 'mm' : 'HH'\"\n    ></span>\n    <span>\n      <div\n        class=\"border-picker\"\n        [innerHTML]=\"inputConfig.name === 'datepicker' ? '/' : ':'\"\n      ></div>\n    </span>\n    <span\n      #span2\n      class=\"main\"\n      [ngClass]=\"{\n        'reset-selection-color': !isFocusInput,\n      }\"\n      [innerHTML]=\"inputConfig.name === 'datepicker' ? 'dd' : 'MM'\"\n    ></span>\n    <span>\n      <div\n        class=\"border-picker\"\n        [innerHTML]=\"inputConfig.name === 'datepicker' ? '/' : ' '\"\n      ></div>\n    </span>\n    <span\n      #span3\n      class=\"main\"\n      [class.time-am-pm]=\"inputConfig.name !== 'datepicker'\"\n      [ngClass]=\"{\n        'reset-selection-color': !isFocusInput,\n      }\"\n      [innerHTML]=\"inputConfig.name === 'datepicker' ? 'yy' : 'AM'\"\n    ></span>\n  </div>\n\n  @if (!disabled) {\n    @let tooltipClass =\n      inverse\n        ? \"tooltip input-tooltip tooltip-bg-white-700 tooltip-text-black-500\"\n        : \"tooltip input-tooltip\";\n\n    @if (showClear) {\n      <button\n        class=\"datetime-cancel-button\"\n        tabindex=\"-1\"\n        ngbTooltip=\"Clear\"\n        [openDelay]=\"600\"\n        [tooltipClass]=\"tooltipClass\"\n        [placement]=\"'top'\"\n        [container]=\"'body'\"\n        [autoClose]=\"true\"\n        #closeTooltip=\"ngbTooltip\"\n        (click)=\"clearInput($event)\"\n        (pointerdown)=\"handleCloseTooltip()\"\n        (mouseleave)=\"handleCloseTooltip()\"\n      >\n        <svg-icon class=\"datetime-bg-icon\" name=\"cai-cancel\"></svg-icon>\n      </button>\n    }\n    <svg-icon\n      class=\"datetime-icon datetime-dropdown-icon\"\n      (pointerdown)=\"openPopover($event)\"\n      name=\"cai-arrow-secondary-down\"\n    ></svg-icon>\n  }\n  <!-- Error Message -->\n  @if (!inTable || isBilling) {\n    <div class=\"datetime-error-message\">\n      {{\n        invalid\n          ? (getSuperControl?.errors\n              | errorMessage: inputConfig.customErrors)[0]\n          : \"\"\n      }}\n    </div>\n  }\n</div>\n\n<!-- Popover for DateTime Pickers -->\n<ng-template #dateTimePopover let-data=\"data\">\n  <div\n    class=\"datetime-dropdown-holder\"\n    [class.datetime-has-stroke]=\"inputConfig.hasStroke\"\n  >\n    <cai-custom-datetime-pickers\n      [calendarType]=\"\n        inputConfig.name === 'datepicker' ||\n        inputConfig.name === 'datepickerBankCard'\n          ? 'date'\n          : 'time'\n      \"\n      [inputConfig]=\"inputConfig\"\n      [placeholder]=\"'MM/DD/YY'\"\n      [dateTime]=\"dateTimeInputDate\"\n      (closePopover)=\"closePopover($event)\"\n    ></cai-custom-datetime-pickers>\n  </div>\n</ng-template>\n\n<ng-template #errorTooltip>\n  @if (inTable && invalid && !isFocusInput) {\n    {{ (getSuperControl?.errors | errorMessage: inputConfig.customErrors)[0] }}\n  }\n</ng-template>\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.datetime-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;padding:4px 4px 4px 6px;border-radius:2px;position:relative;display:flex;align-items:center;background-color:var(--color-surface-neutral);transition:background-color .1s cubic-bezier(.46,.03,.51,.95);cursor:pointer;width:100%}.datetime-input-container.datetime-inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #2f2f2f;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.datetime-input-container.datetime-inverse:not(.datetime-has-text) .datetime-input{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text) .main::selection{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text).datetime-focus .datetime-icon{color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text).datetime-focus .datetime-separator{background-color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse.datetime-valid.datetime-focus .datetime-input,.datetime-input-container.datetime-inverse.datetime-invalid.datetime-focus .datetime-input{color:var(--color-text)}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-bg-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-bg-icon:hover{background-color:#fff!important}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-icon:hover{color:#fff!important}.datetime-input-container.datetime-in-table{--color-surface-neutral: transparent;--color-surface-negative: transparent;--color-surface-positive: transparent}.datetime-input-container.datetime-in-table .datetime-dropdown-icon{opacity:0}.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover) .datetime-input,.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover) .datetime-label{color:var(--color-text-negative)}.datetime-input-container.datetime-in-table:hover .datetime-dropdown-icon,.datetime-input-container.datetime-in-table.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-input-container:hover{background-color:var(--color-surface-neutral-hover)}.datetime-input-container:hover .datetime-bg-icon{color:var(--color-surface-neutral-hover)}.datetime-input-container.datetime-focus{background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus.datetime-in-table:not(.datetime-billing) .datetime-label{opacity:0}.datetime-input-container.datetime-focus:not(.datetime-in-table):not(.datetime-billing) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-focus.datetime-billing .datetime-label{color:#fff!important}.datetime-input-container.datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-input{color:var(--color-text-inverse);opacity:1;pointer-events:auto}.datetime-input-container.datetime-popover-open .datetime-dropdown-icon{transform:rotateX(180deg)}.datetime-input-container.datetime-has-text .datetime-input{opacity:1;pointer-events:auto}.datetime-input-container.datetime-has-text.datetime-disabled .datetime-input{pointer-events:none!important}.datetime-input-container.datetime-has-text:not(.datetime-in-table):not(.datetime-billing) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-has-text.datetime-in-table:not(.datetime-billing) .datetime-label{opacity:0}.datetime-input-container.datetime-valid:not(.datetime-disabled){background-color:var(--color-surface-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover{background-color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#0b49d1}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus{background-color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon,.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon:hover,.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon:hover{color:#0b49d1}.datetime-input-container.datetime-invalid:not(.datetime-disabled){background-color:var(--color-surface-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-error-message{opacity:1;transform:translateY(0)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover{background-color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#c20c0c}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text{background-color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text){background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon,.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon:hover,.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon:hover{color:#c20c0c}.datetime-input-container.datetime-disabled{cursor:default;pointer-events:none}.datetime-input-container.datetime-disabled:not(.datetime-in-table){background-color:var(--color-surface-disable)}.datetime-input-container.datetime-disabled.datetime-in-table{background-color:transparent}.datetime-input-container.datetime-disabled .datetime-label{color:var(--color-text-subtle)!important}.datetime-input-container.datetime-disabled .datetime-icon{color:var(--color-icon-disable)}.datetime-input-container.datetime-disabled.datetime-has-text .datetime-icon{color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-separator{background-color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-input{color:var(--color-text)!important}.datetime-input-container.datetime-required .datetime-label:after{content:\" *\";color:var(--color-text-negative)}.datetime-icon-container{display:flex;align-items:center;justify-content:center;gap:4px;width:max-content}.datetime-icon-container.hidden{display:none}.datetime-icon-container .datetime-icon{order:1}.datetime-icon-container .datetime-separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .2s ease-in-out;opacity:40%;order:2;margin-right:4px}.datetime-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--color-icon-neutral);transition:color .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.datetime-icon:hover{color:#424242}.datetime-label{position:absolute;display:flex;gap:4px;left:27px;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out,opacity .1s ease-in-out;transform:translateY(0);-webkit-user-select:none;user-select:none}.datetime-icon-hidden .datetime-label{left:0}.datetime-bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .2s ease-in-out,color .2s ease-in-out,opacity .2s ease-in-out,transform .1s ease-in-out;transform-box:border-box;transform-origin:center;will-change:transform}.datetime-bg-icon:focus-visible{outline:none}.datetime-bg-icon svg{transition:transform .1s ease-in-out}.datetime-bg-icon:hover{transform:scale(1.2222222222)}.datetime-bg-icon:hover svg{transform:scale(.8181818182)}.datetime-bg-icon:active{transform:scale(1)}.datetime-cancel-button{position:absolute;right:26px;top:4px;opacity:0;transition:opacity .2s ease-in-out;pointer-events:none}.datetime-dropdown-icon{position:absolute;right:4px;top:4px;transform:rotateX(0)}.datetime-dropdown-icon:hover{color:#424242}.datetime-input{display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--color-text);text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:400;line-height:18px;opacity:0;pointer-events:none;cursor:text;transition:opacity .2s ease-in-out,color .2s ease-in-out}.datetime-input .main{border-radius:1px}.datetime-input .main.time-am-pm{margin-left:4px}.datetime-size-22{height:22px;padding-left:0}.datetime-size-22 .datetime-bg-icon{height:14px!important;width:14px!important;padding:2px!important;right:22px!important}.datetime-size-22 .datetime-icon-container{height:22px!important;padding-top:2px;padding-bottom:2px;padding-left:4px!important}.datetime-size-22 .datetime-input{padding-top:2px;padding-bottom:2px}.datetime-size-22 .datetime-label{padding-top:2px;padding-bottom:2px;padding-left:0!important}.datetime-size-22 .datetime-icon{height:14px!important;width:14px!important}.datetime-size-22.datetime-has-text .datetime-label,.datetime-size-22.datetime-focus .datetime-label{transform:translateY(-18px)!important}.datetime-error-message{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;-webkit-user-select:none;user-select:none;transition:opacity .2s ease-in-out,transform .2s ease-in-out;color:var(--color-text-negative);transform:translateY(-10px);pointer-events:none}.datetime-in-table .datetime-input-listener{width:100%;height:100%!important;position:absolute;bottom:0;left:0;opacity:0}.datetime-input-listener{caret-color:transparent;height:12px!important}.main::selection{background-color:#ffffff4d;border-radius:1px}.datetime-billing .datetime-separator{order:0;margin-right:0;margin-left:4px}.datetime-billing .datetime-cancel-button{right:4px}.datetime-billing .datetime-label{left:0;font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-billing .datetime-icon-container{order:2}.datetime-billing .datetime-input{margin-left:auto}.datetime-billing .datetime-error-message{bottom:4px!important;right:32px!important;transform:translateY(0)!important}.datetime-billing.datetime-focus .datetime-error-message,.datetime-billing.datetime-has-text .datetime-error-message{opacity:0!important}.datetime-billing .datetime-dropdown-icon,.datetime-billing:hover .datetime-icon,.datetime-billing.datetime-focus .datetime-icon{opacity:0}.datetime-billing:hover .datetime-dropdown-icon,.datetime-billing.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-billing.datetime-has-text .datetime-dropdown-icon{opacity:0!important;pointer-events:none!important}.datetime-billing.datetime-has-text:hover .datetime-icon-container,.datetime-billing.datetime-has-text.datetime-focus .datetime-icon-container{pointer-events:none!important}.datetime-billing.datetime-has-text:hover .datetime-icon-container .datetime-icon,.datetime-billing.datetime-has-text.datetime-focus .datetime-icon-container .datetime-icon{opacity:0!important}\n"], dependencies: [{ kind: "ngmodule", type: 
-                // modules
-                CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: AngularSvgIconModule }, { kind: "component", type: i4.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i2.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "directive", type: i2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: 
-                // components
+    closeClearButtonTooltip() {
+        this.clearButtonTooltip.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CaiInputDatetimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: CaiInputDatetimePickerComponent, isStandalone: true, selector: "cai-input-datetime-picker, ca-date-time", inputs: { id: "id", inputConfig: "inputConfig", forceInvalidStyling: "forceInvalidStyling" }, outputs: { clearInputEvent: "clear", blurInputEvent: "blurInput", onFocusEmitter: "onFocusEmitter" }, providers: [
+            CalendarDateTimePickerService,
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => CaiInputDatetimePickerComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputListener", first: true, predicate: ["inputListener"], descendants: true }, { propertyName: "mainPopover", first: true, predicate: ["mainPopover"], descendants: true }, { propertyName: "clearButtonTooltip", first: true, predicate: ["clearButtonTooltip"], descendants: true }, { propertyName: "iconContainer", first: true, predicate: ["iconContainer"], descendants: true, read: ElementRef }, { propertyName: "dropdownIcon", first: true, predicate: ["dropdownIcon"], descendants: true, read: ElementRef }], ngImport: i0, template: "@let inTable = inputConfig?.inTable; @let inverse = inputConfig?.inverse;\n@let size = inputConfig?.size;\n@let invalid =\n  getSuperControl?.invalid &&\n  (getSuperControl?.touched || getSuperControl?.dirty);\n@let valid = getSuperControl?.valid && getSuperControl?.value;\n@let disabled = getSuperControl?.disabled || inputConfig?.isDisabled;\n@let isBilling = inputConfig?.isBilling;\n@let showClear = !disabled && !inputConfig.hideClear;\n@let hasFloatingError = inTable && invalid;\n\n<div\n  [id]=\"id\"\n  class=\"datetime-input-container\"\n  [class]=\"{\n    'datetime-valid': valid && !forceInvalidStyling,\n    'datetime-invalid': invalid || forceInvalidStyling,\n    'datetime-disabled': disabled,\n    'datetime-focus': isInputFocused(),\n    'datetime-has-text': !!currentValue(),\n    'datetime-has-date': hasDate(),\n    'datetime-required': isRequired && !disabled,\n    'datetime-in-table': inTable,\n    'datetime-inverse': inverse,\n    'datetime-billing': isBilling,\n    'datetime-popover-open': mainPopover.isOpen(),\n    'datetime-size-22': size === 22,\n    'datetime-icon-hidden': inputConfig.isIconHidden,\n    'force-invalid': forceInvalidStyling,\n  }\"\n  #mainPopover=\"ngbPopover\"\n  [ngbPopover]=\"!disabled ? dateTimePopover : null\"\n  [placement]=\"['bottom-start', 'top-start']\"\n  [triggers]=\"'manual'\"\n  [popoverClass]=\"'datetimepopovermain'\"\n  [autoClose]=\"'outside'\"\n  [container]=\"'body'\"\n  (mouseenter)=\"hasFloatingError && errorTooltipContainer.open()\"\n  (mouseleave)=\"hasFloatingError && errorTooltipContainer.close()\"\n  (pointerdown)=\"focusInput($event)\"\n  (dblclick)=\"onInputSelect($event)\"\n>\n  <div class=\"datetime-label\">\n    {{ inputConfig.label }}\n  </div>\n\n  <input\n    #inputListener\n    [id]=\"id\"\n    [value]=\"currentValue() ?? ''\"\n    [tabindex]=\"disabled ? '-1' : '0'\"\n    (focus)=\"onInputFocus()\"\n    (blur)=\"onInputBlur()\"\n    (keydown)=\"onKeyDown($event)\"\n    (input)=\"onInputChange($event)\"\n    (paste)=\"onInputPaste($event)\"\n    class=\"datetime-input-listener\"\n    #errorTooltipContainer=\"ngbTooltip\"\n    [disabled]=\"disabled\"\n    [ngbTooltip]=\"hasFloatingError ? errorTooltip : null\"\n    [container]=\"'body'\"\n    [placement]=\"'bottom'\"\n    [triggers]=\"'manual'\"\n    [disableTooltip]=\"isInputFocused()\"\n    tooltipClass=\"tooltip tooltip-bg-red-500 input-tooltip\"\n  />\n\n  @if (!inputConfig.isIconHidden) {\n    <div\n      #iconContainer\n      class=\"datetime-icon-container\"\n      (click)=\"togglePopover()\"\n    >\n      <svg-icon\n        class=\"datetime-icon\"\n        [name]=\"\n          inputConfig.placeholderIcon === 'date' ? 'cai-date' : 'cai-time'\n        \"\n      ></svg-icon>\n      <div class=\"datetime-separator\"></div>\n    </div>\n  }\n\n  <div class=\"datetime-input\" [class.selected]=\"isInputSelected()\">\n    @if (isDatePicker()) {\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 0\"\n        [class.filled]=\"displayedValues().month !== 'MM'\"\n        (pointerdown)=\"highlightPart($event, 0)\"\n        >{{ displayedValues().month }}</span\n      >\n      <span class=\"datetime-input-separator\">/</span>\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 1\"\n        [class.filled]=\"displayedValues().day !== 'DD'\"\n        (pointerdown)=\"highlightPart($event, 1)\"\n        >{{ displayedValues().day }}</span\n      >\n      <span class=\"datetime-input-separator\">/</span>\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 2\"\n        [class.filled]=\"displayedValues().year !== 'YY'\"\n        (pointerdown)=\"highlightPart($event, 2)\"\n        >{{ displayedValues().year }}</span\n      >\n    } @else {\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 0\"\n        [class.filled]=\"displayedValues().hour !== 'HH'\"\n        (pointerdown)=\"highlightPart($event, 0)\"\n        >{{ displayedValues().hour }}</span\n      >\n      <span class=\"datetime-input-separator\">:</span>\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 1\"\n        [class.filled]=\"displayedValues().minute !== 'MM'\"\n        (pointerdown)=\"highlightPart($event, 1)\"\n        >{{ displayedValues().minute }}</span\n      >\n      <span\n        class=\"datetime-input-part time-am-pm\"\n        [class.highlighted]=\"highlightedPart() === 2\"\n        (pointerdown)=\"highlightPart($event, 2)\"\n        >{{ displayedValues().ampm }}</span\n      >\n    }\n  </div>\n\n  @if (!disabled) {\n    @let tooltipClass =\n      inverse\n        ? \"tooltip input-tooltip tooltip-bg-white-700 tooltip-text-black-500\"\n        : \"tooltip input-tooltip\";\n\n    @if (showClear) {\n      <button\n        class=\"datetime-cancel-button\"\n        tabindex=\"-1\"\n        ngbTooltip=\"Clear\"\n        [openDelay]=\"600\"\n        [tooltipClass]=\"tooltipClass\"\n        [placement]=\"'top'\"\n        [container]=\"'body'\"\n        [autoClose]=\"true\"\n        #clearButtonTooltip=\"ngbTooltip\"\n        (click)=\"clearInput($event)\"\n        (pointerdown)=\"closeClearButtonTooltip()\"\n        (mouseleave)=\"closeClearButtonTooltip()\"\n      >\n        <svg-icon class=\"datetime-bg-icon\" name=\"cai-cancel\"></svg-icon>\n      </button>\n    }\n    <svg-icon\n      #dropdownIcon\n      class=\"datetime-icon datetime-dropdown-icon\"\n      (click)=\"togglePopover()\"\n      name=\"cai-arrow-secondary-down\"\n    ></svg-icon>\n  }\n  <!-- Error Message -->\n  @if (!inTable || isBilling) {\n    <div class=\"datetime-error-message\">\n      {{\n        invalid\n          ? (getSuperControl?.errors\n              | errorMessage: inputConfig.customErrors)[0]\n          : \"\"\n      }}\n    </div>\n  }\n</div>\n\n<!-- Popover for DateTime Pickers -->\n<ng-template #dateTimePopover let-data=\"data\">\n  <div\n    class=\"datetime-dropdown-holder\"\n    [class.datetime-has-stroke]=\"inputConfig.hasStroke\"\n  >\n    <cai-custom-datetime-pickers\n      [calendarType]=\"isDatePicker() ? 'date' : 'time'\"\n      [inputConfig]=\"inputConfig\"\n      [placeholder]=\"'MM/DD/YY'\"\n      [dateTime]=\"dateTime()\"\n      (closePopover)=\"onPopoverDateChanged($event)\"\n    ></cai-custom-datetime-pickers>\n  </div>\n</ng-template>\n\n<ng-template #errorTooltip>\n  @if (inTable && invalid && !isInputFocused()) {\n    {{ (getSuperControl?.errors | errorMessage: inputConfig.customErrors)[0] }}\n  }\n</ng-template>\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.datetime-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;padding:4px 4px 4px 6px;border-radius:2px;position:relative;display:flex;align-items:center;background-color:var(--color-surface-neutral);transition:background-color .1s cubic-bezier(.46,.03,.51,.95);cursor:text;width:100%;height:26px}.datetime-input-container.datetime-inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #2f2f2f;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-icon{color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-separator{background-color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-bg-icon{background-color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus:hover .datetime-bg-icon:hover{background-color:#424242!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus:hover .datetime-icon:hover{color:#424242!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input.selected .datetime-input-part{background-color:#91919133}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input.selected .datetime-input-separator{background-color:#91919133}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-part{color:#0000004d!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-part.filled{color:#000!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-part.highlighted{background-color:#91919133;color:#000!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-separator{color:#0000004d!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date):hover .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-inverse:not(.datetime-has-date):hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse:not(.datetime-has-date):hover .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-inverse.datetime-valid .datetime-input,.datetime-input-container.datetime-inverse.datetime-invalid .datetime-input{color:var(--color-text)!important}.datetime-input-container.datetime-inverse.datetime-valid.datetime-focus .datetime-input,.datetime-input-container.datetime-inverse.datetime-invalid.datetime-focus .datetime-input{color:var(--color-text)}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-bg-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-bg-icon:hover{background-color:#fff!important}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-icon:hover{color:#fff!important}.datetime-input-container.datetime-in-table{--color-surface-neutral: transparent;--color-surface-negative: transparent;--color-surface-positive: transparent}.datetime-input-container.datetime-in-table .datetime-dropdown-icon{opacity:0}.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover):not(.force-invalid) .datetime-input,.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover):not(.force-invalid) .datetime-label{color:var(--color-text-negative)}.datetime-input-container.datetime-in-table:hover .datetime-dropdown-icon,.datetime-input-container.datetime-in-table.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-input-container:hover{background-color:var(--color-surface-neutral-hover)}.datetime-input-container:hover .datetime-bg-icon{color:var(--color-surface-neutral-hover)}.datetime-input-container.datetime-focus{background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus.datetime-in-table:not(.datetime-billing) .datetime-label{opacity:0}.datetime-input-container.datetime-focus:not(.datetime-in-table):not(.datetime-billing) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-focus.datetime-billing .datetime-label{color:#fff!important}.datetime-input-container.datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-input{color:var(--color-text-inverse);opacity:1;pointer-events:auto}.datetime-input-container.datetime-focus .datetime-input .datetime-input-part{height:18px;color:#ffffffb3}.datetime-input-container.datetime-focus .datetime-input .datetime-input-part.filled{color:#fff}.datetime-input-container.datetime-focus .datetime-input .datetime-input-part.highlighted{background-color:#ffffff4d;color:#fff}.datetime-input-container.datetime-focus .datetime-input .datetime-input-separator{color:#ffffffb3}.datetime-input-container.datetime-popover-open .datetime-dropdown-icon{transform:rotateX(180deg)}.datetime-input-container.datetime-has-text .datetime-input{opacity:1;pointer-events:auto!important}.datetime-input-container.datetime-has-text.datetime-disabled .datetime-input{pointer-events:none!important}.datetime-input-container.datetime-has-text:not(.datetime-in-table):not(.datetime-billing) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-has-text.datetime-in-table:not(.datetime-billing) .datetime-label{opacity:0}.datetime-input-container.datetime-valid:not(.datetime-disabled){background-color:var(--color-surface-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover{background-color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#0b49d1}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus{background-color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon,.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon:hover,.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon:hover{color:#0b49d1}.datetime-input-container.datetime-invalid:not(.datetime-disabled){background-color:var(--color-surface-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-error-message{opacity:1;transform:translateY(0)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover{background-color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#c20c0c}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date{background-color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon:hover,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon:hover,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-separator,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-cancel-button,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date){background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-error-message{opacity:0}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon,.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon:hover,.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon:hover{color:#c20c0c}.datetime-input-container.datetime-disabled{cursor:default;pointer-events:none}.datetime-input-container.datetime-disabled .datetime-icon,.datetime-input-container.datetime-disabled .datetime-dropdown-icon{cursor:default}.datetime-input-container.datetime-disabled:not(.datetime-in-table){background-color:var(--color-surface-disable)}.datetime-input-container.datetime-disabled.datetime-in-table{background-color:transparent}.datetime-input-container.datetime-disabled .datetime-label{color:var(--color-text-subtle)!important}.datetime-input-container.datetime-disabled .datetime-icon{color:var(--color-icon-disable)}.datetime-input-container.datetime-disabled.datetime-has-text .datetime-icon{color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-separator{background-color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-input{color:var(--color-text)!important}.datetime-input-container.datetime-required .datetime-label:after{content:\" *\";color:var(--color-text-negative)}.datetime-icon-container{display:flex;align-items:center;justify-content:center;gap:4px;width:max-content}.datetime-icon-container.hidden{display:none}.datetime-icon-container .datetime-icon{order:1;cursor:pointer}.datetime-icon-container .datetime-separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .1s ease-in-out;opacity:40%;order:2;margin-right:4px}.datetime-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--color-icon-neutral);transition:color .1s ease-in-out,opacity .1s ease-in-out,transform .15s ease-in-out}.datetime-label{position:absolute;display:flex;gap:4px;left:27px;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out,opacity .1s ease-in-out;transform:translateY(0);-webkit-user-select:none;user-select:none}.datetime-icon-hidden .datetime-label{left:0}.datetime-bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .1s ease-in-out,color .1s ease-in-out,opacity .1s ease-in-out,transform .1s ease-in-out;transform-box:border-box;transform-origin:center;will-change:transform}.datetime-bg-icon:focus-visible{outline:none}.datetime-bg-icon svg{transition:transform .1s ease-in-out}.datetime-bg-icon:hover{transform:scale(1.2222222222)}.datetime-bg-icon:hover svg{transform:scale(.8181818182)}.datetime-bg-icon:active{transform:scale(1)}.datetime-cancel-button{position:absolute;right:26px;top:4px;opacity:0;transition:opacity .1s ease-in-out;pointer-events:none}.datetime-dropdown-icon{position:absolute;right:4px;top:4px;transform:rotateX(0);cursor:pointer}.datetime-size-22{height:22px!important;padding-left:0}.datetime-size-22 .datetime-bg-icon{height:14px!important;width:14px!important;padding:2px!important;right:22px!important}.datetime-size-22 .datetime-icon-container{height:22px!important;padding-top:2px;padding-bottom:2px;padding-left:4px!important}.datetime-size-22 .datetime-input{padding-top:2px;padding-bottom:2px}.datetime-size-22 .datetime-label{padding-top:2px;padding-bottom:2px;padding-left:0!important}.datetime-size-22 .datetime-icon{height:14px!important;width:14px!important}.datetime-size-22.datetime-has-text .datetime-label,.datetime-size-22.datetime-focus .datetime-label{transform:translateY(-18px)!important}.datetime-error-message{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;-webkit-user-select:none;user-select:none;transition:opacity .1s ease-in-out,transform .1s ease-in-out;color:var(--color-text-negative);transform:translateY(-10px);pointer-events:none}.datetime-input-listener{opacity:0;pointer-events:none;position:absolute;inset:0}.datetime-billing .datetime-separator{order:0;margin-right:0;margin-left:4px}.datetime-billing .datetime-cancel-button{right:4px}.datetime-billing .datetime-label{left:0;font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-billing .datetime-icon-container{order:2}.datetime-billing .datetime-input{margin-left:auto;width:max-content}.datetime-billing .datetime-error-message{bottom:4px!important;right:32px!important;transform:translateY(0)!important}.datetime-billing.datetime-focus .datetime-error-message,.datetime-billing.datetime-has-text .datetime-error-message{opacity:0!important}.datetime-billing .datetime-dropdown-icon,.datetime-billing:hover .datetime-icon,.datetime-billing.datetime-focus .datetime-icon{opacity:0}.datetime-billing:hover .datetime-dropdown-icon,.datetime-billing.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-billing.datetime-has-text .datetime-dropdown-icon{opacity:0!important;pointer-events:none!important}.datetime-billing.datetime-has-text:hover .datetime-icon-container,.datetime-billing.datetime-has-text.datetime-focus .datetime-icon-container{pointer-events:none!important}.datetime-billing.datetime-has-text:hover .datetime-icon-container .datetime-icon,.datetime-billing.datetime-has-text.datetime-focus .datetime-icon-container .datetime-icon{opacity:0!important}.datetime-input{font-size:14px;line-height:18px;font-weight:400;width:100%;opacity:0;pointer-events:none;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);-webkit-user-select:none;user-select:none}.datetime-input .datetime-input-separator{background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95)}.datetime-input .datetime-input-part{position:relative;background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95)}.datetime-input .datetime-input-part.time-am-pm{margin-left:4px}.datetime-input .datetime-input-part:after{content:\"\";inset:0 -3px;position:absolute}.datetime-input.selected .datetime-input-part,.datetime-input.selected .datetime-input-separator{background-color:#ffffff4d}.datetime-input.selected .time-am-pm{margin-left:0!important;padding-left:4px!important}\n"], dependencies: [{ kind: "ngmodule", type: 
+                // Modules
+                CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: AngularSvgIconModule }, { kind: "component", type: i1$2.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i2.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "directive", type: i2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: 
+                // Components
                 CaCustomDatetimePickersComponent, selector: "cai-custom-datetime-pickers", inputs: ["dateTime", "inputConfig", "calendarType", "placeholder"], outputs: ["closePopover", "onRefocusInput"] }, { kind: "pipe", type: 
-                // pipes
+                // Pipes
                 ErrorMessagePipe, name: "errorMessage" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CaiInputDatetimePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cai-input-datetime-picker', imports: [
-                        // modules
+            args: [{ selector: 'cai-input-datetime-picker, ca-date-time', providers: [
+                        CalendarDateTimePickerService,
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => CaiInputDatetimePickerComponent),
+                            multi: true,
+                        },
+                    ], imports: [
+                        // Modules
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
                         AngularSvgIconModule,
                         NgbModule,
-                        // components
+                        // Components
                         CaCustomDatetimePickersComponent,
-                        // pipes
+                        // Pipes
                         ErrorMessagePipe,
-                    ], providers: [CalendarDateTimePickerService], template: "@let inTable = inputConfig?.inTable; @let inverse = inputConfig?.inverse;\n@let size = inputConfig?.size;\n<!--  -->\n@let invalid =\n  getSuperControl?.invalid &&\n  (getSuperControl?.touched || getSuperControl?.dirty);\n@let valid = getSuperControl?.valid && getSuperControl?.value;\n@let disabled = getSuperControl?.disabled || inputConfig?.isDisabled;\n@let isBilling = inputConfig?.isBilling;\n@let showClear = !disabled && !inputConfig.hideClear;\n@let hasFloatingError = inTable && invalid;\n<!-- Date Time Input -->\n<div\n  [id]=\"id\"\n  class=\"datetime-input-container\"\n  [class]=\"{\n    'datetime-valid': valid && !forceInvalidStyling,\n    'datetime-invalid': invalid || forceInvalidStyling,\n    'datetime-disabled': disabled,\n    'datetime-focus': isFocusInput,\n    'datetime-has-text': getSuperControl?.value,\n    'datetime-required': isRequired && !disabled,\n    'datetime-in-table': inTable,\n    'datetime-inverse': inverse,\n    'datetime-billing': isBilling,\n    'datetime-popover-open': t2.isOpen(),\n    'datetime-size-22': size === 22,\n    'datetime-icon-hidden': inputConfig.isIconHidden,\n  }\"\n  #t2=\"ngbPopover\"\n  [ngbPopover]=\"!disabled ? dateTimePopover : null\"\n  [placement]=\"['bottom-start', 'top-start']\"\n  [triggers]=\"'manual'\"\n  [popoverClass]=\"'datetimepopovermain'\"\n  [autoClose]=\"'outside'\"\n  [container]=\"'body'\"\n  (pointerdown)=\"onPopoverClick($event)\"\n  (shown)=\"onPopoverShown()\"\n  (hidden)=\"onPopoverHidden()\"\n>\n  <div class=\"datetime-label\">\n    {{ inputConfig.label }}\n  </div>\n\n  <div\n    #holder1\n    [tabindex]=\"disabled ? '-1' : '0'\"\n    contenteditable=\"true\"\n    (keydown)=\"changeSelection($event)\"\n    (input)=\"preventInput($event)\"\n    (focus)=\"onEditableFocus($event)\"\n    (blur)=\"blurInput()\"\n    (paste)=\"onDatePaste($event)\"\n    class=\"datetime-input-listener\"\n    [ngbTooltip]=\"hasFloatingError ? errorTooltip : null\"\n    [container]=\"'body'\"\n    [placement]=\"'bottom'\"\n    [disableTooltip]=\"isFocusInput\"\n    tooltipClass=\"tooltip tooltip-bg-red-500 input-tooltip\"\n  ></div>\n\n  @if (!inputConfig.isIconHidden) {\n    <div class=\"datetime-icon-container\" (pointerdown)=\"openPopover($event)\">\n      <svg-icon\n        class=\"datetime-icon\"\n        [name]=\"\n          inputConfig.placeholderIcon === 'date' ? 'cai-date' : 'cai-time'\n        \"\n      ></svg-icon>\n      <div class=\"datetime-separator\"></div>\n    </div>\n  }\n  <div class=\"datetime-input\">\n    <span\n      #span1\n      class=\"main\"\n      [ngClass]=\"{\n        'reset-selection-color': !isFocusInput,\n      }\"\n      [innerHTML]=\"inputConfig.name === 'datepicker' ? 'mm' : 'HH'\"\n    ></span>\n    <span>\n      <div\n        class=\"border-picker\"\n        [innerHTML]=\"inputConfig.name === 'datepicker' ? '/' : ':'\"\n      ></div>\n    </span>\n    <span\n      #span2\n      class=\"main\"\n      [ngClass]=\"{\n        'reset-selection-color': !isFocusInput,\n      }\"\n      [innerHTML]=\"inputConfig.name === 'datepicker' ? 'dd' : 'MM'\"\n    ></span>\n    <span>\n      <div\n        class=\"border-picker\"\n        [innerHTML]=\"inputConfig.name === 'datepicker' ? '/' : ' '\"\n      ></div>\n    </span>\n    <span\n      #span3\n      class=\"main\"\n      [class.time-am-pm]=\"inputConfig.name !== 'datepicker'\"\n      [ngClass]=\"{\n        'reset-selection-color': !isFocusInput,\n      }\"\n      [innerHTML]=\"inputConfig.name === 'datepicker' ? 'yy' : 'AM'\"\n    ></span>\n  </div>\n\n  @if (!disabled) {\n    @let tooltipClass =\n      inverse\n        ? \"tooltip input-tooltip tooltip-bg-white-700 tooltip-text-black-500\"\n        : \"tooltip input-tooltip\";\n\n    @if (showClear) {\n      <button\n        class=\"datetime-cancel-button\"\n        tabindex=\"-1\"\n        ngbTooltip=\"Clear\"\n        [openDelay]=\"600\"\n        [tooltipClass]=\"tooltipClass\"\n        [placement]=\"'top'\"\n        [container]=\"'body'\"\n        [autoClose]=\"true\"\n        #closeTooltip=\"ngbTooltip\"\n        (click)=\"clearInput($event)\"\n        (pointerdown)=\"handleCloseTooltip()\"\n        (mouseleave)=\"handleCloseTooltip()\"\n      >\n        <svg-icon class=\"datetime-bg-icon\" name=\"cai-cancel\"></svg-icon>\n      </button>\n    }\n    <svg-icon\n      class=\"datetime-icon datetime-dropdown-icon\"\n      (pointerdown)=\"openPopover($event)\"\n      name=\"cai-arrow-secondary-down\"\n    ></svg-icon>\n  }\n  <!-- Error Message -->\n  @if (!inTable || isBilling) {\n    <div class=\"datetime-error-message\">\n      {{\n        invalid\n          ? (getSuperControl?.errors\n              | errorMessage: inputConfig.customErrors)[0]\n          : \"\"\n      }}\n    </div>\n  }\n</div>\n\n<!-- Popover for DateTime Pickers -->\n<ng-template #dateTimePopover let-data=\"data\">\n  <div\n    class=\"datetime-dropdown-holder\"\n    [class.datetime-has-stroke]=\"inputConfig.hasStroke\"\n  >\n    <cai-custom-datetime-pickers\n      [calendarType]=\"\n        inputConfig.name === 'datepicker' ||\n        inputConfig.name === 'datepickerBankCard'\n          ? 'date'\n          : 'time'\n      \"\n      [inputConfig]=\"inputConfig\"\n      [placeholder]=\"'MM/DD/YY'\"\n      [dateTime]=\"dateTimeInputDate\"\n      (closePopover)=\"closePopover($event)\"\n    ></cai-custom-datetime-pickers>\n  </div>\n</ng-template>\n\n<ng-template #errorTooltip>\n  @if (inTable && invalid && !isFocusInput) {\n    {{ (getSuperControl?.errors | errorMessage: inputConfig.customErrors)[0] }}\n  }\n</ng-template>\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.datetime-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;padding:4px 4px 4px 6px;border-radius:2px;position:relative;display:flex;align-items:center;background-color:var(--color-surface-neutral);transition:background-color .1s cubic-bezier(.46,.03,.51,.95);cursor:pointer;width:100%}.datetime-input-container.datetime-inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #2f2f2f;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.datetime-input-container.datetime-inverse:not(.datetime-has-text) .datetime-input{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text) .main::selection{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text).datetime-focus .datetime-icon{color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text).datetime-focus .datetime-separator{background-color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse.datetime-valid.datetime-focus .datetime-input,.datetime-input-container.datetime-inverse.datetime-invalid.datetime-focus .datetime-input{color:var(--color-text)}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-bg-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-bg-icon:hover{background-color:#fff!important}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-icon:hover{color:#fff!important}.datetime-input-container.datetime-in-table{--color-surface-neutral: transparent;--color-surface-negative: transparent;--color-surface-positive: transparent}.datetime-input-container.datetime-in-table .datetime-dropdown-icon{opacity:0}.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover) .datetime-input,.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover) .datetime-label{color:var(--color-text-negative)}.datetime-input-container.datetime-in-table:hover .datetime-dropdown-icon,.datetime-input-container.datetime-in-table.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-input-container:hover{background-color:var(--color-surface-neutral-hover)}.datetime-input-container:hover .datetime-bg-icon{color:var(--color-surface-neutral-hover)}.datetime-input-container.datetime-focus{background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus.datetime-in-table:not(.datetime-billing) .datetime-label{opacity:0}.datetime-input-container.datetime-focus:not(.datetime-in-table):not(.datetime-billing) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-focus.datetime-billing .datetime-label{color:#fff!important}.datetime-input-container.datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-input{color:var(--color-text-inverse);opacity:1;pointer-events:auto}.datetime-input-container.datetime-popover-open .datetime-dropdown-icon{transform:rotateX(180deg)}.datetime-input-container.datetime-has-text .datetime-input{opacity:1;pointer-events:auto}.datetime-input-container.datetime-has-text.datetime-disabled .datetime-input{pointer-events:none!important}.datetime-input-container.datetime-has-text:not(.datetime-in-table):not(.datetime-billing) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-has-text.datetime-in-table:not(.datetime-billing) .datetime-label{opacity:0}.datetime-input-container.datetime-valid:not(.datetime-disabled){background-color:var(--color-surface-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover{background-color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#0b49d1}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus{background-color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon,.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon:hover,.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon:hover{color:#0b49d1}.datetime-input-container.datetime-invalid:not(.datetime-disabled){background-color:var(--color-surface-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-error-message{opacity:1;transform:translateY(0)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover{background-color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#c20c0c}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text{background-color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text){background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon,.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon:hover,.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon:hover{color:#c20c0c}.datetime-input-container.datetime-disabled{cursor:default;pointer-events:none}.datetime-input-container.datetime-disabled:not(.datetime-in-table){background-color:var(--color-surface-disable)}.datetime-input-container.datetime-disabled.datetime-in-table{background-color:transparent}.datetime-input-container.datetime-disabled .datetime-label{color:var(--color-text-subtle)!important}.datetime-input-container.datetime-disabled .datetime-icon{color:var(--color-icon-disable)}.datetime-input-container.datetime-disabled.datetime-has-text .datetime-icon{color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-separator{background-color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-input{color:var(--color-text)!important}.datetime-input-container.datetime-required .datetime-label:after{content:\" *\";color:var(--color-text-negative)}.datetime-icon-container{display:flex;align-items:center;justify-content:center;gap:4px;width:max-content}.datetime-icon-container.hidden{display:none}.datetime-icon-container .datetime-icon{order:1}.datetime-icon-container .datetime-separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .2s ease-in-out;opacity:40%;order:2;margin-right:4px}.datetime-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--color-icon-neutral);transition:color .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.datetime-icon:hover{color:#424242}.datetime-label{position:absolute;display:flex;gap:4px;left:27px;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out,opacity .1s ease-in-out;transform:translateY(0);-webkit-user-select:none;user-select:none}.datetime-icon-hidden .datetime-label{left:0}.datetime-bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .2s ease-in-out,color .2s ease-in-out,opacity .2s ease-in-out,transform .1s ease-in-out;transform-box:border-box;transform-origin:center;will-change:transform}.datetime-bg-icon:focus-visible{outline:none}.datetime-bg-icon svg{transition:transform .1s ease-in-out}.datetime-bg-icon:hover{transform:scale(1.2222222222)}.datetime-bg-icon:hover svg{transform:scale(.8181818182)}.datetime-bg-icon:active{transform:scale(1)}.datetime-cancel-button{position:absolute;right:26px;top:4px;opacity:0;transition:opacity .2s ease-in-out;pointer-events:none}.datetime-dropdown-icon{position:absolute;right:4px;top:4px;transform:rotateX(0)}.datetime-dropdown-icon:hover{color:#424242}.datetime-input{display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--color-text);text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:400;line-height:18px;opacity:0;pointer-events:none;cursor:text;transition:opacity .2s ease-in-out,color .2s ease-in-out}.datetime-input .main{border-radius:1px}.datetime-input .main.time-am-pm{margin-left:4px}.datetime-size-22{height:22px;padding-left:0}.datetime-size-22 .datetime-bg-icon{height:14px!important;width:14px!important;padding:2px!important;right:22px!important}.datetime-size-22 .datetime-icon-container{height:22px!important;padding-top:2px;padding-bottom:2px;padding-left:4px!important}.datetime-size-22 .datetime-input{padding-top:2px;padding-bottom:2px}.datetime-size-22 .datetime-label{padding-top:2px;padding-bottom:2px;padding-left:0!important}.datetime-size-22 .datetime-icon{height:14px!important;width:14px!important}.datetime-size-22.datetime-has-text .datetime-label,.datetime-size-22.datetime-focus .datetime-label{transform:translateY(-18px)!important}.datetime-error-message{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;-webkit-user-select:none;user-select:none;transition:opacity .2s ease-in-out,transform .2s ease-in-out;color:var(--color-text-negative);transform:translateY(-10px);pointer-events:none}.datetime-in-table .datetime-input-listener{width:100%;height:100%!important;position:absolute;bottom:0;left:0;opacity:0}.datetime-input-listener{caret-color:transparent;height:12px!important}.main::selection{background-color:#ffffff4d;border-radius:1px}.datetime-billing .datetime-separator{order:0;margin-right:0;margin-left:4px}.datetime-billing .datetime-cancel-button{right:4px}.datetime-billing .datetime-label{left:0;font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-billing .datetime-icon-container{order:2}.datetime-billing .datetime-input{margin-left:auto}.datetime-billing .datetime-error-message{bottom:4px!important;right:32px!important;transform:translateY(0)!important}.datetime-billing.datetime-focus .datetime-error-message,.datetime-billing.datetime-has-text .datetime-error-message{opacity:0!important}.datetime-billing .datetime-dropdown-icon,.datetime-billing:hover .datetime-icon,.datetime-billing.datetime-focus .datetime-icon{opacity:0}.datetime-billing:hover .datetime-dropdown-icon,.datetime-billing.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-billing.datetime-has-text .datetime-dropdown-icon{opacity:0!important;pointer-events:none!important}.datetime-billing.datetime-has-text:hover .datetime-icon-container,.datetime-billing.datetime-has-text.datetime-focus .datetime-icon-container{pointer-events:none!important}.datetime-billing.datetime-has-text:hover .datetime-icon-container .datetime-icon,.datetime-billing.datetime-has-text.datetime-focus .datetime-icon-container .datetime-icon{opacity:0!important}\n"] }]
-        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
-                    type: Self
-                }] }, { type: CalendarDateTimePickerService }], propDecorators: { id: [{
+                    ], template: "@let inTable = inputConfig?.inTable; @let inverse = inputConfig?.inverse;\n@let size = inputConfig?.size;\n@let invalid =\n  getSuperControl?.invalid &&\n  (getSuperControl?.touched || getSuperControl?.dirty);\n@let valid = getSuperControl?.valid && getSuperControl?.value;\n@let disabled = getSuperControl?.disabled || inputConfig?.isDisabled;\n@let isBilling = inputConfig?.isBilling;\n@let showClear = !disabled && !inputConfig.hideClear;\n@let hasFloatingError = inTable && invalid;\n\n<div\n  [id]=\"id\"\n  class=\"datetime-input-container\"\n  [class]=\"{\n    'datetime-valid': valid && !forceInvalidStyling,\n    'datetime-invalid': invalid || forceInvalidStyling,\n    'datetime-disabled': disabled,\n    'datetime-focus': isInputFocused(),\n    'datetime-has-text': !!currentValue(),\n    'datetime-has-date': hasDate(),\n    'datetime-required': isRequired && !disabled,\n    'datetime-in-table': inTable,\n    'datetime-inverse': inverse,\n    'datetime-billing': isBilling,\n    'datetime-popover-open': mainPopover.isOpen(),\n    'datetime-size-22': size === 22,\n    'datetime-icon-hidden': inputConfig.isIconHidden,\n    'force-invalid': forceInvalidStyling,\n  }\"\n  #mainPopover=\"ngbPopover\"\n  [ngbPopover]=\"!disabled ? dateTimePopover : null\"\n  [placement]=\"['bottom-start', 'top-start']\"\n  [triggers]=\"'manual'\"\n  [popoverClass]=\"'datetimepopovermain'\"\n  [autoClose]=\"'outside'\"\n  [container]=\"'body'\"\n  (mouseenter)=\"hasFloatingError && errorTooltipContainer.open()\"\n  (mouseleave)=\"hasFloatingError && errorTooltipContainer.close()\"\n  (pointerdown)=\"focusInput($event)\"\n  (dblclick)=\"onInputSelect($event)\"\n>\n  <div class=\"datetime-label\">\n    {{ inputConfig.label }}\n  </div>\n\n  <input\n    #inputListener\n    [id]=\"id\"\n    [value]=\"currentValue() ?? ''\"\n    [tabindex]=\"disabled ? '-1' : '0'\"\n    (focus)=\"onInputFocus()\"\n    (blur)=\"onInputBlur()\"\n    (keydown)=\"onKeyDown($event)\"\n    (input)=\"onInputChange($event)\"\n    (paste)=\"onInputPaste($event)\"\n    class=\"datetime-input-listener\"\n    #errorTooltipContainer=\"ngbTooltip\"\n    [disabled]=\"disabled\"\n    [ngbTooltip]=\"hasFloatingError ? errorTooltip : null\"\n    [container]=\"'body'\"\n    [placement]=\"'bottom'\"\n    [triggers]=\"'manual'\"\n    [disableTooltip]=\"isInputFocused()\"\n    tooltipClass=\"tooltip tooltip-bg-red-500 input-tooltip\"\n  />\n\n  @if (!inputConfig.isIconHidden) {\n    <div\n      #iconContainer\n      class=\"datetime-icon-container\"\n      (click)=\"togglePopover()\"\n    >\n      <svg-icon\n        class=\"datetime-icon\"\n        [name]=\"\n          inputConfig.placeholderIcon === 'date' ? 'cai-date' : 'cai-time'\n        \"\n      ></svg-icon>\n      <div class=\"datetime-separator\"></div>\n    </div>\n  }\n\n  <div class=\"datetime-input\" [class.selected]=\"isInputSelected()\">\n    @if (isDatePicker()) {\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 0\"\n        [class.filled]=\"displayedValues().month !== 'MM'\"\n        (pointerdown)=\"highlightPart($event, 0)\"\n        >{{ displayedValues().month }}</span\n      >\n      <span class=\"datetime-input-separator\">/</span>\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 1\"\n        [class.filled]=\"displayedValues().day !== 'DD'\"\n        (pointerdown)=\"highlightPart($event, 1)\"\n        >{{ displayedValues().day }}</span\n      >\n      <span class=\"datetime-input-separator\">/</span>\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 2\"\n        [class.filled]=\"displayedValues().year !== 'YY'\"\n        (pointerdown)=\"highlightPart($event, 2)\"\n        >{{ displayedValues().year }}</span\n      >\n    } @else {\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 0\"\n        [class.filled]=\"displayedValues().hour !== 'HH'\"\n        (pointerdown)=\"highlightPart($event, 0)\"\n        >{{ displayedValues().hour }}</span\n      >\n      <span class=\"datetime-input-separator\">:</span>\n      <span\n        class=\"datetime-input-part\"\n        [class.highlighted]=\"highlightedPart() === 1\"\n        [class.filled]=\"displayedValues().minute !== 'MM'\"\n        (pointerdown)=\"highlightPart($event, 1)\"\n        >{{ displayedValues().minute }}</span\n      >\n      <span\n        class=\"datetime-input-part time-am-pm\"\n        [class.highlighted]=\"highlightedPart() === 2\"\n        (pointerdown)=\"highlightPart($event, 2)\"\n        >{{ displayedValues().ampm }}</span\n      >\n    }\n  </div>\n\n  @if (!disabled) {\n    @let tooltipClass =\n      inverse\n        ? \"tooltip input-tooltip tooltip-bg-white-700 tooltip-text-black-500\"\n        : \"tooltip input-tooltip\";\n\n    @if (showClear) {\n      <button\n        class=\"datetime-cancel-button\"\n        tabindex=\"-1\"\n        ngbTooltip=\"Clear\"\n        [openDelay]=\"600\"\n        [tooltipClass]=\"tooltipClass\"\n        [placement]=\"'top'\"\n        [container]=\"'body'\"\n        [autoClose]=\"true\"\n        #clearButtonTooltip=\"ngbTooltip\"\n        (click)=\"clearInput($event)\"\n        (pointerdown)=\"closeClearButtonTooltip()\"\n        (mouseleave)=\"closeClearButtonTooltip()\"\n      >\n        <svg-icon class=\"datetime-bg-icon\" name=\"cai-cancel\"></svg-icon>\n      </button>\n    }\n    <svg-icon\n      #dropdownIcon\n      class=\"datetime-icon datetime-dropdown-icon\"\n      (click)=\"togglePopover()\"\n      name=\"cai-arrow-secondary-down\"\n    ></svg-icon>\n  }\n  <!-- Error Message -->\n  @if (!inTable || isBilling) {\n    <div class=\"datetime-error-message\">\n      {{\n        invalid\n          ? (getSuperControl?.errors\n              | errorMessage: inputConfig.customErrors)[0]\n          : \"\"\n      }}\n    </div>\n  }\n</div>\n\n<!-- Popover for DateTime Pickers -->\n<ng-template #dateTimePopover let-data=\"data\">\n  <div\n    class=\"datetime-dropdown-holder\"\n    [class.datetime-has-stroke]=\"inputConfig.hasStroke\"\n  >\n    <cai-custom-datetime-pickers\n      [calendarType]=\"isDatePicker() ? 'date' : 'time'\"\n      [inputConfig]=\"inputConfig\"\n      [placeholder]=\"'MM/DD/YY'\"\n      [dateTime]=\"dateTime()\"\n      (closePopover)=\"onPopoverDateChanged($event)\"\n    ></cai-custom-datetime-pickers>\n  </div>\n</ng-template>\n\n<ng-template #errorTooltip>\n  @if (inTable && invalid && !isInputFocused()) {\n    {{ (getSuperControl?.errors | errorMessage: inputConfig.customErrors)[0] }}\n  }\n</ng-template>\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.datetime-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;padding:4px 4px 4px 6px;border-radius:2px;position:relative;display:flex;align-items:center;background-color:var(--color-surface-neutral);transition:background-color .1s cubic-bezier(.46,.03,.51,.95);cursor:text;width:100%;height:26px}.datetime-input-container.datetime-inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #2f2f2f;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-icon{color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-separator{background-color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-bg-icon{background-color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus:hover .datetime-bg-icon:hover{background-color:#424242!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus:hover .datetime-icon:hover{color:#424242!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input.selected .datetime-input-part{background-color:#91919133}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input.selected .datetime-input-separator{background-color:#91919133}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-part{color:#0000004d!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-part.filled{color:#000!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-part.highlighted{background-color:#91919133;color:#000!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date).datetime-focus .datetime-input .datetime-input-separator{color:#0000004d!important}.datetime-input-container.datetime-inverse:not(.datetime-has-date):hover .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-inverse:not(.datetime-has-date):hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse:not(.datetime-has-date):hover .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-inverse.datetime-valid .datetime-input,.datetime-input-container.datetime-inverse.datetime-invalid .datetime-input{color:var(--color-text)!important}.datetime-input-container.datetime-inverse.datetime-valid.datetime-focus .datetime-input,.datetime-input-container.datetime-inverse.datetime-invalid.datetime-focus .datetime-input{color:var(--color-text)}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-bg-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-bg-icon:hover{background-color:#fff!important}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-icon:hover{color:#fff!important}.datetime-input-container.datetime-in-table{--color-surface-neutral: transparent;--color-surface-negative: transparent;--color-surface-positive: transparent}.datetime-input-container.datetime-in-table .datetime-dropdown-icon{opacity:0}.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover):not(.force-invalid) .datetime-input,.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover):not(.force-invalid) .datetime-label{color:var(--color-text-negative)}.datetime-input-container.datetime-in-table:hover .datetime-dropdown-icon,.datetime-input-container.datetime-in-table.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-input-container:hover{background-color:var(--color-surface-neutral-hover)}.datetime-input-container:hover .datetime-bg-icon{color:var(--color-surface-neutral-hover)}.datetime-input-container.datetime-focus{background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus.datetime-in-table:not(.datetime-billing) .datetime-label{opacity:0}.datetime-input-container.datetime-focus:not(.datetime-in-table):not(.datetime-billing) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-focus.datetime-billing .datetime-label{color:#fff!important}.datetime-input-container.datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-input{color:var(--color-text-inverse);opacity:1;pointer-events:auto}.datetime-input-container.datetime-focus .datetime-input .datetime-input-part{height:18px;color:#ffffffb3}.datetime-input-container.datetime-focus .datetime-input .datetime-input-part.filled{color:#fff}.datetime-input-container.datetime-focus .datetime-input .datetime-input-part.highlighted{background-color:#ffffff4d;color:#fff}.datetime-input-container.datetime-focus .datetime-input .datetime-input-separator{color:#ffffffb3}.datetime-input-container.datetime-popover-open .datetime-dropdown-icon{transform:rotateX(180deg)}.datetime-input-container.datetime-has-text .datetime-input{opacity:1;pointer-events:auto!important}.datetime-input-container.datetime-has-text.datetime-disabled .datetime-input{pointer-events:none!important}.datetime-input-container.datetime-has-text:not(.datetime-in-table):not(.datetime-billing) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-has-text.datetime-in-table:not(.datetime-billing) .datetime-label{opacity:0}.datetime-input-container.datetime-valid:not(.datetime-disabled){background-color:var(--color-surface-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover{background-color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#0b49d1}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus{background-color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon,.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon:hover,.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon:hover{color:#0b49d1}.datetime-input-container.datetime-invalid:not(.datetime-disabled){background-color:var(--color-surface-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-error-message{opacity:1;transform:translateY(0)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover{background-color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#c20c0c}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date{background-color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon:hover,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon:hover,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-separator,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-cancel-button,.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-date .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date){background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-error-message{opacity:0}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-date) .datetime-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon,.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon:hover,.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon:hover{color:#c20c0c}.datetime-input-container.datetime-disabled{cursor:default;pointer-events:none}.datetime-input-container.datetime-disabled .datetime-icon,.datetime-input-container.datetime-disabled .datetime-dropdown-icon{cursor:default}.datetime-input-container.datetime-disabled:not(.datetime-in-table){background-color:var(--color-surface-disable)}.datetime-input-container.datetime-disabled.datetime-in-table{background-color:transparent}.datetime-input-container.datetime-disabled .datetime-label{color:var(--color-text-subtle)!important}.datetime-input-container.datetime-disabled .datetime-icon{color:var(--color-icon-disable)}.datetime-input-container.datetime-disabled.datetime-has-text .datetime-icon{color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-separator{background-color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-input{color:var(--color-text)!important}.datetime-input-container.datetime-required .datetime-label:after{content:\" *\";color:var(--color-text-negative)}.datetime-icon-container{display:flex;align-items:center;justify-content:center;gap:4px;width:max-content}.datetime-icon-container.hidden{display:none}.datetime-icon-container .datetime-icon{order:1;cursor:pointer}.datetime-icon-container .datetime-separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .1s ease-in-out;opacity:40%;order:2;margin-right:4px}.datetime-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--color-icon-neutral);transition:color .1s ease-in-out,opacity .1s ease-in-out,transform .15s ease-in-out}.datetime-label{position:absolute;display:flex;gap:4px;left:27px;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out,opacity .1s ease-in-out;transform:translateY(0);-webkit-user-select:none;user-select:none}.datetime-icon-hidden .datetime-label{left:0}.datetime-bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .1s ease-in-out,color .1s ease-in-out,opacity .1s ease-in-out,transform .1s ease-in-out;transform-box:border-box;transform-origin:center;will-change:transform}.datetime-bg-icon:focus-visible{outline:none}.datetime-bg-icon svg{transition:transform .1s ease-in-out}.datetime-bg-icon:hover{transform:scale(1.2222222222)}.datetime-bg-icon:hover svg{transform:scale(.8181818182)}.datetime-bg-icon:active{transform:scale(1)}.datetime-cancel-button{position:absolute;right:26px;top:4px;opacity:0;transition:opacity .1s ease-in-out;pointer-events:none}.datetime-dropdown-icon{position:absolute;right:4px;top:4px;transform:rotateX(0);cursor:pointer}.datetime-size-22{height:22px!important;padding-left:0}.datetime-size-22 .datetime-bg-icon{height:14px!important;width:14px!important;padding:2px!important;right:22px!important}.datetime-size-22 .datetime-icon-container{height:22px!important;padding-top:2px;padding-bottom:2px;padding-left:4px!important}.datetime-size-22 .datetime-input{padding-top:2px;padding-bottom:2px}.datetime-size-22 .datetime-label{padding-top:2px;padding-bottom:2px;padding-left:0!important}.datetime-size-22 .datetime-icon{height:14px!important;width:14px!important}.datetime-size-22.datetime-has-text .datetime-label,.datetime-size-22.datetime-focus .datetime-label{transform:translateY(-18px)!important}.datetime-error-message{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;-webkit-user-select:none;user-select:none;transition:opacity .1s ease-in-out,transform .1s ease-in-out;color:var(--color-text-negative);transform:translateY(-10px);pointer-events:none}.datetime-input-listener{opacity:0;pointer-events:none;position:absolute;inset:0}.datetime-billing .datetime-separator{order:0;margin-right:0;margin-left:4px}.datetime-billing .datetime-cancel-button{right:4px}.datetime-billing .datetime-label{left:0;font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-billing .datetime-icon-container{order:2}.datetime-billing .datetime-input{margin-left:auto;width:max-content}.datetime-billing .datetime-error-message{bottom:4px!important;right:32px!important;transform:translateY(0)!important}.datetime-billing.datetime-focus .datetime-error-message,.datetime-billing.datetime-has-text .datetime-error-message{opacity:0!important}.datetime-billing .datetime-dropdown-icon,.datetime-billing:hover .datetime-icon,.datetime-billing.datetime-focus .datetime-icon{opacity:0}.datetime-billing:hover .datetime-dropdown-icon,.datetime-billing.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-billing.datetime-has-text .datetime-dropdown-icon{opacity:0!important;pointer-events:none!important}.datetime-billing.datetime-has-text:hover .datetime-icon-container,.datetime-billing.datetime-has-text.datetime-focus .datetime-icon-container{pointer-events:none!important}.datetime-billing.datetime-has-text:hover .datetime-icon-container .datetime-icon,.datetime-billing.datetime-has-text.datetime-focus .datetime-icon-container .datetime-icon{opacity:0!important}.datetime-input{font-size:14px;line-height:18px;font-weight:400;width:100%;opacity:0;pointer-events:none;transition:color .1s cubic-bezier(.46,.03,.51,.95),opacity .1s cubic-bezier(.46,.03,.51,.95);-webkit-user-select:none;user-select:none}.datetime-input .datetime-input-separator{background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95)}.datetime-input .datetime-input-part{position:relative;background-color:transparent;transition:color .1s cubic-bezier(.46,.03,.51,.95),background-color .1s cubic-bezier(.46,.03,.51,.95)}.datetime-input .datetime-input-part.time-am-pm{margin-left:4px}.datetime-input .datetime-input-part:after{content:\"\";inset:0 -3px;position:absolute}.datetime-input.selected .datetime-input-part,.datetime-input.selected .datetime-input-separator{background-color:#ffffff4d}.datetime-input.selected .time-am-pm{margin-left:0!important;padding-left:4px!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputListener: [{
+                type: ViewChild,
+                args: ['inputListener']
+            }], mainPopover: [{
+                type: ViewChild,
+                args: ['mainPopover']
+            }], clearButtonTooltip: [{
+                type: ViewChild,
+                args: ['clearButtonTooltip']
+            }], iconContainer: [{
+                type: ViewChild,
+                args: ['iconContainer', { read: ElementRef }]
+            }], dropdownIcon: [{
+                type: ViewChild,
+                args: ['dropdownIcon', { read: ElementRef }]
+            }], id: [{
                 type: Input
             }], inputConfig: [{
                 type: Input
-            }], formFormat: [{
-                type: Input
             }], forceInvalidStyling: [{
                 type: Input
             }], clearInputEvent: [{
@@ -8081,39 +7766,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             }], blurInputEvent: [{
                 type: Output,
                 args: ['blurInput']
-            }], dateTimePopover: [{
-                type: ViewChild,
-                args: ['dateTimePopover']
-            }], t2: [{
-                type: ViewChild,
-                args: ['t2']
-            }], selectLastOneForSelectionEmitter: [{
-                type: Output
-            }], selectLastOneAfterMouseUpEmitter: [{
-                type: Output
-            }], onDatePasteEmitter: [{
-                type: Output
             }], onFocusEmitter: [{
                 type: Output
-            }], changeSelectionEmmiter: [{
-                type: Output
-            }], setSelectionEmmiter: [{
-                type: Output
-            }], span1: [{
-                type: ViewChild,
-                args: ['span1', { static: true }]
-            }], span2: [{
-                type: ViewChild,
-                args: ['span2', { static: true }]
-            }], span3: [{
-                type: ViewChild,
-                args: ['span3', { static: true }]
-            }], holder1: [{
-                type: ViewChild,
-                args: ['holder1', { static: true }]
-            }], closeTooltip: [{
-                type: ViewChild,
-                args: ['closeTooltip']
             }] } });
 
 var eStringPlaceholder;
@@ -8121,6 +7775,66 @@ var eStringPlaceholder;
     eStringPlaceholder["EMPTY"] = "";
 })(eStringPlaceholder || (eStringPlaceholder = {}));
 
+var eGeneralActions;
+(function (eGeneralActions) {
+    eGeneralActions["ADD"] = "Add";
+    eGeneralActions["ADD_LOWERCASE"] = "add";
+    eGeneralActions["ADD_NEW_ITEM"] = "Add New Item";
+    eGeneralActions["UPDATE"] = "Update";
+    eGeneralActions["UPDATE_LOWERCASE"] = "update";
+    eGeneralActions["DELETE"] = "Delete";
+    eGeneralActions["DELETE_LOWERCASE"] = "delete";
+    eGeneralActions["EDIT"] = "Edit";
+    eGeneralActions["EDIT_LOWERCASE"] = "edit";
+    eGeneralActions["EDIT_UPPERCASE"] = "EDIT";
+    eGeneralActions["SAVE"] = "Save";
+    eGeneralActions["SAVE_LOWERCASE"] = "save";
+    eGeneralActions["CANCEL"] = "Cancel";
+    eGeneralActions["CANCEL_LOWERCASE"] = "cancel";
+    eGeneralActions["ENTER"] = "Enter";
+    eGeneralActions["ESCAPE"] = "Escape";
+    eGeneralActions["CONFIRM"] = "Confirm";
+    eGeneralActions["CONFIRM_LOWERCASE"] = "confirm";
+    eGeneralActions["SET"] = "Set";
+    eGeneralActions["SET_LOWERCASE"] = "set";
+    eGeneralActions["REMOVE"] = "Remove";
+    eGeneralActions["REMOVE_LOWERCASE"] = "remove";
+    eGeneralActions["SELECT"] = "Select";
+    eGeneralActions["SELECT_LOWERCASE"] = "select";
+    eGeneralActions["SEARCH"] = "Search";
+    eGeneralActions["SEARCH_LOWERCASE"] = "search";
+    eGeneralActions["SELECT_ALL"] = "Select All";
+    eGeneralActions["SELECT_REMAINING"] = "Select Remaining";
+    eGeneralActions["CLEAR_SELECTED"] = "Clear Selected";
+    eGeneralActions["ACTIVATE"] = "Activate";
+    eGeneralActions["ACTIVATE_LOWERCASE"] = "activate";
+    eGeneralActions["DEACTIVATE"] = "deactivate";
+    eGeneralActions["DEACTIVATE_LOWERCASE"] = "deactivate";
+    eGeneralActions["CLOSE"] = "Close";
+    eGeneralActions["CLOSE_LOWERCASE"] = "close";
+    eGeneralActions["CLOSE_UPPERCASE"] = "CLOSE";
+    eGeneralActions["OPEN"] = "Open";
+    eGeneralActions["OPEN_LOWERCASE"] = "open";
+    eGeneralActions["NEXT"] = "Next";
+    eGeneralActions["NEXT_LOWERCASE"] = "next";
+    eGeneralActions["PREVIOUS"] = "Previous";
+    eGeneralActions["PREVIOUS_LOWERCASE"] = "previous";
+    eGeneralActions["CLEAR"] = "Clear";
+    eGeneralActions["CLEAR_LOWERCASE"] = "clear";
+    eGeneralActions["CLEAR_ALL"] = "Clear All";
+    eGeneralActions["SHOW_MORE"] = "show more";
+    eGeneralActions["OPEN_MODAL"] = "open-modal";
+    eGeneralActions["EXPAND"] = "Expand";
+    eGeneralActions["EXPAND_LOWERCASE"] = "expand";
+    eGeneralActions["EXPAND_UPPERCASE"] = "EXPAND";
+    eGeneralActions["COLLAPSE"] = "Collapse";
+    eGeneralActions["COLLAPSE_LOWERCASE"] = "collapse";
+    eGeneralActions["COLLAPSE_UPPERCASE"] = "COLLAPSE";
+    eGeneralActions["SORT_BY"] = "Sort By";
+    eGeneralActions["COPY"] = "Copy";
+    eGeneralActions["COPIED"] = "Copied";
+})(eGeneralActions || (eGeneralActions = {}));
+
 var eAlignment;
 (function (eAlignment) {
     eAlignment["LEFT"] = "left";
@@ -8157,7 +7871,7 @@ class CopyComponent {
             this.copied.set(false);
         }, 200);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CopyComponent, deps: [{ token: i1$2.Clipboard }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CopyComponent, deps: [{ token: i1$3.Clipboard }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: CopyComponent, isStandalone: true, selector: "cai-copy", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, copyTooltip: { classPropertyName: "copyTooltip", publicName: "copyTooltip", isSignal: true, isRequired: false, transformFunction: null }, copyArea: { classPropertyName: "copyArea", publicName: "copyArea", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, tooltipClass: { classPropertyName: "tooltipClass", publicName: "tooltipClass", isSignal: true, isRequired: false, transformFunction: null }, tooltipPlacement: { classPropertyName: "tooltipPlacement", publicName: "tooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, inverse: { classPropertyName: "inverse", publicName: "inverse", isSignal: true, isRequired: false, transformFunction: null }, hasNoIcon: { classPropertyName: "hasNoIcon", publicName: "hasNoIcon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let isCopied = !!copied();\n<div\n  class=\"copy-container d-flex align-items-center gap-1\"\n  [class]=\"{\n    'copy-area-full': copyArea() === 'full',\n    'has-custom-icon': !!icon(),\n    inverse: inverse(),\n  }\"\n  (mouseleave)=\"resetCopied()\"\n  (click)=\"copyArea() === 'full' && onCopy($event)\"\n  [ngbTooltip]=\"copyArea() === 'full' ? tooltipTemplate : null\"\n  [placement]=\"tooltipPlacement()\"\n  [container]=\"'body'\"\n  [tooltipClass]=\"\n    (isCopied\n      ? 'tooltip-bg-blue-500 '\n      : inverse()\n        ? 'tooltip-bg-white-700 tooltip-text-black-500'\n        : ' ') +\n    ' ' +\n    tooltipClass()\n  \"\n>\n  <div\n    class=\"copy-content\"\n    [class]=\"{\n      'order-1': alignment() === eAlignment.LEFT,\n      'order-0': alignment() === eAlignment.RIGHT,\n    }\"\n  >\n    <ng-content></ng-content>\n  </div>\n  @if (!hasNoIcon()) {\n    <div\n      (click)=\"onCopy($event)\"\n      [ngbTooltip]=\"copyArea() === 'icon' ? tooltipTemplate : null\"\n      [container]=\"'body'\"\n      [tooltipClass]=\"\n        isCopied\n          ? 'input-tooltip tooltip-bg-blue-500'\n          : inverse()\n            ? 'input-tooltip tooltip-bg-white-700 tooltip-text-black-500'\n            : 'input-tooltip'\n      \"\n      [placement]=\"tooltipPlacement()\"\n      [class]=\"'copy-icon-container ' + iconColor()\"\n      [class.active]=\"isCopied\"\n      [style.--icon-size]=\"iconSize() + 'px'\"\n    >\n      <svg-icon\n        [name]=\"icon() || ''\"\n        [class]=\"'icon transition custom-icon'\"\n      ></svg-icon>\n      <svg-icon\n        [name]=\"'cai-copy'\"\n        [class]=\"'icon transition copy-icon'\"\n      ></svg-icon>\n    </div>\n  }\n</div>\n\n@let copyText =\n  isCopied ? eGeneralActions.COPIED : (copyTooltip() ?? eGeneralActions.COPY);\n<ng-template #tooltipTemplate>\n  {{ copyText }}\n</ng-template>\n", styles: [".copy-container .copy-content{max-width:calc(100% - 16px)}.copy-container .copy-icon-container{opacity:0;transition:opacity .1s ease-in-out;position:relative;width:var(--icon-size);height:var(--icon-size)}.copy-container .copy-icon-container .icon{display:flex;align-items:center;justify-content:center;cursor:pointer;width:var(--icon-size);height:var(--icon-size);position:absolute;top:0;left:0}.copy-container:hover .copy-icon-container,.copy-container.has-custom-icon .copy-icon-container,.copy-container.has-custom-icon .custom-icon{opacity:1}.copy-container.has-custom-icon .copy-icon{opacity:0}.copy-container.has-custom-icon:hover .copy-icon{opacity:1}.copy-container.has-custom-icon:hover .custom-icon{opacity:0}.copy-container.copy-area-full{cursor:pointer}.copy-container.copy-area-full:hover .copy-icon-container{color:#424242}.copy-container.copy-area-full:hover .copy-icon-container.blue{color:#0b49d1}.copy-container .copy-icon-container{color:#919191}.copy-container .copy-icon-container:hover{color:#424242}.copy-container .copy-icon-container:hover.blue{color:#0b49d1}.copy-container .copy-icon-container.blue{color:#6692f1}.copy-container .copy-icon-container.active{color:#0b49d1!important}.copy-container.inverse .copy-icon-container{color:#919191}.copy-container.inverse .copy-icon-container:hover{color:#dadada}.copy-container.inverse .copy-icon-container.active{color:#bed0f9!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: 
                 // Components
                 SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }] });
@@ -8170,7 +7884,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         // Components
                         SvgIconComponent,
                     ], template: "@let isCopied = !!copied();\n<div\n  class=\"copy-container d-flex align-items-center gap-1\"\n  [class]=\"{\n    'copy-area-full': copyArea() === 'full',\n    'has-custom-icon': !!icon(),\n    inverse: inverse(),\n  }\"\n  (mouseleave)=\"resetCopied()\"\n  (click)=\"copyArea() === 'full' && onCopy($event)\"\n  [ngbTooltip]=\"copyArea() === 'full' ? tooltipTemplate : null\"\n  [placement]=\"tooltipPlacement()\"\n  [container]=\"'body'\"\n  [tooltipClass]=\"\n    (isCopied\n      ? 'tooltip-bg-blue-500 '\n      : inverse()\n        ? 'tooltip-bg-white-700 tooltip-text-black-500'\n        : ' ') +\n    ' ' +\n    tooltipClass()\n  \"\n>\n  <div\n    class=\"copy-content\"\n    [class]=\"{\n      'order-1': alignment() === eAlignment.LEFT,\n      'order-0': alignment() === eAlignment.RIGHT,\n    }\"\n  >\n    <ng-content></ng-content>\n  </div>\n  @if (!hasNoIcon()) {\n    <div\n      (click)=\"onCopy($event)\"\n      [ngbTooltip]=\"copyArea() === 'icon' ? tooltipTemplate : null\"\n      [container]=\"'body'\"\n      [tooltipClass]=\"\n        isCopied\n          ? 'input-tooltip tooltip-bg-blue-500'\n          : inverse()\n            ? 'input-tooltip tooltip-bg-white-700 tooltip-text-black-500'\n            : 'input-tooltip'\n      \"\n      [placement]=\"tooltipPlacement()\"\n      [class]=\"'copy-icon-container ' + iconColor()\"\n      [class.active]=\"isCopied\"\n      [style.--icon-size]=\"iconSize() + 'px'\"\n    >\n      <svg-icon\n        [name]=\"icon() || ''\"\n        [class]=\"'icon transition custom-icon'\"\n      ></svg-icon>\n      <svg-icon\n        [name]=\"'cai-copy'\"\n        [class]=\"'icon transition copy-icon'\"\n      ></svg-icon>\n    </div>\n  }\n</div>\n\n@let copyText =\n  isCopied ? eGeneralActions.COPIED : (copyTooltip() ?? eGeneralActions.COPY);\n<ng-template #tooltipTemplate>\n  {{ copyText }}\n</ng-template>\n", styles: [".copy-container .copy-content{max-width:calc(100% - 16px)}.copy-container .copy-icon-container{opacity:0;transition:opacity .1s ease-in-out;position:relative;width:var(--icon-size);height:var(--icon-size)}.copy-container .copy-icon-container .icon{display:flex;align-items:center;justify-content:center;cursor:pointer;width:var(--icon-size);height:var(--icon-size);position:absolute;top:0;left:0}.copy-container:hover .copy-icon-container,.copy-container.has-custom-icon .copy-icon-container,.copy-container.has-custom-icon .custom-icon{opacity:1}.copy-container.has-custom-icon .copy-icon{opacity:0}.copy-container.has-custom-icon:hover .copy-icon{opacity:1}.copy-container.has-custom-icon:hover .custom-icon{opacity:0}.copy-container.copy-area-full{cursor:pointer}.copy-container.copy-area-full:hover .copy-icon-container{color:#424242}.copy-container.copy-area-full:hover .copy-icon-container.blue{color:#0b49d1}.copy-container .copy-icon-container{color:#919191}.copy-container .copy-icon-container:hover{color:#424242}.copy-container .copy-icon-container:hover.blue{color:#0b49d1}.copy-container .copy-icon-container.blue{color:#6692f1}.copy-container .copy-icon-container.active{color:#0b49d1!important}.copy-container.inverse .copy-icon-container{color:#919191}.copy-container.inverse .copy-icon-container:hover{color:#dadada}.copy-container.inverse .copy-icon-container.active{color:#bed0f9!important}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.Clipboard }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], copyTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyTooltip", required: false }] }], copyArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyArea", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], tooltipClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipClass", required: false }] }], tooltipPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPlacement", required: false }] }], inverse: [{ type: i0.Input, args: [{ isSignal: true, alias: "inverse", required: false }] }], hasNoIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasNoIcon", required: false }] }] } });
+        }], ctorParameters: () => [{ type: i1$3.Clipboard }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], copyTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyTooltip", required: false }] }], copyArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyArea", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], tooltipClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipClass", required: false }] }], tooltipPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPlacement", required: false }] }], inverse: [{ type: i0.Input, args: [{ isSignal: true, alias: "inverse", required: false }] }], hasNoIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasNoIcon", required: false }] }] } });
 
 const AutocompleteSearchLayer = {
     Venue: 'Venue',
@@ -9869,7 +9583,7 @@ class IntervalDropdownComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: IntervalDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: IntervalDropdownComponent, isStandalone: true, selector: "cai-interval-dropdown", inputs: { selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, companyDays: { classPropertyName: "companyDays", publicName: "companyDays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose", onOpen: "onOpen", onSelectionChange: "onSelectionChange" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "@let isFormValid = form?.valid;\n<div\n  class=\"dropdown-container\"\n  [class.focus]=\"open()\"\n  [ngbPopover]=\"popoverRef\"\n  #container\n  #dropdown=\"ngbPopover\"\n  popoverClass=\"cai-dropdown cai-dropdown-popover\"\n  container=\"body\"\n  placement=\"bottom-start\"\n  [positionTarget]=\"anchor\"\n  [animation]=\"true\"\n  [autoClose]=\"'outside'\"\n  (hidden)=\"handleCloseDropdown()\"\n  (shown)=\"handleOpenDropdown()\"\n  (click)=\"handleClick()\"\n>\n  <div>{{ custom() ? \"Custom\" : selectedOption()?.name }}</div>\n  <svg-icon name=\"cai-arrow-secondary-down\" class=\"dropdown-icon\"></svg-icon>\n  <div #anchor class=\"dropdown-anchor\" [class.custom]=\"custom()\"></div>\n</div>\n@let maxHeight = (options()?.length || 1) * 28 + 6;\n<ng-template #popoverRef>\n  <div\n    class=\"popover-dropdown-menu\"\n    [style.--container-width]=\"containerWidth() + 'px'\"\n    [style.--max-height]=\"\n      custom() ? '124px' : maxHeight > 306 ? '306px' : maxHeight + 'px'\n    \"\n    [class.custom]=\"custom()\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <div class=\"options-container\">\n      <ng-container *ngTemplateOutlet=\"optionsRef\"></ng-container>\n    </div>\n    <div class=\"custom-container\">\n      <ng-container *ngTemplateOutlet=\"customRef\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #optionsRef>\n  @if (options()?.length) {\n    @for (option of options(); track option.id) {\n      @let isSelected = option.id === selectedOption()?.id;\n      @let isCustomSelected = option.name === \"Custom\" && isSelected;\n      <div\n        class=\"dropdown-item\"\n        [class.selected]=\"isSelected\"\n        [class.custom-selected]=\"isCustomSelected\"\n        (pointerdown)=\"handleOption($event, option)\"\n      >\n        <p>{{ option.name }}</p>\n        <svg-icon name=\"cai-checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n      </div>\n    }\n  } @else {\n    <div class=\"dropdown-item no-results\">\n      <p>No results</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #customRef>\n  <div class=\"custom-range-header\">CUSTOM RANGE</div>\n  @if (form) {\n    <div class=\"custom-range-content\" [formGroup]=\"form\">\n      <div class=\"custom-range-content-item\" [class.disabled]=\"!custom()\">\n        <cai-input-datetime-picker\n          formControlName=\"from\"\n          [inputConfig]=\"{ configType: 'from' } | dropdownFilterInputConfig\"\n        ></cai-input-datetime-picker>\n      </div>\n      <div class=\"custom-range-content-item\" [class.disabled]=\"!custom()\">\n        <cai-input-datetime-picker\n          formControlName=\"to\"\n          [inputConfig]=\"{ configType: 'to' } | dropdownFilterInputConfig\"\n        ></cai-input-datetime-picker>\n      </div>\n    </div>\n  }\n  <div class=\"custom-range-footer\">\n    <button\n      class=\"custom-range-button clear\"\n      [class.valid]=\"isFormValid\"\n      (click)=\"handleClearAll($event)\"\n    >\n      CLEAR ALL\n    </button>\n    <button\n      class=\"custom-range-button set\"\n      [class.valid]=\"isFormValid\"\n      (click)=\"handleSet($event)\"\n    >\n      SET\n    </button>\n  </div>\n</ng-template>\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s cubic-bezier(.46,.03,.51,.95) 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.dropdown-container{width:100%;position:relative;padding:4px 6px;display:flex;align-items:center;justify-content:space-between;gap:6px;-webkit-user-select:none;user-select:none;cursor:pointer;border-radius:2px;font-weight:800;font-size:14px;line-height:18px;letter-spacing:0%;transition:background-color .2s cubic-bezier(.46,.03,.51,.95),color .2s cubic-bezier(.46,.03,.51,.95);background-color:#eee;color:#6c6c6c}.dropdown-container .dropdown-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:#919191;transition:color .2s cubic-bezier(.46,.03,.51,.95),transform .2s cubic-bezier(.46,.03,.51,.95);transform:rotate(0)}.dropdown-container:hover:not(.focus){background-color:#dadada;color:#424242}.dropdown-container:hover:not(.focus) .dropdown-icon{color:#424242}.dropdown-container.focus{background-color:#2f2f2f;color:#fff}.dropdown-container.focus .dropdown-icon{transform:rotate(180deg);color:#ffffffb3}.dropdown-anchor{position:absolute;width:100%;-webkit-user-select:none;user-select:none;pointer-events:none;opacity:0;bottom:4px;left:0;transition:transform .2s cubic-bezier(.46,.03,.51,.95)}.popover-dropdown-menu{min-width:0px!important;background-color:#2f2f2f;width:var(--container-width);border:0;border-radius:3px;padding:4px;max-height:306px;z-index:1100!important;overflow-y:scroll;font-family:Montserrat;font-style:normal;position:relative;transition:max-height .2s cubic-bezier(.46,.03,.51,.95),opacity .2s cubic-bezier(.46,.03,.51,.95),height .1s cubic-bezier(.46,.03,.51,.95),width .2s cubic-bezier(.46,.03,.51,.95),transform .2s cubic-bezier(.46,.03,.51,.95);animation:dropdown-menu-opening .2s cubic-bezier(.46,.03,.51,.95);max-height:var(--max-height);height:var(--max-height)}.popover-dropdown-menu::-webkit-scrollbar{display:none}.closing{animation:dropdown-menu-closing .2s cubic-bezier(.46,.03,.51,.95);opacity:0;max-height:0}.options-container{padding:4px;position:absolute;top:0;left:0;width:100%;opacity:1;transition:opacity .1s cubic-bezier(.46,.03,.51,.95)}.custom-container{position:absolute;top:0;left:0;pointer-events:none;opacity:0;transition:opacity .1s cubic-bezier(.46,.03,.51,.95);width:100%;padding:4px}.popover-dropdown-menu.custom{width:300px;transform:translate(-78px);overflow:hidden}.popover-dropdown-menu.custom .options-container{opacity:0;pointer-events:none}.popover-dropdown-menu.custom .custom-container{opacity:1;pointer-events:auto}@keyframes dropdown-menu-opening{0%{max-height:0;opacity:0}to{max-height:306px;opacity:1}}@keyframes dropdown-menu-closing{0%{max-height:306px;opacity:1}to{max-height:0;opacity:0}}.dropdown-item{color:#fff;font-weight:400;font-size:14px;line-height:18px;height:26px;padding:4px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:4px;-webkit-user-select:none;user-select:none;cursor:pointer;background-color:#2f2f2f;transition:background-color .2s cubic-bezier(.46,.03,.51,.95),color .2s cubic-bezier(.46,.03,.51,.95);border-radius:2px;position:relative}.dropdown-item:hover{background-color:#424242;color:#fff}.dropdown-item:focus-visible{background-color:#424242;border:0;outline:none}.dropdown-item.selected{font-weight:700;cursor:default}.dropdown-item.selected .dropdown-item-icon{opacity:1}.dropdown-item.custom-selected{cursor:pointer!important}.dropdown-item .dropdown-item-icon{opacity:0;transition:opacity .2s cubic-bezier(.46,.03,.51,.95);color:#6692f1}.dropdown-item:not(:first-child){margin-top:2px}.no-results{color:#919191;font-weight:700;pointer-events:none}.custom-range-header{color:#fff;font-size:11px;font-weight:800;line-height:14px;text-transform:uppercase;padding:2px 4px 6px;border-bottom:1px solid #424242;margin-bottom:2px;-webkit-user-select:none;user-select:none}.custom-range-footer{padding-top:4px;border-top:1px solid #424242;margin-top:2px;display:flex;align-items:center;justify-content:center;gap:4px}.custom-range-content{padding-top:22px;padding-bottom:18px;margin-top:4px;margin-bottom:4px;display:flex;align-items:center;justify-content:center;gap:4px;-webkit-user-select:none;user-select:none}.custom-range-button{padding:2px;background-color:#91919133;color:#919191;text-align:center;font-size:11px;font-weight:700;line-height:14px;text-transform:uppercase;border-radius:2px;flex:1;cursor:default!important;transition:background-color .2s cubic-bezier(.46,.03,.51,.95),color .2s cubic-bezier(.46,.03,.51,.95);-webkit-user-select:none;user-select:none}.custom-range-button.valid{color:#dadada;cursor:pointer!important}.custom-range-content-item{flex:1}.custom-range-content-item.disabled{pointer-events:none!important;cursor:default!important;z-index:-1!important}.clear.valid:hover{background-color:#eee;color:#424242}.set.valid{background-color:#3b73ed}.set.valid:hover{background-color:#e9effd;color:#0b49d1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: 
                 // Components
-                CaiInputDatetimePickerComponent, selector: "cai-input-datetime-picker", inputs: ["id", "inputConfig", "formFormat", "forceInvalidStyling"], outputs: ["clear", "blurInput", "selectLastOneForSelectionEmitter", "selectLastOneAfterMouseUpEmitter", "onDatePasteEmitter", "onFocusEmitter", "changeSelectionEmmiter", "setSelectionEmmiter"] }, { kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "ngmodule", type: 
+                CaiInputDatetimePickerComponent, selector: "cai-input-datetime-picker, ca-date-time", inputs: ["id", "inputConfig", "forceInvalidStyling"], outputs: ["clear", "blurInput", "onFocusEmitter"] }, { kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "ngmodule", type: 
                 // Bootstrap
                 NgbPopoverModule }, { kind: "directive", type: i2.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "pipe", type: 
                 // Pipes