@acorex/components 20.10.1 → 20.10.2

package/fesm2022/acorex-components-datetime-input.mjs

@@ -1,17 +1,17 @@
 import { MXInputBaseValueComponent, AXComponent, AXFocusableComponent, AXValuableComponent, AXClearableComponent } from '@acorex/cdk/common';
 import { AXCalendarService } from '@acorex/core/date-time';
-import { AXFormatService } from '@acorex/core/format';
-import { AXLocaleService } from '@acorex/core/locale';
+import { AXLocaleService, AXIRLocaleProfile } from '@acorex/core/locale';
 import { AXPlatform } from '@acorex/core/platform';
 import { getWordBoundsAtPosition } from '@acorex/core/utils';
 import * as i0 from '@angular/core';
-import { inject, signal, input, computed, linkedSignal, viewChild, output, effect, untracked, forwardRef, HostBinding, HostListener, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { inject, signal, input, output, computed, linkedSignal, viewChild, effect, untracked, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { map } from 'rxjs';
 
 /**
- * A component for date and time input with various custom features.
+ * A component for date and time input with segment-based typing, keyboard navigation,
+ * and calendar-aware formatting (gregorian and solar-hijri).
  *
  * @category Components
  */
@@ -19,12 +19,9 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
     constructor() {
         super(...arguments);
         this.platformService = inject(AXPlatform);
-        this.formatService = inject(AXFormatService);
         this.localeService = inject(AXLocaleService);
         this.calendarService = inject(AXCalendarService);
-        /**
-         *  @ignore
-         */
+        /** @ignore */
         this._editingParts = {
             year: {
                 key: 'year',
@@ -33,7 +30,7 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
                 enabled: false,
                 default: 2023,
                 typedValue: null,
-                realValue: () => this.formatService.format(this._editingDate(), 'datetime', this._editingParts.year.placeholder),
+                realValue: () => this._formatPart(this._editingDate(), this._editingParts.year.placeholder),
             },
             month: {
                 key: 'month',
@@ -42,7 +39,7 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
                 enabled: false,
                 default: 1,
                 typedValue: null,
-                realValue: () => this.formatService.format(this._editingDate(), 'datetime', this._editingParts.month.placeholder),
+                realValue: () => this._formatPart(this._editingDate(), this._editingParts.month.placeholder),
             },
             day: {
                 key: 'day',
@@ -51,7 +48,7 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
                 enabled: false,
                 default: 1,
                 typedValue: null,
-                realValue: () => this.formatService.format(this._editingDate(), 'datetime', this._editingParts.day.placeholder),
+                realValue: () => this._formatPart(this._editingDate(), this._editingParts.day.placeholder),
             },
             hour: {
                 key: 'hour',
@@ -60,7 +57,7 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
                 enabled: false,
                 default: 0,
                 typedValue: null,
-                realValue: () => this.formatService.format(this._editingDate(), 'datetime', this._editingParts.hour.placeholder),
+                realValue: () => this._formatPart(this._editingDate(), this._editingParts.hour.placeholder),
             },
             minute: {
                 key: 'minute',
@@ -69,7 +66,7 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
                 enabled: false,
                 default: 0,
                 typedValue: null,
-                realValue: () => this.formatService.format(this._editingDate(), 'datetime', this._editingParts.minute.placeholder),
+                realValue: () => this._formatPart(this._editingDate(), this._editingParts.minute.placeholder),
             },
             second: {
                 key: 'second',
@@ -78,7 +75,7 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
                 enabled: false,
                 default: 0,
                 typedValue: null,
-                realValue: () => this.formatService.format(this._editingDate(), 'datetime', this._editingParts.second.placeholder),
+                realValue: () => this._formatPart(this._editingDate(), this._editingParts.second.placeholder),
             },
             AMPM: {
                 key: 'AMPM',
@@ -87,19 +84,18 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
                 enabled: false,
                 default: 0,
                 typedValue: null,
-                realValue: () => this.formatService.format(this._editingDate(), 'datetime', this._editingParts.AMPM.placeholder),
+                realValue: () => this._formatPart(this._editingDate(), this._editingParts.AMPM.placeholder),
             },
         };
-        /**
-         *  @ignore
-         */
+        /** @ignore */
         this._editingText = signal('', ...(ngDevMode ? [{ debugName: "_editingText" }] : []));
-        /**
-         *  @ignore
-         */
+        /** @ignore */
         this._inputChars = [];
+        /** @ignore */
+        this._activePart = signal(null, ...(ngDevMode ? [{ debugName: "_activePart" }] : []));
         /**
-         * Indicates whether typing is allowed in the input field.
+         * When true, the user can type digits and navigate segments with the keyboard.
+         * When false, keyboard input is blocked (used by datetime-box picker mode).
          * @defaultValue false
          */
         this.allowTyping = input(false, ...(ngDevMode ? [{ debugName: "allowTyping" }] : []));
@@ -107,45 +103,66 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
          * @description The calendar type to use for the datetime input.
          */
         this.calendar = input(null, ...(ngDevMode ? [{ debugName: "calendar" }] : []));
-        this._calendarSystem = computed(() => this.calendar() ?? this.localeService.activeProfile().calendar.system, ...(ngDevMode ? [{ debugName: "_calendarSystem" }] : []));
-        this._activePart = signal(null, ...(ngDevMode ? [{ debugName: "_activePart" }] : []));
-        // TODO: fix this
-        // #effect = effect(() => {
-        //   this._activePart()
-        //   this._clearInputBuffer();
-        // });
-        this._editingDate = linkedSignal(() => this.calendarService.now(this._calendarSystem()), ...(ngDevMode ? [{ debugName: "_editingDate" }] : []));
-        /**
-         *  @ignore
-         */
-        this.input = viewChild('input', ...(ngDevMode ? [{ debugName: "input" }] : []));
         this.minValue = input(null, ...(ngDevMode ? [{ debugName: "minValue" }] : []));
         this.maxValue = input(null, ...(ngDevMode ? [{ debugName: "maxValue" }] : []));
         /**
-         * Emitted when a click event occurs on the datetime box.
+         * Emitted when a click event occurs on the datetime input.
          * @event
          */
         this.onClick = output();
         this.picker = input('datetime', ...(ngDevMode ? [{ debugName: "picker" }] : []));
-        this._resolvedFormat = computed(() => this.format() ?? this.localeService.activeProfile().formats[this.picker()]?.short ?? '', ...(ngDevMode ? [{ debugName: "_resolvedFormat" }] : []));
         /**
          * @deprecated use locale & mode instead
          */
         this.format = input(...(ngDevMode ? [undefined, { debugName: "format" }] : []));
-        this.#effect = effect(() => {
+        this._calendarSystem = computed(() => this.calendar() ?? this.localeService.activeProfile().calendar.system, ...(ngDevMode ? [{ debugName: "_calendarSystem" }] : []));
+        this._resolvedFormat = computed(() => {
+            if (this.format()) {
+                return this.format();
+            }
+            // Calendar override can differ from the active locale; solar-hijri uses day/month/year.
+            const formats = this._calendarSystem() === 'solar-hijri'
+                ? AXIRLocaleProfile.formats
+                : this.localeService.activeProfile().formats;
+            return formats[this.picker()]?.short ?? '';
+        }, ...(ngDevMode ? [{ debugName: "_resolvedFormat" }] : []));
+        /** @ignore */
+        this._editingDate = linkedSignal(() => this.calendarService.now(this._calendarSystem()), ...(ngDevMode ? [{ debugName: "_editingDate" }] : []));
+        /** @ignore */
+        this.inputRef = viewChild('input', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
+        /**
+         * @description check if page is in rtl or ltr
+         */
+        this.isRtl = signal(this.platformService.isRtl(), ...(ngDevMode ? [{ debugName: "isRtl" }] : []));
+        /** @ignore */
+        this.#formatEffect = effect(() => {
             this._resolvedFormat();
             this._calendarSystem();
             this._detectParts();
             untracked(() => {
-                this._updateText();
+                this.internalValueChanged(this.value);
             });
-        }, ...(ngDevMode ? [{ debugName: "#effect" }] : []));
-        /**
-         * @description check if page is in rtl or ltr
-         */
-        this.isRtl = signal(this.platformService.isRtl(), ...(ngDevMode ? [{ debugName: "isRtl" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "#formatEffect" }] : []));
     }
-    #effect;
+    /** @ignore */
+    get inputElement() {
+        return this.inputRef()?.nativeElement;
+    }
+    /** @ignore */
+    #formatEffect;
+    /** @ignore */
+    ngOnInit() {
+        super.ngOnInit();
+        this.platformService.directionChange.pipe(map((i) => i.data === 'rtl')).subscribe((isRtl) => this.isRtl.set(isRtl));
+    }
+    /**
+     * Formats a part using the calendar already attached to the AXDateTime.
+     * @ignore
+     */
+    _formatPart(date, placeholder) {
+        return date.format(placeholder);
+    }
+    /** @ignore */
     _detectParts() {
         Object.values(this._editingParts).forEach((e) => {
             e.enabled = false;
@@ -159,17 +176,8 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
             }
         });
     }
