@acorex/components 22.0.0-next.4 → 22.0.0-next.7

package/datetime-text-box/README.md

@@ -0,0 +1,3 @@
+# @acorex/components/datetime-text-box
+
+Secondary entry point of `@acorex/components`. It can be used by importing from `@acorex/components/datetime-text-box`.

package/fesm2022/acorex-components-datetime-text-box.mjs

@@ -0,0 +1,632 @@
+import { MXInputBaseValueComponent, MXLookComponent, AXComponent, AXFocusableComponent, AXValuableComponent, AXClearableComponent } from '@acorex/cdk/common';
+import { AXCalendarService } from '@acorex/core/date-time';
+import { AXLocaleService } 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, 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 { classes } from 'polytype';
+import { map } from 'rxjs';
+
+/* eslint-disable @angular-eslint/no-inputs-metadata-property */
+/**
+ * A date & time editor that works like a text box: the user types digits directly into a
+ * masked value (separators come from the active format), navigates between date/time
+ * segments with Left/Right arrows and spins segment values with Up/Down arrows.
+ *
+ * The committed value is a native `Date` (same contract as `ax-datetime-box`), and both
+ * `gregorian` and `solar-hijri` calendar systems are supported.
+ *
+ * @category Components
+ */
+class AXDateTimeTextBoxComponent extends classes((MXInputBaseValueComponent), MXLookComponent) {
+    constructor() {
+        super(...arguments);
+        this.platformService = inject(AXPlatform);
+        this.localeService = inject(AXLocaleService);
+        this.calendarService = inject(AXCalendarService);
+        /** @ignore */
+        this._editingParts = {
+            year: {
+                key: 'year',
+                placeholder: 'yyyy',
+                placeholders: ['YY', 'yy', 'YYYY', 'yyyy'],
+                enabled: false,
+                default: 2023,
+                typedValue: null,
+                realValue: () => this._formatPart(this._editingDate(), this._editingParts.year.placeholder),
+            },
+            month: {
+                key: 'month',
+                placeholder: 'MM',
+                placeholders: ['MM', 'M'],
+                enabled: false,
+                default: 1,
+                typedValue: null,
+                realValue: () => this._formatPart(this._editingDate(), this._editingParts.month.placeholder),
+            },
+            day: {
+                key: 'day',
+                placeholder: 'dd',
+                placeholders: ['dd', 'DD', 'd'],
+                enabled: false,
+                default: 1,
+                typedValue: null,
+                realValue: () => this._formatPart(this._editingDate(), this._editingParts.day.placeholder),
+            },
+            hour: {
+                key: 'hour',
+                placeholder: 'HH',
+                placeholders: ['HH', 'H', 'hh', 'h'],
+                enabled: false,
+                default: 0,
+                typedValue: null,
+                realValue: () => this._formatPart(this._editingDate(), this._editingParts.hour.placeholder),
+            },
+            minute: {
+                key: 'minute',
+                placeholder: 'mm',
+                placeholders: ['mm', 'm'],
+                enabled: false,
+                default: 0,
+                typedValue: null,
+                realValue: () => this._formatPart(this._editingDate(), this._editingParts.minute.placeholder),
+            },
+            second: {
+                key: 'second',
+                placeholder: 'ss',
+                placeholders: ['ss', 's'],
+                enabled: false,
+                default: 0,
+                typedValue: null,
+                realValue: () => this._formatPart(this._editingDate(), this._editingParts.second.placeholder),
+            },
+            AMPM: {
+                key: 'AMPM',
+                placeholder: 'a',
+                placeholders: ['a', 'A'],
+                enabled: false,
+                default: 0,
+                typedValue: null,
+                realValue: () => this._formatPart(this._editingDate(), this._editingParts.AMPM.placeholder),
+            },
+        };
+        /** @ignore */
+        this._editingText = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_editingText" }] : /* istanbul ignore next */ []));
+        /** @ignore */
+        this._inputChars = [];
+        /** @ignore */
+        this._activePart = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_activePart" }] : /* istanbul ignore next */ []));
+        /**
+         * Determines which parts are editable: `date`, `time` or `datetime`.
+         * The mask format is resolved from the active locale profile for this mode.
+         * @defaultValue 'datetime'
+         */
+        this.picker = input('datetime', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "picker" }] : /* istanbul ignore next */ []));
+        /**
+         * The calendar system to use (`gregorian` or `solar-hijri`).
+         * Falls back to the active locale profile calendar when not provided.
+         */
+        this.calendar = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "calendar" }] : /* istanbul ignore next */ []));
+        /**
+         * Optional format override (e.g. `yyyy/MM/dd HH:mm:ss`).
+         * When omitted, the short format of the active locale profile is used.
+         */
+        this.format = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+        /**
+         * The minimum allowed date value. Applied when the editor loses focus.
+         */
+        this.minValue = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minValue" }] : /* istanbul ignore next */ []));
+        /**
+         * The maximum allowed date value. Applied when the editor loses focus.
+         */
+        this.maxValue = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
+        /**
+         * Emitted when a click event occurs on the editor input.
+         * @event
+         */
+        this.onClick = output();
+        /** @ignore */
+        this.classNames = input('', { ...(ngDevMode ? { debugName: "classNames" } : /* istanbul ignore next */ {}), alias: 'class' });
+        this._calendarSystem = computed(() => this.calendar() ?? this.localeService.activeProfile().calendar.system, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_calendarSystem" }] : /* istanbul ignore next */ []));
+        this._resolvedFormat = computed(() => this.format() ?? this.localeService.activeProfile().formats[this.picker()]?.short ?? '', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_resolvedFormat" }] : /* istanbul ignore next */ []));
+        /** @ignore */
+        this._editingDate = linkedSignal(() => this.calendarService.now(this._calendarSystem()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_editingDate" }] : /* istanbul ignore next */ []));
+        /** @ignore */
+        this.inputRef = viewChild('input', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+        /**
+         * @description check if page is in rtl or ltr
+         */
+        this.isRtl = signal(this.platformService.isRtl(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
+        /** @ignore */
+        this.#formatEffect = effect(() => {
+            this._resolvedFormat();
+            this._calendarSystem();
+            this._detectParts();
+            untracked(() => {
+                this.internalValueChanged(this.value);
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#formatEffect" }] : /* istanbul ignore next */ []));
+    }
+    /** @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.
+     * Avoids formatService's string-options path, which always uses the active locale calendar.
+     * @ignore
+     */
+    _formatPart(date, placeholder) {
+        return date.format(placeholder);
+    }
+    /** @ignore */
+    _detectParts() {
+        Object.values(this._editingParts).forEach((e) => {
+            e.enabled = false;
+        });
+        const formatParts = this._resolvedFormat().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;
+            }
+        });
+    }
+    /** @ignore */
+    _getOrderedParts() {
+        const formatParts = this._resolvedFormat().split(/[^a-zA-Z]+/);
+        const result = [];
+        formatParts.forEach((f) => {
+            const found = Object.values(this._editingParts).find((c) => c.placeholders.some((d) => d == f));
+            if (found && found.enabled)
+                result.push(found);
+        });
+        return result;
+    }
+    /** @ignore */
+    _clearInputBuffer() {
+        this._inputChars = [];
+    }
+    /** @ignore */
+    _updateText() {
+        let text = this._resolvedFormat();
+        Object.values(this._editingParts).forEach((part) => {
+            if (this._activePart() == part.key) {
+                if (part.typedValue)
+                    text = text.replace(part.placeholder, part.typedValue);
+            }
+            else {
+                if (part.typedValue != part.placeholder && part.typedValue != null) {
+                    text = text.replace(part.placeholder, part.realValue());
+                }
+            }
+        });
+        this._editingText.set(text == this._resolvedFormat() ? '' : text);
+        if (this._activePart()) {
+            this._highlightActivePart();
+        }
+    }
+    /**
+     * Handles changes to the internal date value, updating editing parts and text representation.
+     * @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();
+            }
+            else
+                part.typedValue = null;
+        });
+        this._updateText();
+    }
+    /**
+     * 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') {
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        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) {
+                this._activePart.set(nextPart.key);
+                this._highlightActivePart();
+            }
+        };
+        const goPrev = () => {
+            this._clearInputBuffer();
+            if (prevPart) {
+                this._activePart.set(prevPart.key);
+                this._highlightActivePart();
+            }
+        };
+        const digit = this._normalizeDigit(e.key);
+        /***************  Handle Left and Right  **************/
+        if (e.code === 'ArrowRight' || e.code === 'ArrowLeft') {
+            ignore();
+            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  **************/
+            ignore();
+            if (this.disabled || this.readonly || !part) {
+                return;
+            }
+            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);
+            // mark every enabled part as edited, so the whole value gets displayed
+            this._getOrderedParts().forEach((p) => {
+                p.typedValue = p.realValue();
+            });
+            this._detectValueChanges();
+        }
+        else if (e.code == 'Backspace' || e.code == 'Delete') {
+            /***************  Handle Backspace / Delete  **************/
+            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._updateText();
+                goPrev();
+            }
+        }
+        else if (e.code == 'Tab' || e.code == 'Space') {
+            /***************  Handle Tab and Space  **************/
+            if (input.value) {
+                if (!e.shiftKey && nextPart) {
+                    ignore();
+                    goNext();
+                }
+                else if (e.shiftKey && prevPart) {
+                    ignore();
+                    goPrev();
+                }
+            }
+        }
+        else if (digit != null) {
+            /***************  Handle Digits  **************/
+            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')) {
+            /***************  Handle AM/PM letters  **************/
+            ignore();
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            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();
+        }
+        /***************  Emit Event  **************/
+        super.emitOnKeydownEvent(e);
+    }
+    /**
+     * Applies typed digits to the active part with calendar-aware limits, auto advancing
+     * to the next part when the segment is complete or unambiguous.
+     * @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) {
+                    // 2-digit year placeholder: prefill the current century of the active calendar
+                    this._inputChars.push(...this._formatPart(this.calendarService.now(this._calendarSystem()), 'yyyy').substring(0, 2).split(''));
+                }
+                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;
+                    }
+                }
+                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;
+                    }
+                }
+                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;
+                    }
+                }
+                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;
+                    }
+                }
+                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;
+            }
+            default:
+                return;
+        }
+        if (next) {
+            goNext();
+        }
+    }
+    /** @ignore */
+    _applyEditingDate(value) {
+        this._editingDate.set(value);
+        this._detectValueChanges();
+    }
+    /** @ignore */
+    _handleKeyUpEvent() {
+        if (this._activePart()) {
+            this._highlightActivePart();
+        }
+    }
+    /** @ignore */
+    _handleFocusEvent(e) {
+        super.emitOnFocusEvent(e);
+    }
+    /** @ignore */
+    _handleBlurEvent(e) {
+        this._activePart.set(null);
+        this._clearInputBuffer();
+        this._clampToRange();
+        super.emitOnBlurEvent(e);
+    }
+    /**
+     * Clamps the committed value into the [minValue, maxValue] range.
+     * @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) {
+        setTimeout(() => {
+            this._detectPartAtPosition();
+        }, 0);
+        this.onClick.emit({
+            component: this,
+            htmlElement: this.getHostElement(),
+            nativeEvent: e,
+        });
+    }
+    /** @ignore */
+    _detectPartAtPosition() {
+        const input = this.inputElement;
+        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);
+        if (index < 0 || !orderedParts[index])
+            return;
+        this._clearInputBuffer();
+        this._activePart.set(orderedParts[index].key);
+        this._highlightActivePart();
+    }
+    /** @ignore */
+    _highlightActivePart() {
+        const input = this.inputElement;
+        if (!input || !input.value || !this._activePart())
+            return;
+        const orderedParts = this._getOrderedParts();
+        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 } = getWordBoundsAtPosition(input.value, valueParts[index]?.index);
+        if (input && typeof input.setSelectionRange === 'function') {
+            input.setSelectionRange(start, end);
+        }
+    }
+    /** @ignore */
+    _detectValueChanges() {
+        this.commitValue(this._editingDate().date, true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDateTimeTextBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXDateTimeTextBoxComponent, isStandalone: true, selector: "ax-datetime-text-box", 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 }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, picker: { classPropertyName: "picker", publicName: "picker", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", 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 }, classNames: { classPropertyName: "classNames", publicName: "class", 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: AXDateTimeTextBoxComponent },
+            { provide: AXFocusableComponent, useExisting: AXDateTimeTextBoxComponent },
+            { provide: AXValuableComponent, useExisting: AXDateTimeTextBoxComponent },
+            { provide: AXClearableComponent, useExisting: AXDateTimeTextBoxComponent },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AXDateTimeTextBoxComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ax-editor-container ax-default {{ classNames() }} {{ look }}\"\n  [class.ax-state-disabled]=\"disabled\"\n  [class.ax-state-readonly]=\"readonly\"\n>\n  <ng-content select=\"ax-prefix\"> </ng-content>\n  <input\n    #input\n    [name]=\"name\"\n    [id]=\"id\"\n    class=\"ax-input\"\n    type=\"text\"\n    [dir]=\"isRtl() ? 'rtl' : 'ltr'\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    [attr.placeholder]=\"placeholder || _resolvedFormat()\"\n    [class.ax-state-disabled]=\"disabled\"\n    [class.ax-state-readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [readonly]=\"true\"\n    [tabindex]=\"tabIndex\"\n    [ngModel]=\"_editingText()\"\n    [style.text-align]=\"isRtl() ? 'end' : 'start'\"\n    (mouseup)=\"_handleOnInputClickEvent($event)\"\n    (focus)=\"_handleFocusEvent($event)\"\n    (blur)=\"_handleBlurEvent($event)\"\n  />\n  @if (_editingText() && !disabled && !readonly) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n  <ng-content select=\"ax-suffix\"> </ng-content>\n</div>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n<div class=\"ax-error-container\"></div>\n", styles: ["ax-datetime-text-box{width:100%}ax-datetime-text-box .ax-input{cursor:text}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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: "22.0.8", ngImport: i0, type: AXDateTimeTextBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-datetime-text-box', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id', 'look'], outputs: [
+                        'valueChange',
+                        'stateChange',
+                        'onValueChanged',
+                        'onBlur',
+                        'onFocus',
+                        'readonlyChange',
+                        'disabledChange',
+                        'onKeyDown',
+                        'onKeyUp',
+                        'onKeyPress',
+                    ], providers: [
+                        { provide: AXComponent, useExisting: AXDateTimeTextBoxComponent },
+                        { provide: AXFocusableComponent, useExisting: AXDateTimeTextBoxComponent },
+                        { provide: AXValuableComponent, useExisting: AXDateTimeTextBoxComponent },
+                        { provide: AXClearableComponent, useExisting: AXDateTimeTextBoxComponent },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AXDateTimeTextBoxComponent),
+                            multi: true,
+                        },
+                    ], imports: [FormsModule], host: {
+                        '(keydown)': '_handleOnKeydownEvent($event)',
+                        '(keyup)': '_handleKeyUpEvent()',
+                        '[attr.name]': 'name',
+                    }, template: "<div\n  class=\"ax-editor-container ax-default {{ classNames() }} {{ look }}\"\n  [class.ax-state-disabled]=\"disabled\"\n  [class.ax-state-readonly]=\"readonly\"\n>\n  <ng-content select=\"ax-prefix\"> </ng-content>\n  <input\n    #input\n    [name]=\"name\"\n    [id]=\"id\"\n    class=\"ax-input\"\n    type=\"text\"\n    [dir]=\"isRtl() ? 'rtl' : 'ltr'\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    [attr.placeholder]=\"placeholder || _resolvedFormat()\"\n    [class.ax-state-disabled]=\"disabled\"\n    [class.ax-state-readonly]=\"readonly\"\n    [disabled]=\"disabled\"\n    [readonly]=\"true\"\n    [tabindex]=\"tabIndex\"\n    [ngModel]=\"_editingText()\"\n    [style.text-align]=\"isRtl() ? 'end' : 'start'\"\n    (mouseup)=\"_handleOnInputClickEvent($event)\"\n    (focus)=\"_handleFocusEvent($event)\"\n    (blur)=\"_handleBlurEvent($event)\"\n  />\n  @if (_editingText() && !disabled && !readonly) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n  <ng-content select=\"ax-suffix\"> </ng-content>\n</div>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n<div class=\"ax-error-container\"></div>\n", styles: ["ax-datetime-text-box{width:100%}ax-datetime-text-box .ax-input{cursor:text}\n"] }]
+        }], propDecorators: { picker: [{ type: i0.Input, args: [{ isSignal: true, alias: "picker", required: false }] }], calendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendar", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], classNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }] } });
+
+class AXDateTimeTextBoxModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDateTimeTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXDateTimeTextBoxModule, imports: [AXDateTimeTextBoxComponent], exports: [AXDateTimeTextBoxComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDateTimeTextBoxModule, imports: [AXDateTimeTextBoxComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDateTimeTextBoxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [AXDateTimeTextBoxComponent],
+                    exports: [AXDateTimeTextBoxComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXDateTimeTextBoxComponent, AXDateTimeTextBoxModule };
+//# sourceMappingURL=acorex-components-datetime-text-box.mjs.map