@acorex/components 19.12.0-next.1 → 19.12.0-next.3

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

@@ -1,9 +1,11 @@
 import { MXInputBaseValueComponent, AXComponent, AXFocusableComponent, AXValuableComponent, AXClearableComponent } from '@acorex/components/common';
 import { AXCalendarService, AXDateTimeModule } from '@acorex/core/date-time';
+import { AXFormatService } from '@acorex/core/format';
+import { AXLocaleService } from '@acorex/core/locale';
 import { AXPlatform } from '@acorex/core/platform';
 import { AXStringUtil } from '@acorex/core/utils';
 import * as i0 from '@angular/core';
-import { inject, input, EventEmitter, signal, forwardRef, HostListener, Input, Output, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { inject, signal, input, linkedSignal, viewChild, output, effect, untracked, forwardRef, HostListener, 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';
@@ -17,8 +19,10 @@ import { CommonModule } from '@angular/common';
 class AXDateTimeInputComponent extends MXInputBaseValueComponent {
     constructor() {
         super(...arguments);
-        this.calendarService = inject(AXCalendarService);
         this.platformService = inject(AXPlatform);
+        this.formatService = inject(AXFormatService);
+        this.localeService = inject(AXLocaleService);
+        this.calendarService = inject(AXCalendarService);
         /**
          *  @ignore
          */
@@ -30,7 +34,7 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
                 enabled: false,
                 default: 2023,
                 typedValue: null,
-                realValue: () => this.editingDateObj.format(this._editingParts.year.placeholder),
+                realValue: () => this.formatService.format(this._editingDate(), 'datetime', this._editingParts.year.placeholder),
             },
             month: {
                 key: 'month',
@@ -39,16 +43,16 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
                 enabled: false,
                 default: 1,
                 typedValue: null,
-                realValue: () => this.editingDateObj.format(this._editingParts.month.placeholder),
+                realValue: () => this.formatService.format(this._editingDate(), 'datetime', this._editingParts.month.placeholder),
             },
             day: {
                 key: 'day',
                 placeholder: 'dd',
-                placeholders: ['dd', 'd', 'DDDD', 'DDD'],
+                placeholders: ['dd', 'DD', 'd', 'dddd', 'E'],
                 enabled: false,
                 default: 1,
                 typedValue: null,
-                realValue: () => this.editingDateObj.format(this._editingParts.day.placeholder),
+                realValue: () => this.formatService.format(this._editingDate(), 'datetime', this._editingParts.day.placeholder),
             },
             hour: {
                 key: 'hour',
@@ -57,7 +61,7 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
                 enabled: false,
                 default: 0,
                 typedValue: null,
-                realValue: () => this.editingDateObj.format(this._editingParts.hour.placeholder),
+                realValue: () => this.formatService.format(this._editingDate(), 'datetime', this._editingParts.hour.placeholder),
             },
             minute: {
                 key: 'minute',
@@ -66,7 +70,7 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
                 enabled: false,
                 default: 0,
                 typedValue: null,
-                realValue: () => this.editingDateObj.format(this._editingParts.minute.placeholder),
+                realValue: () => this.formatService.format(this._editingDate(), 'datetime', this._editingParts.minute.placeholder),
             },
             second: {
                 key: 'second',
@@ -75,145 +79,93 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
                 enabled: false,
                 default: 0,
                 typedValue: null,
-                realValue: () => this.editingDateObj.format(this._editingParts.second.placeholder),
+                realValue: () => this.formatService.format(this._editingDate(), 'datetime', this._editingParts.second.placeholder),
+            },
+            AMPM: {
+                key: 'AMPM',
+                placeholder: 'a',
+                placeholders: ['a', 'A'],
+                enabled: false,
+                default: 0,
+                typedValue: null,
+                realValue: () => this.formatService.format(this._editingDate(), 'datetime', this._editingParts.AMPM.placeholder),
             },
         };
         /**
          *  @ignore
          */
-        this._inputChars = [];
+        this._editingText = signal('');
         /**
          *  @ignore
          */
-        this._type = this.calendarService.calendar.name();
+        this._inputChars = [];
         /**
          * Indicates whether typing is allowed in the input field.
          * @defaultValue false
          */
         this.allowTyping = input(false);
         /**
-         *  @ignore
+         * @description The calendar type to use for the datetime input.
          */
-        this._activePart = 'hour';
+        this.calendar = input(null);
+        this._calendarSystem = linkedSignal(() => this.calendar());
+        this._activePart = signal(null);
+        // TODO: fix this
+        // #effect = effect(() => {
+        //   this._activePart()
+        //   this._clearInputBuffer();
+        // });
+        this._editingDate = linkedSignal(() => this.calendarService.now(this._calendarSystem()));
         /**
          *  @ignore
          */
-        this._editingDateObj = this.calendarService.now(this.type);
-        /**
-         * Emitted when the format of the datetime input changes.
-         * @event
-         */
-        this.formatChange = new EventEmitter();
+        this.input = viewChild('input');
+        this.minValue = input(null);
+        this.maxValue = input(null);
         /**
          * Emitted when a click event occurs on the datetime box.
          * @event
          */
-        this.onClick = new EventEmitter();
+        this.onClick = output();
+        this.picker = input('datetime');
+        this._format = linkedSignal(() => this.format());
         /**
-         *  @ignore
+         * @deprecated use locale & mode instead
          */
-        this._format = this.calendarService.calendar.formats.dateTimeInput;
+        this.format = input();
+        this.#effect = effect(() => {
+            const profile = this.localeService.activeProfile();
+            //
+            if (!this.format()) {
+                this._format.set(this.format() ?? profile.formats[this.picker()]?.short ?? '');
+            }
+            //
+            if (!this.calendar()) {
+                this._calendarSystem.set(profile.calendar.system);
+            }
+            //
+            this._detectParts();
+            untracked(() => {
+                this._updateText();
+            });
+        });
         /**
          * @description check if page is in rtl or ltr
          */
         this.isRtl = signal(this.platformService.isRtl());
     }
-    /**
-     * Gets the type of the datetime input.
-     */
-    get type() {
-        return this._type || this.calendarService.calendar.name();
-    }
-    /**
-     * Sets the type of the datetime input.
-     *
-     * @param v The new type to set for the datetime input.
-     */
-    set type(v) {
-        this.setOption({
-            name: 'type',
-            value: v,
-            afterCallback: () => {
-                this.cdr.markForCheck();
-            },
+    #effect;
+    _detectParts() {
+        Object.values(this._editingParts).forEach((e) => {
+            e.enabled = false;
         });
-    }
-    /**
-     * Gets the currently active part of the datetime input.
-     */
-    get activePart() {
-        return this._activePart;
-    }
-    /**
-     * Sets the currently active part of the datetime input.
-     *
-     * @param v The new name or identifier of the active part.
-     */
-    set activePart(v) {
-        this._activePart = v;
-        this._clearInputBuffer();
-    }
-    /**
-     *  @ignore
-     */
-    get editingDateObj() {
-        return this._editingDateObj;
-    }
-    /**
-     * Gets the minimum allowed date value for the datetime input.
-     */
-    get minValue() {
-        return this._minValue;
-    }
-    /**
-     * Sets the minimum allowable date value for the datetime input.
-     *
-     * @param v The minimum allowable date value to set.
-     */
-    set minValue(v) {
-        this._minValue = v;
-    }
-    /**
-     * Gets the maximum allowed date value for the datetime input.
-     */
-    get maxValue() {
-        return this._maxValue;
-    }
-    /**
-     * Sets the maximum allowable date value for the datetime input.
-     *
-     * @param v - The maximum allowable date value to set.
-     */
-    set maxValue(v) {
-        this._maxValue = v;
-    }
-    /**
-     * Gets or sets the format string for displaying date and time values.
-     */
-    get format() {
-        return this._format;
-    }
-    /**
-     * Sets the format string for displaying date and time values.
-     * @param v - The new format string. It defines how date and time values should be formatted.
-     */
-    set format(v) {
-        this.setOption({
-            name: 'format',
-            value: v,
-            afterCallback: (o, n) => {
-                Object.values(this._editingParts).forEach((e) => {
-                    e.enabled = false;
-                });
-                const formatParts = n.split(/[^a-zA-Z]+/);
-                formatParts.forEach((f) => {
-                    const found = Object.values(this._editingParts).find((c) => c.placeholders.some((d) => d == f));
-                    if (found) {
-                        found.enabled = true;
-                        found.placeholder = f;
-                    }
-                });
-            },
+        const formatParts = this._format().split(/[^a-zA-Z]+/);
+        formatParts.forEach((f) => {
+            const found = Object.values(this._editingParts).find((c) => c.placeholders.some((d) => d == f));
+            if (found) {
+                found.enabled = true;
+                found.placeholder = f;
+            }
         });
     }
     /**
@@ -227,7 +179,7 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
      */
     _getOrderedParts() {
         // TODO: better spliter format
-        const formatParts = this.format.split(/[^a-zA-Z]+/);
+        const formatParts = this._format().split(/[^a-zA-Z]+/);
         const result = [];
         formatParts.forEach((f) => {
             const found = Object.values(this._editingParts).find((c) => c.placeholders.some((d) => d == f));
@@ -246,10 +198,10 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
      *  @ignore
      */
     _updateText() {
-        let text = this.format;
+        let text = this._format();
         //
         Object.values(this._editingParts).forEach((part) => {
-            if (this.activePart == part.key) {
+            if (this._activePart() == part.key) {
                 if (part.typedValue)
                     text = text.replace(part.placeholder, part.typedValue);
             }
@@ -259,8 +211,8 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
                 }
             }
         });
-        this._editingText = text == this.format ? '' : text;
-        if (this.activePart) {
+        this._editingText.set(text == this._format() ? '' : text);
+        if (this._activePart()) {
             this._highlightActivePart();
         }
     }
@@ -271,7 +223,7 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
      */
     internalSetValue(value) {
         if (value) {
-            let editingDate = this.calendarService.create(value, this.type);
+            let editingDate = this.calendarService.create(value, this._calendarSystem());
             let applyChanges = false;
             Object.values(this._editingParts).forEach((part) => {
                 if (!part.enabled) {
@@ -292,8 +244,8 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
      * @ignore
      */
     internalValueChanged(value) {
-        if (value && this.calendarService.isDate(value)) {
-            this._editingDateObj = this.calendarService.create(value, this.type);
+        if (value && this.calendarService.isValidDate(value)) {
+            this._editingDate.set(this.calendarService.create(value, this._calendarSystem()));
         }
         Object.values(this._editingParts).forEach((part) => {
             if (value) {
@@ -320,21 +272,21 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
         const input = e.target;
         //
         const orderedParts = this._getOrderedParts();
-        const part = this.activePart ? this._editingParts[this.activePart] : orderedParts[0];
+        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) {
-                this.activePart = nextPart.key;
+                this._activePart.set(nextPart.key);
                 this._highlightActivePart();
             }
         };
         const goPrev = () => {
             this._clearInputBuffer();
             if (prevPart) {
-                this.activePart = prevPart.key;
+                this._activePart.set(prevPart.key);
                 this._highlightActivePart();
             }
         };
@@ -352,10 +304,10 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
             else {
                 ignore();
                 const sign = e.code === 'ArrowUp' ? +1 : -1;
-                this.activePart = part.key;
-                let newVal = this.editingDateObj.add(part.key, sign);
-                this._editingParts[part.key].typedValue = newVal.format(this._editingParts[part.key].placeholder);
-                this._editingDateObj = newVal;
+                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();
             }
         }
@@ -397,7 +349,10 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
             switch (part.key) {
                 case 'year': {
                     if (editing.placeholder.length == 2 && this._inputChars.length == 0) {
-                        this._inputChars.push(...this.calendarService.now(this.type).format('yyyy').substring(0, 2).split(''));
+                        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}`;
@@ -412,8 +367,8 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
                     editing.typedValue = ('0000' + editing.typedValue).slice(-4);
                     const nv = parseInt(editing.typedValue);
                     //if (nv > 0) {
-                    const newVal = this.editingDateObj.set('year', nv);
-                    this._editingDateObj = newVal;
+                    const newVal = this._editingDate().set('year', nv);
+                    this._editingDate.set(newVal);
                     this._detectValueChanges();
                     //}
                     break;
@@ -441,8 +396,8 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
                     editing.typedValue = editing.typedValue?.length === 1 ? '0' + editing.typedValue : editing.typedValue;
                     const nv = parseInt(editing.typedValue);
                     if (nv > 0) {
-                        const newVal = this.editingDateObj.set(part.key, nv);
-                        this._editingDateObj = newVal;
+                        const newVal = this._editingDate().set(part.key, nv);
+                        this._editingDate.set(newVal);
                         this._detectValueChanges();
                     }
                     break;
@@ -458,7 +413,7 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
                     }
                     else if (this._inputChars.length == 1) {
                         const newStr = parseInt(`${this._inputChars[0]}${e.key}`);
-                        if (newStr > this._editingDateObj.month.totalDays) {
+                        if (newStr > this._editingDate().month.totalDays) {
                             editing.typedValue = `0${e.key}`;
                         }
                         else {
@@ -470,8 +425,8 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
                     editing.typedValue = editing.typedValue?.length === 1 ? '0' + editing.typedValue : editing.typedValue;
                     const nv = parseInt(editing.typedValue);
                     if (nv > 0) {
-                        const newVal = this.editingDateObj.set(part.key, nv);
-                        this._editingDateObj = newVal;
+                        const newVal = this._editingDate().set(part.key, nv);
+                        this._editingDate.set(newVal);
                         this._detectValueChanges();
                     }
                     break;
@@ -495,8 +450,8 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
                         next = true;
                     }
                     editing.typedValue = editing.typedValue?.length === 1 ? '0' + editing.typedValue : editing.typedValue;
-                    const newVal = this.editingDateObj.set('hour', parseInt(editing.typedValue));
-                    this._editingDateObj = newVal;
+                    const newVal = this._editingDate().set('hour', parseInt(editing.typedValue));
+                    this._editingDate.set(newVal);
                     this._detectValueChanges();
                     break;
                 }
@@ -522,8 +477,9 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
                         next = true;
                     }
                     editing.typedValue = editing.typedValue?.length === 1 ? '0' + editing.typedValue : editing.typedValue;
-                    const newVal = this.editingDateObj.set(part.key, parseInt(editing.typedValue));
-                    this._editingDateObj = newVal;
+                    // 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:
@@ -540,7 +496,7 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
      *  @ignore
      */
     _handleKeyUpEvent(e) {
-        if (this.activePart) {
+        if (this._activePart()) {
             this._highlightActivePart();
         }
     }
@@ -576,26 +532,26 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
      *  @ignore
      */
     _detectPartAtPosition() {
-        const input = this.input.nativeElement;
-        if (!input.value)
+        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));
         const orderedParts = this._getOrderedParts();
         const index = valueParts.findIndex((c) => c.index <= sStart && c.index + c[0].length >= sStart);
-        this.activePart = orderedParts[index].key;
+        this._activePart.set(orderedParts[index].key);
         this._highlightActivePart();
     }
     /**
      *  @ignore
      */
     _highlightActivePart() {
-        const input = this.input?.nativeElement;
-        if (!input || !input.value || !this.activePart)
+        const input = this.input();
+        if (!input || !input.value || !this._activePart())
             return;
         const orderedParts = this._getOrderedParts();
-        const index = orderedParts.findIndex((c) => c.key == this.activePart);
+        const index = orderedParts.findIndex((c) => c.key == this._activePart());
         const re = /[a-zA-Z0-9]+/gi;
         const valueParts = Array.from(input.value.matchAll(re));
         const { start, end } = AXStringUtil.getWordBoundsAtPosition(input.value, valueParts[index]?.index);
@@ -607,10 +563,10 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
      *  @ignore
      */
     _detectValueChanges() {
-        this.commitValue(this._editingDateObj.date, true);
+        this.commitValue(this._editingDate().date, true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXDateTimeInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.5", 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 }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: false, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: false, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", readonlyChange: "readonlyChange", disabledChange: "disabledChange", formatChange: "formatChange" }, host: { listeners: { "keydown": "_handleOnKeydownEvent($event)", "keyup": "_handleKeyUpEvent($event)" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.5", 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($event)" } }, providers: [
             { provide: AXComponent, useExisting: AXDateTimeInputComponent },
             { provide: AXFocusableComponent, useExisting: AXDateTimeInputComponent },
             { provide: AXValuableComponent, useExisting: AXDateTimeInputComponent },
@@ -620,20 +576,11 @@ class AXDateTimeInputComponent extends MXInputBaseValueComponent {
                 useExisting: forwardRef(() => AXDateTimeInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: 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=\"display: flex\"\n  [style.justify-items]=\"isRtl() ? 'end' : 'start'\"\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: "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=\"display: flex\"\n  [style.justify-items]=\"isRtl() ? 'end' : 'start'\"\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: "19.2.5", 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',
-                        'onClick',
-                        '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'], providers: [
                         { provide: AXComponent, useExisting: AXDateTimeInputComponent },
                         { provide: AXFocusableComponent, useExisting: AXDateTimeInputComponent },
                         { provide: AXValuableComponent, useExisting: AXDateTimeInputComponent },
@@ -643,23 +590,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", 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=\"display: flex\"\n  [style.justify-items]=\"isRtl() ? 'end' : 'start'\"\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: { type: [{
-                type: Input
-            }], input: [{
-                type: ViewChild,
-                args: ['input']
-            }], minValue: [{
-                type: Input
-            }], maxValue: [{
-                type: Input
-            }], formatChange: [{
-                type: Output
-            }], onClick: [{
-                type: Output
-            }], format: [{
-                type: Input
-            }], _handleOnKeydownEvent: [{
+                    ], 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=\"display: flex\"\n  [style.justify-items]=\"isRtl() ? 'end' : 'start'\"\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: [{