-    /**
-     * @description listen to direction change to react to it.
-     */
-    ngOnInit() {
-        this.platformService.directionChange.pipe(map((i) => i.data === 'rtl')).subscribe((isRtl) => this.isRtl.set(isRtl));
-    }
-    /**
-     *  @ignore
-     */
+    /** @ignore */
     _getOrderedParts() {
-        // TODO: better spliter format
         const formatParts = this._resolvedFormat().split(/[^a-zA-Z]+/);
         const result = [];
         formatParts.forEach((f) => {
@@ -179,18 +187,13 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
         });
         return result;
     }
-    /**
-     *  @ignore
-     */
+    /** @ignore */
     _clearInputBuffer() {
         this._inputChars = [];
     }
-    /**
-     *  @ignore
-     */
+    /** @ignore */
     _updateText() {
         let text = this._resolvedFormat();
-        //
         Object.values(this._editingParts).forEach((part) => {
             if (this._activePart() == part.key) {
                 if (part.typedValue)
@@ -207,52 +210,50 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
             this._highlightActivePart();
         }
     }
-    //TODO: fix this
-    /**
-     * Sets the internal date value, adjusting it based on editing parts.
-     * @param value - The date to set. Returns `undefined` if no value is provided.
-     * @ignore
-     */
-    // override internalSetValue(value?: Date) {
-    //   console.log('internalSetValue', value);
-    //   if (value) {
-    //     let editingDate = this.calendarService.create(value, this._calendarSystem());
-    //     let applyChanges = false;
-    //     Object.values(this._editingParts).forEach((part) => {
-    //       if (!part.enabled) {
-    //         editingDate = editingDate.set(part.key as TimeUnit, part.default);
-    //         applyChanges = true;
-    //       }
-    //     });
-    //     if (applyChanges) {
-    //       return editingDate.date;
-    //     }
-    //   }
-    //   return value;
-    // }
     /**
      * Handles changes to the internal date value, updating editing parts and text representation.
-     *
-     * @param value - The new date value. If not provided, resets editing parts.
      * @ignore
      */
     internalValueChanged(value) {
         if (value && this.calendarService.isValidDate(value)) {
-            this._editingDate.set(this.calendarService.create(value, this._calendarSystem()));
-        }
-        Object.values(this._editingParts).forEach((part) => {
-            if (value) {
-                if (part.typedValue != part.placeholder)
-                    part.typedValue = part.realValue();
+            const next = this.calendarService.create(value, this._calendarSystem());
+            const sameAsEditing = this._editingDate().date.getTime() === next.date.getTime();
+            this._editingDate.set(next);
+            // Parent ngModel echo after typing — keep the in-progress segment buffer.
+            if (sameAsEditing && this._activePart()) {
+                this._updateText();
+                return;
             }
-            else
+            Object.values(this._editingParts).forEach((part) => {
+                part.typedValue = part.enabled ? part.realValue() : null;
+            });
+            this._clearInputBuffer();
+        }
+        else {
+            Object.values(this._editingParts).forEach((part) => {
                 part.typedValue = null;
-        });
+            });
+            this._clearInputBuffer();
+        }
         this._updateText();
     }
     /**
-     *  @ignore
+     * Normalizes Persian (U+06F0-U+06F9) and Arabic-Indic (U+0660-U+0669) digits to ASCII.
+     * @ignore
      */
+    _normalizeDigit(key) {
+        if (!key || key.length !== 1)
+            return null;
+        const code = key.charCodeAt(0);
+        if (code >= 0x30 && code <= 0x39)
+            return key;
+        if (code >= 0x06f0 && code <= 0x06f9)
+            return String.fromCharCode(code - 0x06f0 + 0x30);
+        if (code >= 0x0660 && code <= 0x0669)
+            return String.fromCharCode(code - 0x0660 + 0x30);
+        return null;
+    }
+    /** @ignore */
     _handleOnKeydownEvent(e) {
         const ignore = () => {
             if (e.key === 'Tab' || e.code === 'Space' || e.code === 'Enter') {
@@ -266,12 +267,10 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
             return;
         }
         const input = e.target;
-        //
         const orderedParts = this._getOrderedParts();
         const part = this._activePart() ? this._editingParts[this._activePart()] : orderedParts[0];
         const nextPart = part ? orderedParts[orderedParts.indexOf(part) + 1] : null;
         const prevPart = part ? orderedParts[orderedParts.indexOf(part) - 1] : null;
-        //
         const goNext = () => {
             this._clearInputBuffer();
             if (nextPart) {
@@ -286,41 +285,48 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
                 this._highlightActivePart();
             }
         };
-        /***************  Handle Left and Right  **************/
+        const digit = this._normalizeDigit(e.key);
         if (e.code === 'ArrowRight' || e.code === 'ArrowLeft') {
             ignore();
-            e.code === 'ArrowRight' ? goNext() : goPrev();
+            if (!this._activePart()) {
+                this._activePart.set(part?.key ?? null);
+                this._highlightActivePart();
+            }
+            else {
+                e.code === 'ArrowRight' ? goNext() : goPrev();
+            }
         }
         else if ((e.code === 'ArrowUp' || e.code === 'ArrowDown') && !e.ctrlKey) {
-            /***************  Handle Up and Down  **************/
-            if (this.disabled || this.readonly) {
-                ignore();
+            ignore();
+            if (this.disabled || this.readonly || !part) {
                 return;
             }
-            else {
-                ignore();
-                const sign = e.code === 'ArrowUp' ? +1 : -1;
-                this._activePart.set(part.key);
-                const newVal = this._editingDate().add(part.key, sign);
-                this._editingParts[part.key].typedValue = this.formatService.format(newVal, 'datetime', this._editingParts[part.key].placeholder);
-                this._editingDate.set(newVal);
-                this._detectValueChanges();
-            }
+            const sign = e.code === 'ArrowUp' ? +1 : -1;
+            this._activePart.set(part.key);
+            this._clearInputBuffer();
+            const unit = part.key === 'AMPM' ? 'hour' : part.key;
+            const amount = part.key === 'AMPM' ? sign * 12 : sign;
+            const newVal = this._editingDate().add(unit, amount);
+            this._editingDate.set(newVal);
+            this._getOrderedParts().forEach((p) => {
+                p.typedValue = p.realValue();
+            });
+            this._detectValueChanges();
         }
         else if (e.code == 'Backspace' || e.code == 'Delete') {
-            /***************  Handle Backspace  **************/
-            if (this.disabled || this.readonly) {
+            if (this.disabled || this.readonly || !part) {
                 return;
             }
             if (input.value) {
                 ignore();
+                this._clearInputBuffer();
+                this._activePart.set(part.key);
                 this._editingParts[part.key].typedValue = this._editingParts[part.key].placeholder;
-                this._detectValueChanges();
+                this._updateText();
                 goPrev();
             }
         }
         else if (e.code == 'Tab' || e.code == 'Space') {
-            /***************  Handle Backspace  **************/
             if (input.value) {
                 if (!e.shiftKey && nextPart) {
                     ignore();
@@ -331,192 +337,184 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
                     goPrev();
                 }
             }
-            // TODO: FiX type in input
         }
-        else if (e.key?.trim() && !isNaN(Number(e.key))) {
+        else if (digit != null) {
+            ignore();
+            if (this.disabled || this.readonly || !part) {
+                return;
+            }
+            this._activePart.set(part.key);
+            this._handleDigitInput(part, digit, goNext);
+        }
+        else if (part?.key === 'AMPM' && (e.key?.toLowerCase() === 'a' || e.key?.toLowerCase() === 'p')) {
             ignore();
-            return;
             if (this.disabled || this.readonly) {
                 return;
             }
-            let next = false;
-            const editing = this._editingParts[part.key];
-            //
-            switch (part.key) {
-                case 'year': {
-                    if (editing.placeholder.length == 2 && this._inputChars.length == 0) {
-                        this._inputChars.push(...this.formatService
-                            .format(this.calendarService.now(this._calendarSystem()), 'datetime', 'yyyy')
-                            .substring(0, 2)
-                            .split(''));
-                    }
-                    if (this._inputChars.length < 4) {
-                        editing.typedValue = `${this._inputChars.join('')}${e.key}`;
-                        this._inputChars.push(e.key);
-                        if (this._inputChars.length > 3) {
-                            next = true;
-                        }
-                    }
-                    else {
-                        next = true;
-                    }
-                    editing.typedValue = ('0000' + editing.typedValue).slice(-4);
-                    const nv = parseInt(editing.typedValue);
-                    //if (nv > 0) {
-                    const newVal = this._editingDate().set('year', nv);
-                    this._editingDate.set(newVal);
-                    this._detectValueChanges();
-                    //}
-                    break;
+            const hour = this._editingDate().hour;
+            const wantsPM = e.key.toLowerCase() === 'p';
+            if (wantsPM && hour < 12) {
+                this._applyEditingDate(this._editingDate().add('hour', 12));
+            }
+            else if (!wantsPM && hour >= 12) {
+                this._applyEditingDate(this._editingDate().add('hour', -12));
+            }
+        }
+        else {
+            ignore();
+        }
+        super.emitOnKeydownEvent(e);
+    }
+    /** @ignore */
+    _handleDigitInput(part, digit, goNext) {
+        let next = false;
+        const editing = this._editingParts[part.key];
+        switch (part.key) {
+            case 'year': {
+                if (editing.placeholder.length == 2 && this._inputChars.length == 0) {
+                    this._inputChars.push(...this._formatPart(this.calendarService.now(this._calendarSystem()), 'yyyy').substring(0, 2).split(''));
                 }
-                case 'month': {
-                    if (this._inputChars.length == 0) {
-                        this._inputChars.push(e.key);
-                        editing.typedValue = `0${e.key}`;
-                        if (parseInt(e.key) > 1) {
-                            this._clearInputBuffer();
-                            next = true;
-                        }
-                    }
-                    else if (this._inputChars.length == 1) {
-                        const newStr = parseInt(`${this._inputChars[0]}${e.key}`);
-                        if (newStr > 12) {
-                            editing.typedValue = `0${e.key}`;
-                        }
-                        else {
-                            editing.typedValue = newStr.toString();
-                        }
-                        this._clearInputBuffer();
+                this._inputChars.push(digit);
+                editing.typedValue = ('0000' + this._inputChars.join('')).slice(-4);
+                if (this._inputChars.length >= 4) {
+                    next = true;
+                }
+                const nv = parseInt(editing.typedValue);
+                if (nv > 0) {
+                    this._applyEditingDate(this._editingDate().set('year', nv));
+                }
+                break;
+            }
+            case 'month': {
+                if (this._inputChars.length == 0) {
+                    this._inputChars.push(digit);
+                    editing.typedValue = `0${digit}`;
+                    if (parseInt(digit) > 1) {
                         next = true;
                     }
-                    editing.typedValue = editing.typedValue?.length === 1 ? '0' + editing.typedValue : editing.typedValue;
-                    const nv = parseInt(editing.typedValue);
-                    if (nv > 0) {
-                        const newVal = this._editingDate().set(part.key, nv);
-                        this._editingDate.set(newVal);
-                        this._detectValueChanges();
-                    }
-                    break;
                 }
-                case 'day': {
-                    if (this._inputChars.length == 0) {
-                        this._inputChars.push(e.key);
-                        editing.typedValue = `0${e.key}`;
-                        if (parseInt(e.key) > 3) {
-                            this._clearInputBuffer();
-                            next = true;
-                        }
-                    }
-                    else if (this._inputChars.length == 1) {
-                        const newStr = parseInt(`${this._inputChars[0]}${e.key}`);
-                        if (newStr > this._editingDate().month.totalDays) {
-                            editing.typedValue = `0${e.key}`;
-                        }
-                        else {
-                            editing.typedValue = newStr.toString();
-                        }
-                        this._clearInputBuffer();
+                else {
+                    const combined = parseInt(`${this._inputChars[0]}${digit}`);
+                    editing.typedValue = combined > 12 || combined < 1 ? `0${digit}` : `${combined}`.padStart(2, '0');
+                    next = true;
+                }
+                const nv = parseInt(editing.typedValue);
+                if (nv > 0) {
+                    this._applyEditingDate(this._editingDate().set('month', nv));
+                }
+                break;
+            }
+            case 'day': {
+                const totalDays = this._editingDate().month.totalDays;
+                if (this._inputChars.length == 0) {
+                    this._inputChars.push(digit);
+                    editing.typedValue = `0${digit}`;
+                    if (parseInt(digit) > Math.floor(totalDays / 10)) {
                         next = true;
                     }
-                    editing.typedValue = editing.typedValue?.length === 1 ? '0' + editing.typedValue : editing.typedValue;
-                    const nv = parseInt(editing.typedValue);
-                    if (nv > 0) {
-                        const newVal = this._editingDate().set(part.key, nv);
-                        this._editingDate.set(newVal);
-                        this._detectValueChanges();
-                    }
-                    break;
                 }
-                case 'hour': {
-                    if (this._inputChars.length == 0) {
-                        this._inputChars.push(e.key);
-                        editing.typedValue = `0${e.key}`;
-                        if (parseInt(e.key) > 2) {
-                            next = true;
-                        }
-                    }
-                    else if (this._inputChars.length == 1) {
-                        const newStr = parseInt(`${this._inputChars[0]}${e.key}`);
-                        if (newStr > 23) {
-                            editing.typedValue = `0${e.key}`;
-                        }
-                        else {
-                            editing.typedValue = newStr.toString();
-                        }
+                else {
+                    const combined = parseInt(`${this._inputChars[0]}${digit}`);
+                    editing.typedValue = combined > totalDays || combined < 1 ? `0${digit}` : `${combined}`.padStart(2, '0');
+                    next = true;
+                }
+                const nv = parseInt(editing.typedValue);
+                if (nv > 0) {
+                    this._applyEditingDate(this._editingDate().set('day', nv));
+                }
+                break;
+            }
+            case 'hour': {
+                if (this._inputChars.length == 0) {
+                    this._inputChars.push(digit);
+                    editing.typedValue = `0${digit}`;
+                    if (parseInt(digit) > 2) {
                         next = true;
                     }
-                    editing.typedValue = editing.typedValue?.length === 1 ? '0' + editing.typedValue : editing.typedValue;
-                    const newVal = this._editingDate().set('hour', parseInt(editing.typedValue));
-                    this._editingDate.set(newVal);
-                    this._detectValueChanges();
-                    break;
                 }
-                case 'minute':
-                case 'second':
-                    if (this._inputChars.length == 0) {
-                        this._inputChars.push(e.key);
-                        editing.typedValue = `0${e.key}`;
-                        if (parseInt(e.key) > 5) {
-                            this._clearInputBuffer();
-                            next = true;
-                        }
-                    }
-                    else if (this._inputChars.length == 1) {
-                        const newStr = parseInt(`${this._inputChars[0]}${e.key}`);
-                        if (newStr > 59) {
-                            editing.typedValue = `0${e.key}`;
-                        }
-                        else {
-                            editing.typedValue = newStr.toString();
-                        }
-                        this._clearInputBuffer();
+                else {
+                    const combined = parseInt(`${this._inputChars[0]}${digit}`);
+                    editing.typedValue = combined > 23 ? `0${digit}` : `${combined}`.padStart(2, '0');
+                    next = true;
+                }
+                this._applyEditingDate(this._editingDate().set('hour', parseInt(editing.typedValue)));
+                break;
+            }
+            case 'minute':
+            case 'second': {
+                if (this._inputChars.length == 0) {
+                    this._inputChars.push(digit);
+                    editing.typedValue = `0${digit}`;
+                    if (parseInt(digit) > 5) {
                         next = true;
                     }
-                    editing.typedValue = editing.typedValue?.length === 1 ? '0' + editing.typedValue : editing.typedValue;
-                    // eslint-disable-next-line no-case-declarations
-                    const newVal = this._editingDate().set(part.key, parseInt(editing.typedValue));
-                    this._editingDate.set(newVal);
-                    this._detectValueChanges();
-                    break;
-                default:
+                }
+                else {
+                    const combined = parseInt(`${this._inputChars[0]}${digit}`);
+                    editing.typedValue = combined > 59 ? `0${digit}` : `${combined}`.padStart(2, '0');
+                    next = true;
+                }
+                this._applyEditingDate(this._editingDate().set(part.key, parseInt(editing.typedValue)));
+                break;
             }
-            if (next) {
-                goNext();
+            default:
                 return;
-            }
         }
-        /***************  Emit Event  **************/
-        super.emitOnKeydownEvent(e);
+        if (next) {
+            goNext();
+        }
     }
-    /**
-     *  @ignore
-     */
+    /** @ignore */
+    _applyEditingDate(value) {
+        this._editingDate.set(value);
+        this._detectValueChanges();
+    }
+    /** @ignore */
     _handleKeyUpEvent() {
         if (this._activePart()) {
             this._highlightActivePart();
         }
     }
-    /**
-     *  @ignore
-     */
+    /** @ignore */
     _handleFocusEvent(e) {
-        //this._highlightActivePart();
+        if (this.allowTyping()) {
+            setTimeout(() => this._selectFirstPart(), 0);
+        }
         super.emitOnFocusEvent(e);
     }
-    /**
-     *  @ignore
-     */
+    /** @ignore */
     _handleBlurEvent(e) {
+        this._activePart.set(null);
+        this._clearInputBuffer();
+        if (this.allowTyping()) {
+            this._clampToRange();
+            if (!this.value) {
+                Object.values(this._editingParts).forEach((part) => {
+                    part.typedValue = null;
+                });
+                this._editingText.set('');
+            }
+        }
         super.emitOnBlurEvent(e);
     }
-    /**
-     *  @ignore
-     */
+    /** @ignore */
+    _clampToRange() {
+        const value = this.value;
+        if (!value)
+            return;
+        const min = this.minValue();
+        const max = this.maxValue();
+        if (min && value.getTime() < min.getTime()) {
+            this.commitValue(new Date(min), true);
+        }
+        else if (max && value.getTime() > max.getTime()) {
+            this.commitValue(new Date(max), true);
+        }
+    }
+    /** @ignore */
     _handleOnInputClickEvent(e) {
         if (this.allowTyping()) {
-            setTimeout(() => {
-                this._detectPartAtPosition();
-            }, 0);
+            setTimeout(() => this._selectFirstPart(), 0);
         }
         this.onClick.emit({
             component: this,
@@ -524,26 +522,39 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
             nativeEvent: e,
         });
     }
-    /**
-     *  @ignore
-     */
-    _detectPartAtPosition() {
-        const input = this.input();
-        if (!input || !input.value)
-            return;
-        const sStart = input.selectionEnd || 0;
-        const re = /[a-zA-Z0-9]+/gi;
-        const valueParts = Array.from(input.value.matchAll(re));
+    /** @ignore */
+    _selectFirstPart() {
         const orderedParts = this._getOrderedParts();
-        const index = valueParts.findIndex((c) => c.index <= sStart && c.index + c[0].length >= sStart);
-        this._activePart.set(orderedParts[index].key);
-        this._highlightActivePart();
+        if (!orderedParts.length)
+            return;
+        this._clearInputBuffer();
+        this._activePart.set(orderedParts[0].key);
+        const wasEmpty = !this._editingText();
+        this._ensureEditableText();
+        if (wasEmpty) {
+            setTimeout(() => this._highlightActivePart(), 0);
+        }
+        else {
+            this._highlightActivePart();
+        }
     }
-    /**
-     *  @ignore
-     */
+    /** @ignore */
+    _ensureEditableText() {
+        if (this._editingText())
+            return;
+        const format = this._resolvedFormat();
+        if (!format)
+            return;
+        Object.values(this._editingParts).forEach((part) => {
+            if (part.enabled && part.typedValue == null) {
+                part.typedValue = part.placeholder;
+            }
+        });
+        this._editingText.set(format);
+    }
+    /** @ignore */
     _highlightActivePart() {
-        const input = this.input();
+        const input = this.inputElement;
         if (!input || !input.value || !this._activePart())
             return;
         const orderedParts = this._getOrderedParts();
@@ -555,17 +566,12 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
             input.setSelectionRange(start, end);
         }
     }
-    /**
-     *  @ignore
-     */
+    /** @ignore */
     _detectValueChanges() {
         this.commitValue(this._editingDate().date, true);
     }
-    get __hostName() {
-        return this.name;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDateTimeInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", type: AXDateTimeInputComponent, isStandalone: true, selector: "ax-datetime-input", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, allowTyping: { classPropertyName: "allowTyping", publicName: "allowTyping", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, picker: { classPropertyName: "picker", publicName: "picker", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onClick: "onClick" }, host: { listeners: { "keydown": "_handleOnKeydownEvent($event)", "keyup": "_handleKeyUpEvent()" }, properties: { "attr.name": "this.__hostName" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", type: AXDateTimeInputComponent, isStandalone: true, selector: "ax-datetime-input", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, allowTyping: { classPropertyName: "allowTyping", publicName: "allowTyping", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, picker: { classPropertyName: "picker", publicName: "picker", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onKeyDown: "onKeyDown", onKeyUp: "onKeyUp", onKeyPress: "onKeyPress", onClick: "onClick" }, host: { listeners: { "keydown": "_handleOnKeydownEvent($event)", "keyup": "_handleKeyUpEvent()" }, properties: { "attr.name": "name" } }, providers: [
             { provide: AXComponent, useExisting: AXDateTimeInputComponent },
             { provide: AXFocusableComponent, useExisting: AXDateTimeInputComponent },
             { provide: AXValuableComponent, useExisting: AXDateTimeInputComponent },
@@ -575,11 +581,22 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
                 useExisting: forwardRef(() => AXDateTimeInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<input\n  #input\n  id=\"input\"\n  autocomplete=\"off\"\n  autocorrect=\"off\"\n  autocapitalize=\"off\"\n  spellcheck=\"false\"\n  class=\"ax-input\"\n  type=\"text\"\n  [attr.placeholder]=\"placeholder\"\n  [class.ax-state-disabled]=\"disabled\"\n  [class.ax-select-none]=\"!allowTyping()\"\n  [class.ax-state-readonly]=\"readonly\"\n  [disabled]=\"disabled\"\n  [readonly]=\"true\"\n  [ngModel]=\"_editingText()\"\n  (mouseup)=\"_handleOnInputClickEvent($event)\"\n  (blur)=\"_handleBlurEvent($event)\"\n  (focus)=\"_handleFocusEvent($event)\"\n  [style.text-align]=\"isRtl() ? 'end' : 'start'\"\n  [tabindex]=\"tabIndex\"\n/>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: [".ax-select-none,.ax-select-none *{-webkit-user-select:none!important;user-select:none!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<input\n  #input\n  id=\"input\"\n  autocomplete=\"off\"\n  autocorrect=\"off\"\n  autocapitalize=\"off\"\n  spellcheck=\"false\"\n  class=\"ax-input\"\n  type=\"text\"\n  [dir]=\"isRtl() ? 'rtl' : 'ltr'\"\n  [attr.placeholder]=\"placeholder || _resolvedFormat()\"\n  [class.ax-state-disabled]=\"disabled\"\n  [class.ax-select-none]=\"!allowTyping()\"\n  [class.ax-state-readonly]=\"readonly\"\n  [disabled]=\"disabled\"\n  [readonly]=\"true\"\n  [ngModel]=\"_editingText()\"\n  (mouseup)=\"_handleOnInputClickEvent($event)\"\n  (blur)=\"_handleBlurEvent($event)\"\n  (focus)=\"_handleFocusEvent($event)\"\n  [style.text-align]=\"isRtl() ? 'end' : 'start'\"\n  [tabindex]=\"tabIndex\"\n/>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: [".ax-select-none,.ax-select-none *{-webkit-user-select:none!important;user-select:none!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDateTimeInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-datetime-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id'], outputs: ['valueChange', 'stateChange', 'onValueChanged', 'onBlur', 'onFocus', 'readonlyChange', 'disabledChange'], providers: [
+            args: [{ selector: 'ax-datetime-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id'], outputs: [
+                        'valueChange',
+                        'stateChange',
+                        'onValueChanged',
+                        'onBlur',
+                        'onFocus',
+                        'readonlyChange',
+                        'disabledChange',
+                        'onKeyDown',
+                        'onKeyUp',
+                        'onKeyPress',
+                    ], providers: [
                         { provide: AXComponent, useExisting: AXDateTimeInputComponent },
                         { provide: AXFocusableComponent, useExisting: AXDateTimeInputComponent },
                         { provide: AXValuableComponent, useExisting: AXDateTimeInputComponent },
@@ -589,17 +606,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                             useExisting: forwardRef(() => AXDateTimeInputComponent),
                             multi: true,
                         },
-                    ], imports: [FormsModule], template: "<input\n  #input\n  id=\"input\"\n  autocomplete=\"off\"\n  autocorrect=\"off\"\n  autocapitalize=\"off\"\n  spellcheck=\"false\"\n  class=\"ax-input\"\n  type=\"text\"\n  [attr.placeholder]=\"placeholder\"\n  [class.ax-state-disabled]=\"disabled\"\n  [class.ax-select-none]=\"!allowTyping()\"\n  [class.ax-state-readonly]=\"readonly\"\n  [disabled]=\"disabled\"\n  [readonly]=\"true\"\n  [ngModel]=\"_editingText()\"\n  (mouseup)=\"_handleOnInputClickEvent($event)\"\n  (blur)=\"_handleBlurEvent($event)\"\n  (focus)=\"_handleFocusEvent($event)\"\n  [style.text-align]=\"isRtl() ? 'end' : 'start'\"\n  [tabindex]=\"tabIndex\"\n/>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: [".ax-select-none,.ax-select-none *{-webkit-user-select:none!important;user-select:none!important}\n"] }]
-        }], propDecorators: { _handleOnKeydownEvent: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], _handleKeyUpEvent: [{
-                type: HostListener,
-                args: ['keyup']
-            }], __hostName: [{
-                type: HostBinding,
-                args: ['attr.name']
-            }] } });
+                    ], imports: [FormsModule], host: {
+                        '(keydown)': '_handleOnKeydownEvent($event)',
+                        '(keyup)': '_handleKeyUpEvent()',
+                        '[attr.name]': 'name',
+                    }, template: "<input\n  #input\n  id=\"input\"\n  autocomplete=\"off\"\n  autocorrect=\"off\"\n  autocapitalize=\"off\"\n  spellcheck=\"false\"\n  class=\"ax-input\"\n  type=\"text\"\n  [dir]=\"isRtl() ? 'rtl' : 'ltr'\"\n  [attr.placeholder]=\"placeholder || _resolvedFormat()\"\n  [class.ax-state-disabled]=\"disabled\"\n  [class.ax-select-none]=\"!allowTyping()\"\n  [class.ax-state-readonly]=\"readonly\"\n  [disabled]=\"disabled\"\n  [readonly]=\"true\"\n  [ngModel]=\"_editingText()\"\n  (mouseup)=\"_handleOnInputClickEvent($event)\"\n  (blur)=\"_handleBlurEvent($event)\"\n  (focus)=\"_handleFocusEvent($event)\"\n  [style.text-align]=\"isRtl() ? 'end' : 'start'\"\n  [tabindex]=\"tabIndex\"\n/>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: [".ax-select-none,.ax-select-none *{-webkit-user-select:none!important;user-select:none!important}\n"] }]
+        }] });
 
 class AXDateTimeInputModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDateTimeInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }