@acorex/components 20.10.1 → 20.10.2

package/datetime-box/index.d.ts

@@ -55,7 +55,9 @@ declare class AXDateTimeBoxComponent extends AXDateTimeBoxComponent_base {
      */
     formatChange: EventEmitter<string>;
     /**
-     * Indicates whether typing is allowed in the component.
+     * Indicates whether typing is allowed in the input.
+     * When false, clicking the input (or the calendar icon) opens the picker.
+     * When true, the input is for typing and the picker opens from the calendar button.
      *
      * @defaultValue false
      */
@@ -90,7 +92,7 @@ declare class AXDateTimeBoxComponent extends AXDateTimeBoxComponent_base {
     protected _editingDateObj: _angular_core.WritableSignal<Date>;
     protected readonly _calendarSystem: _angular_core.Signal<string>;
     protected readonly _resolvedFormat: _angular_core.Signal<string>;
-    protected readonly _classicDateFields: AXDateTimeBoxClassicField[];
+    protected readonly _classicDateFields: _angular_core.Signal<AXDateTimeBoxClassicField[]>;
     protected readonly _classicTimeFields: AXDateTimeBoxClassicField[];
     private readonly _classicTimeOptions;
     protected _classicDate: _angular_core.Signal<_acorex_core_date_time.AXDateTime>;
@@ -124,7 +126,13 @@ declare class AXDateTimeBoxComponent extends AXDateTimeBoxComponent_base {
         text: string;
     }[];
     /**
-     *  @ignore
+     * Syncs typed input values into the box (and the picker via `_editingDateObj`).
+     * @ignore
+     */
+    protected _handleInputModelChange(value: Date | null): void;
+    /**
+     * Syncs picker selection into the box (and the input via `_editingDateObj`).
+     * @ignore
      */
     protected _handlePickerModelChange(value: Date | null): void;
     /**
@@ -162,7 +170,9 @@ declare class AXDateTimeBoxComponent extends AXDateTimeBoxComponent_base {
      */
     private _readSelectValue;
     /**
-     *  @ignore
+     * When typing is disabled, open the picker on input click.
+     * When typing is enabled, keep the picker closed so the user can type.
+     * @ignore
      */
     protected _handleInputOnClick(): void;
     private get __hostName();

package/datetime-input/index.d.ts

@@ -3,30 +3,27 @@ import { MXInputBaseValueComponent, AXClickEvent } from '@acorex/cdk/common';
 import { AXDateTimePickerType } from '@acorex/components/calendar';
 
 /**
- * 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
  */
 declare class AXDateTimeInputComponent extends MXInputBaseValueComponent<Date> {
     #private;
     private platformService;
-    private formatService;
     private localeService;
     private calendarService;
-    /**
-     *  @ignore
-     */
+    /** @ignore */
     private readonly _editingParts;
-    /**
-     *  @ignore
-     */
+    /** @ignore */
     protected _editingText: _angular_core.WritableSignal<string>;
+    /** @ignore */
+    private _inputChars;
+    /** @ignore */
+    private _activePart;
     /**
-     *  @ignore
-     */
-    protected _inputChars: string[];
-    /**
-     * 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
      */
     allowTyping: _angular_core.InputSignal<boolean>;
@@ -34,94 +31,81 @@ declare class AXDateTimeInputComponent extends MXInputBaseValueComponent<Date> {
      * @description The calendar type to use for the datetime input.
      */
     calendar: _angular_core.InputSignal<string>;
-    protected readonly _calendarSystem: _angular_core.Signal<string>;
-    private _activePart;
-    private _editingDate;
-    /**
-     *  @ignore
-     */
-    private input;
     minValue: _angular_core.InputSignal<Date>;
     maxValue: _angular_core.InputSignal<Date>;
     /**
-     * Emitted when a click event occurs on the datetime box.
+     * Emitted when a click event occurs on the datetime input.
      * @event
      */
     onClick: _angular_core.OutputEmitterRef<AXClickEvent>;
     picker: _angular_core.InputSignal<AXDateTimePickerType>;
-    protected readonly _resolvedFormat: _angular_core.Signal<string>;
     /**
      * @deprecated use locale & mode instead
      */
     format: _angular_core.InputSignal<string>;
-    private _detectParts;
+    protected readonly _calendarSystem: _angular_core.Signal<string>;
+    protected readonly _resolvedFormat: _angular_core.Signal<string>;
+    /** @ignore */
+    private _editingDate;
+    /** @ignore */
+    private inputRef;
+    /** @ignore */
+    private get inputElement();
     /**
      * @description check if page is in rtl or ltr
      */
     protected isRtl: _angular_core.WritableSignal<boolean>;
-    /**
-     * @description listen to direction change to react to it.
-     */
+    /** @ignore */
     protected ngOnInit(): void;
     /**
-     *  @ignore
+     * Formats a part using the calendar already attached to the AXDateTime.
+     * @ignore
      */
+    private _formatPart;
+    /** @ignore */
+    private _detectParts;
+    /** @ignore */
     private _getOrderedParts;
-    /**
-     *  @ignore
-     */
+    /** @ignore */
     private _clearInputBuffer;
-    /**
-     *  @ignore
-     */
+    /** @ignore */
     private _updateText;
-    /**
-     * 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
-     */
     /**
      * 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?: Date): void;
     /**
-     *  @ignore
-     */
-    _handleOnKeydownEvent(e: KeyboardEvent): void;
-    /**
-     *  @ignore
-     */
-    _handleKeyUpEvent(): void;
-    /**
-     *  @ignore
+     * Normalizes Persian (U+06F0-U+06F9) and Arabic-Indic (U+0660-U+0669) digits to ASCII.
+     * @ignore
      */
+    private _normalizeDigit;
+    /** @ignore */
+    protected _handleOnKeydownEvent(e: KeyboardEvent): void;
+    /** @ignore */
+    private _handleDigitInput;
+    /** @ignore */
+    private _applyEditingDate;
+    /** @ignore */
+    protected _handleKeyUpEvent(): void;
+    /** @ignore */
     protected _handleFocusEvent(e: FocusEvent): void;
-    /**
-     *  @ignore
-     */
+    /** @ignore */
     protected _handleBlurEvent(e: FocusEvent): void;
-    /**
-     *  @ignore
-     */
+    /** @ignore */
+    private _clampToRange;
+    /** @ignore */
     protected _handleOnInputClickEvent(e: MouseEvent): void;
-    /**
-     *  @ignore
-     */
-    private _detectPartAtPosition;
-    /**
-     *  @ignore
-     */
+    /** @ignore */
+    private _selectFirstPart;
+    /** @ignore */
+    private _ensureEditableText;
+    /** @ignore */
     private _highlightActivePart;
-    /**
-     *  @ignore
-     */
+    /** @ignore */
     private _detectValueChanges;
-    private get __hostName();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDateTimeInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXDateTimeInputComponent, "ax-datetime-input", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "allowTyping": { "alias": "allowTyping"; "required": false; "isSignal": true; }; "calendar": { "alias": "calendar"; "required": false; "isSignal": true; }; "minValue": { "alias": "minValue"; "required": false; "isSignal": true; }; "maxValue": { "alias": "maxValue"; "required": false; "isSignal": true; }; "picker": { "alias": "picker"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "onClick": "onClick"; }, never, ["ax-validation-rule"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXDateTimeInputComponent, "ax-datetime-input", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "allowTyping": { "alias": "allowTyping"; "required": false; "isSignal": true; }; "calendar": { "alias": "calendar"; "required": false; "isSignal": true; }; "minValue": { "alias": "minValue"; "required": false; "isSignal": true; }; "maxValue": { "alias": "maxValue"; "required": false; "isSignal": true; }; "picker": { "alias": "picker"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "onKeyDown": "onKeyDown"; "onKeyUp": "onKeyUp"; "onKeyPress": "onKeyPress"; "onClick": "onClick"; }, never, ["ax-validation-rule"], true, never>;
 }
 
 declare class AXDateTimeInputModule {

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

@@ -5,6 +5,7 @@ import { AXDateTimePickerComponent } from '@acorex/components/datetime-picker';
 import { AXDecoratorGenericComponent } from '@acorex/components/decorators';
 import { MXDropdownBoxBaseComponent, AXDropdownBoxComponent } from '@acorex/components/dropdown';
 import { AXSelectBoxComponent } from '@acorex/components/select-box';
+import { AXIRLocaleProfile } from '@acorex/core/locale';
 import * as i0 from '@angular/core';
 import { EventEmitter, input, signal, computed, forwardRef, HostBinding, Output, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
@@ -36,7 +37,9 @@ class AXDateTimeBoxComponent extends classes((MXInputBaseValueComponent), MXCale
          */
         this.formatChange = new EventEmitter();
         /**
-         * Indicates whether typing is allowed in the component.
+         * Indicates whether typing is allowed in the input.
+         * When false, clicking the input (or the calendar icon) opens the picker.
+         * When true, the input is for typing and the picker opens from the calendar button.
          *
          * @defaultValue false
          */
@@ -70,8 +73,26 @@ class AXDateTimeBoxComponent extends classes((MXInputBaseValueComponent), MXCale
         this.format = input(...(ngDevMode ? [undefined, { debugName: "format" }] : []));
         this._editingDateObj = signal(null, ...(ngDevMode ? [{ debugName: "_editingDateObj" }] : []));
         this._calendarSystem = computed(() => this.calendar() ?? this.localeService.activeProfile().calendar.system, ...(ngDevMode ? [{ debugName: "_calendarSystem" }] : []));
-        this._resolvedFormat = computed(() => this.format() ?? this.localeService.activeProfile().formats[this.picker()]?.short ?? '', ...(ngDevMode ? [{ debugName: "_resolvedFormat" }] : []));
-        this._classicDateFields = AX_DATETIME_BOX_CLASSIC_DATE_FIELDS;
+        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" }] : []));
+        this._classicDateFields = computed(() => {
+            if (this._calendarSystem() === 'solar-hijri') {
+                return [
+                    { part: 'day', dropdownWidth: '50', maxVisibleItems: 10 },
+                    { part: 'month', dropdownWidth: '90', maxVisibleItems: 12 },
+                    { part: 'year', dropdownWidth: '70', maxVisibleItems: 10 },
+                ];
+            }
+            return AX_DATETIME_BOX_CLASSIC_DATE_FIELDS;
+        }, ...(ngDevMode ? [{ debugName: "_classicDateFields" }] : []));
         this._classicTimeFields = AX_DATETIME_BOX_CLASSIC_TIME_FIELDS;
         this._classicTimeOptions = {
             hour: Array.from({ length: 24 }, (_, i) => ({ id: i, text: String(i).padStart(2, '0') })),
@@ -159,7 +180,15 @@ class AXDateTimeBoxComponent extends classes((MXInputBaseValueComponent), MXCale
         }
     }
     /**
-     *  @ignore
+     * Syncs typed input values into the box (and the picker via `_editingDateObj`).
+     * @ignore
+     */
+    _handleInputModelChange(value) {
+        this.commitValue(value, true);
+    }
+    /**
+     * Syncs picker selection into the box (and the input via `_editingDateObj`).
+     * @ignore
      */
     _handlePickerModelChange(value) {
         if (this.isOpen) {
@@ -216,8 +245,8 @@ class AXDateTimeBoxComponent extends classes((MXInputBaseValueComponent), MXCale
         catch {
             this._editingDateObj.set(null);
         }
-        this.commitValue(this._editingDateObj(), false);
-        if (this.boxLook() !== 'classic') {
+        // Close the picker after a committed selection; typing already keeps it closed.
+        if (this.boxLook() !== 'classic' && this.isOpen) {
             this.close();
         }
     }
@@ -254,7 +283,9 @@ class AXDateTimeBoxComponent extends classes((MXInputBaseValueComponent), MXCale
         return value != null ? Number(value) : null;
     }
     /**
-     *  @ignore
+     * When typing is disabled, open the picker on input click.
+     * When typing is enabled, keep the picker closed so the user can type.
+     * @ignore
      */
     _handleInputOnClick() {
         if (!this.allowTyping()) {
@@ -278,7 +309,7 @@ class AXDateTimeBoxComponent extends classes((MXInputBaseValueComponent), MXCale
                 useExisting: forwardRef(() => AXDateTimeBoxComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "input", first: true, predicate: AXDateTimeInputComponent, descendants: true }, { propertyName: "pickerRef", first: true, predicate: AXDateTimePickerComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (boxLook() === 'classic') {\n  <div [class]=\"_classicBoxClass\">\n    <ng-content select=\"ax-prefix\"></ng-content>\n    <div class=\"ax-classic-datetime-selects\" dir=\"ltr\">\n      @if (_classicHasDatePart) {\n        <div class=\"ax-classic-datetime-group\">\n          @for (field of _classicDateFields; track field.part; let last = $last) {\n            <ax-select-box\n              look=\"none\"\n              [class]=\"'ax-classic-' + field.part + '-select'\"\n              [disabled]=\"disabled\"\n              [readonly]=\"readonly\"\n              [dataSource]=\"_classicPartOptions(field.part)\"\n              textField=\"text\"\n              valueField=\"id\"\n              [ngModel]=\"_classicPartValue(field.part)\"\n              [dropdownWidth]=\"field.dropdownWidth\"\n              [isItemTruncated]=\"false\"\n              [maxVisibleItems]=\"field.maxVisibleItems\"\n              [itemHeight]=\"32\"\n              (onValueChanged)=\"_handleClassicPartChanged($event, field.part)\"\n            ></ax-select-box>\n            @if (!last) {\n              <span class=\"ax-classic-datetime-separator\" aria-hidden=\"true\">-</span>\n            }\n          }\n        </div>\n      }\n      @if (_classicHasTimePart) {\n        <div class=\"ax-classic-datetime-group\">\n          @for (field of _classicTimeFields; track field.part; let last = $last) {\n            <ax-select-box\n              look=\"none\"\n              [class]=\"'ax-classic-' + field.part + '-select'\"\n              [disabled]=\"disabled\"\n              [readonly]=\"readonly\"\n              [dataSource]=\"_classicPartOptions(field.part)\"\n              textField=\"text\"\n              valueField=\"id\"\n              [ngModel]=\"_classicPartValue(field.part)\"\n              [dropdownWidth]=\"field.dropdownWidth\"\n              [isItemTruncated]=\"false\"\n              [maxVisibleItems]=\"field.maxVisibleItems\"\n              [itemHeight]=\"32\"\n              (onValueChanged)=\"_handleClassicPartChanged($event, field.part)\"\n            ></ax-select-box>\n            @if (!last) {\n              <span class=\"ax-classic-datetime-separator\" aria-hidden=\"true\">:</span>\n            }\n          }\n        </div>\n      }\n    </div>\n    <ng-content select=\"ax-suffix\"></ng-content>\n  </div>\n} @else {\n  <ax-dropdown-box\n    [look]=\"look\"\n    [disabled]=\"disabled\"\n    (onOpened)=\"_handleOnOpenedEvent($event)\"\n    (onClosed)=\"_handleOnClosedEvent($event)\"\n  >\n    <ng-container input>\n      <ng-content select=\"ax-prefix\"> </ng-content>\n      <ax-datetime-input\n        dir=\"ltr\"\n        [name]=\"name\"\n        [ngModel]=\"_editingDateObj()\"\n        id=\"{{ id }}-input\"\n        [format]=\"_resolvedFormat()\"\n        [picker]=\"picker()\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [allowTyping]=\"allowTyping()\"\n        [calendar]=\"_calendarSystem()\"\n        (onClick)=\"_handleInputOnClick()\"\n        (onBlur)=\"_handleInputOnBlurEvent($event)\"\n        (onFocus)=\"_handleInputOnFocusEvent($event)\"\n      ></ax-datetime-input>\n      @if (value && !disabled && !readonly) {\n        <ng-content select=\"ax-clear-button\"></ng-content>\n      }\n      <button type=\"button\" class=\"ax-editor-button\" [tabIndex]=\"-1\" [disabled]=\"disabled\" (click)=\"toggle()\">\n        <span class=\"ax-icon ax-icon-calendar\"></span>\n      </button>\n      <ng-content select=\"ax-suffix\"> </ng-content>\n    </ng-container>\n    <ng-container panel>\n      <ax-datetime-picker\n        #pickerRef\n        [type]=\"_calendarSystem()\"\n        [depth]=\"depth\"\n        [ngModel]=\"_editingDateObj()\"\n        [picker]=\"picker()\"\n        [format]=\"_resolvedFormat()\"\n        id=\"{{ id }}-picker\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [minValue]=\"minValue\"\n        [maxValue]=\"maxValue\"\n        [weekend]=\"weekend()\"\n        [weekdays]=\"weekdays()\"\n        [holidayDates]=\"holidayDates\"\n        [calendar]=\"_calendarSystem()\"\n        [disabledDates]=\"disabledDates\"\n        [calendarLook]=\"calendarLook()\"\n        [yearRange]=\"yearRange()\"\n        (onNavigate)=\"_handleCalendarOnNavigate($event)\"\n        (ngModelChange)=\"_handlePickerModelChange($event)\"\n      ></ax-datetime-picker>\n    </ng-container>\n  </ax-dropdown-box>\n}\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: ["ax-datetime-input{display:contents}ax-datetime-box .ax-classic-datetime-box{overflow:visible;height:auto;min-height:var(--ax-comp-editor-height)}ax-datetime-box .ax-classic-datetime-selects{display:flex;flex:1;align-items:center;justify-content:space-between;gap:1rem;min-width:12rem;flex-wrap:wrap;overflow:visible}ax-datetime-box .ax-classic-datetime-group{display:flex;align-items:center;gap:.125rem}ax-datetime-box .ax-classic-datetime-separator{flex:0 0 auto;padding-inline:.125rem;font-size:var(--ax-comp-editor-font-size);line-height:1;color:rgba(var(--ax-comp-editor-text-color));opacity:.6;-webkit-user-select:none;user-select:none;pointer-events:none}ax-datetime-box .ax-classic-datetime-selects ax-select-box{display:inline-block;width:auto;flex:0 0 auto}ax-datetime-box .ax-classic-datetime-selects ax-select-box .ax-editor-button{display:none}ax-datetime-box .ax-classic-datetime-selects ax-select-box .ax-editor-container,ax-datetime-box .ax-classic-datetime-selects ax-select-box ax-dropdown-box.ax-editor-container{gap:0;width:auto;overflow:visible}ax-datetime-box .ax-classic-datetime-selects ax-select-box ax-dropdown-box.ax-editor-container{--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0;justify-content:flex-start}ax-datetime-box .ax-classic-datetime-selects ax-select-box .ax-chips-container{flex:0 0 auto;width:auto}ax-datetime-box .ax-classic-datetime-selects ax-select-box .ax-chips-container .ax-chips{overflow:visible;text-overflow:unset;padding-inline:0}\n"], dependencies: [{ kind: "component", type: AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look", "hasInput", "popoverWidth"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "component", type: AXDateTimeInputComponent, selector: "ax-datetime-input", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "allowTyping", "calendar", "minValue", "maxValue", "picker", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onClick"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }, { kind: "component", type: AXDateTimePickerComponent, selector: "ax-datetime-picker", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation", "weekend", "weekdays", "calendarLook", "yearRange", "currentTimeButton", "calendar", "picker", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onClick", "readonlyChange", "disabledChange", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick"] }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: AXDateTimeInputComponent, descendants: true }, { propertyName: "pickerRef", first: true, predicate: AXDateTimePickerComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (boxLook() === 'classic') {\n  <div [class]=\"_classicBoxClass\">\n    <ng-content select=\"ax-prefix\"></ng-content>\n    <div class=\"ax-classic-datetime-selects\" dir=\"ltr\">\n      @if (_classicHasDatePart) {\n        <div class=\"ax-classic-datetime-group\">\n          @for (field of _classicDateFields(); track field.part; let last = $last) {\n            <ax-select-box\n              look=\"none\"\n              [class]=\"'ax-classic-' + field.part + '-select'\"\n              [disabled]=\"disabled\"\n              [readonly]=\"readonly\"\n              [dataSource]=\"_classicPartOptions(field.part)\"\n              textField=\"text\"\n              valueField=\"id\"\n              [ngModel]=\"_classicPartValue(field.part)\"\n              [dropdownWidth]=\"field.dropdownWidth\"\n              [isItemTruncated]=\"false\"\n              [maxVisibleItems]=\"field.maxVisibleItems\"\n              [itemHeight]=\"32\"\n              (onValueChanged)=\"_handleClassicPartChanged($event, field.part)\"\n            ></ax-select-box>\n            @if (!last) {\n              <span class=\"ax-classic-datetime-separator\" aria-hidden=\"true\">-</span>\n            }\n          }\n        </div>\n      }\n      @if (_classicHasTimePart) {\n        <div class=\"ax-classic-datetime-group\">\n          @for (field of _classicTimeFields; track field.part; let last = $last) {\n            <ax-select-box\n              look=\"none\"\n              [class]=\"'ax-classic-' + field.part + '-select'\"\n              [disabled]=\"disabled\"\n              [readonly]=\"readonly\"\n              [dataSource]=\"_classicPartOptions(field.part)\"\n              textField=\"text\"\n              valueField=\"id\"\n              [ngModel]=\"_classicPartValue(field.part)\"\n              [dropdownWidth]=\"field.dropdownWidth\"\n              [isItemTruncated]=\"false\"\n              [maxVisibleItems]=\"field.maxVisibleItems\"\n              [itemHeight]=\"32\"\n              (onValueChanged)=\"_handleClassicPartChanged($event, field.part)\"\n            ></ax-select-box>\n            @if (!last) {\n              <span class=\"ax-classic-datetime-separator\" aria-hidden=\"true\">:</span>\n            }\n          }\n        </div>\n      }\n    </div>\n    <ng-content select=\"ax-suffix\"></ng-content>\n  </div>\n} @else {\n  <ax-dropdown-box\n    [look]=\"look\"\n    [disabled]=\"disabled\"\n    (onOpened)=\"_handleOnOpenedEvent($event)\"\n    (onClosed)=\"_handleOnClosedEvent($event)\"\n  >\n    <ng-container input>\n      <ng-content select=\"ax-prefix\"> </ng-content>\n      <ax-datetime-input\n        dir=\"ltr\"\n        [name]=\"name\"\n        [ngModel]=\"_editingDateObj()\"\n        (ngModelChange)=\"_handleInputModelChange($event)\"\n        id=\"{{ id }}-input\"\n        [format]=\"_resolvedFormat()\"\n        [picker]=\"picker()\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [allowTyping]=\"allowTyping()\"\n        [calendar]=\"_calendarSystem()\"\n        [minValue]=\"minValue\"\n        [maxValue]=\"maxValue\"\n        (onClick)=\"_handleInputOnClick()\"\n        (onBlur)=\"_handleInputOnBlurEvent($event)\"\n        (onFocus)=\"_handleInputOnFocusEvent($event)\"\n      ></ax-datetime-input>\n      @if (value && !disabled && !readonly) {\n        <ng-content select=\"ax-clear-button\"></ng-content>\n      }\n      <button type=\"button\" class=\"ax-editor-button\" [tabIndex]=\"-1\" [disabled]=\"disabled\" (click)=\"toggle()\">\n        <span class=\"ax-icon ax-icon-calendar\"></span>\n      </button>\n      <ng-content select=\"ax-suffix\"> </ng-content>\n    </ng-container>\n    <ng-container panel>\n      <ax-datetime-picker\n        #pickerRef\n        [type]=\"_calendarSystem()\"\n        [depth]=\"depth\"\n        [ngModel]=\"_editingDateObj()\"\n        [picker]=\"picker()\"\n        [format]=\"_resolvedFormat()\"\n        id=\"{{ id }}-picker\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [minValue]=\"minValue\"\n        [maxValue]=\"maxValue\"\n        [weekend]=\"weekend()\"\n        [weekdays]=\"weekdays()\"\n        [holidayDates]=\"holidayDates\"\n        [calendar]=\"_calendarSystem()\"\n        [disabledDates]=\"disabledDates\"\n        [calendarLook]=\"calendarLook()\"\n        [yearRange]=\"yearRange()\"\n        (onNavigate)=\"_handleCalendarOnNavigate($event)\"\n        (ngModelChange)=\"_handlePickerModelChange($event)\"\n      ></ax-datetime-picker>\n    </ng-container>\n  </ax-dropdown-box>\n}\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: ["ax-datetime-input{display:contents}ax-datetime-box .ax-classic-datetime-box{overflow:visible;height:auto;min-height:var(--ax-comp-editor-height)}ax-datetime-box .ax-classic-datetime-selects{display:flex;flex:1;align-items:center;justify-content:space-between;gap:1rem;min-width:12rem;flex-wrap:wrap;overflow:visible}ax-datetime-box .ax-classic-datetime-group{display:flex;align-items:center;gap:.125rem}ax-datetime-box .ax-classic-datetime-separator{flex:0 0 auto;padding-inline:.125rem;font-size:var(--ax-comp-editor-font-size);line-height:1;color:rgba(var(--ax-comp-editor-text-color));opacity:.6;-webkit-user-select:none;user-select:none;pointer-events:none}ax-datetime-box .ax-classic-datetime-selects ax-select-box{display:inline-block;width:auto;flex:0 0 auto}ax-datetime-box .ax-classic-datetime-selects ax-select-box .ax-editor-button{display:none}ax-datetime-box .ax-classic-datetime-selects ax-select-box .ax-editor-container,ax-datetime-box .ax-classic-datetime-selects ax-select-box ax-dropdown-box.ax-editor-container{gap:0;width:auto;overflow:visible}ax-datetime-box .ax-classic-datetime-selects ax-select-box ax-dropdown-box.ax-editor-container{--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0;justify-content:flex-start}ax-datetime-box .ax-classic-datetime-selects ax-select-box .ax-chips-container{flex:0 0 auto;width:auto}ax-datetime-box .ax-classic-datetime-selects ax-select-box .ax-chips-container .ax-chips{overflow:visible;text-overflow:unset;padding-inline:0}\n"], dependencies: [{ kind: "component", type: AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look", "hasInput", "popoverWidth"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "component", type: AXDateTimeInputComponent, selector: "ax-datetime-input", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "allowTyping", "calendar", "minValue", "maxValue", "picker", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onClick"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }, { kind: "component", type: AXDateTimePickerComponent, selector: "ax-datetime-picker", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation", "weekend", "weekdays", "calendarLook", "yearRange", "currentTimeButton", "calendar", "picker", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onClick", "readonlyChange", "disabledChange", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick"] }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDateTimeBoxComponent, decorators: [{
             type: Component,
@@ -323,7 +354,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         FormsModule,
                         AXDateTimePickerComponent,
                         AXSelectBoxComponent,
-                    ], template: "@if (boxLook() === 'classic') {\n  <div [class]=\"_classicBoxClass\">\n    <ng-content select=\"ax-prefix\"></ng-content>\n    <div class=\"ax-classic-datetime-selects\" dir=\"ltr\">\n      @if (_classicHasDatePart) {\n        <div class=\"ax-classic-datetime-group\">\n          @for (field of _classicDateFields; track field.part; let last = $last) {\n            <ax-select-box\n              look=\"none\"\n              [class]=\"'ax-classic-' + field.part + '-select'\"\n              [disabled]=\"disabled\"\n              [readonly]=\"readonly\"\n              [dataSource]=\"_classicPartOptions(field.part)\"\n              textField=\"text\"\n              valueField=\"id\"\n              [ngModel]=\"_classicPartValue(field.part)\"\n              [dropdownWidth]=\"field.dropdownWidth\"\n              [isItemTruncated]=\"false\"\n              [maxVisibleItems]=\"field.maxVisibleItems\"\n              [itemHeight]=\"32\"\n              (onValueChanged)=\"_handleClassicPartChanged($event, field.part)\"\n            ></ax-select-box>\n            @if (!last) {\n              <span class=\"ax-classic-datetime-separator\" aria-hidden=\"true\">-</span>\n            }\n          }\n        </div>\n      }\n      @if (_classicHasTimePart) {\n        <div class=\"ax-classic-datetime-group\">\n          @for (field of _classicTimeFields; track field.part; let last = $last) {\n            <ax-select-box\n              look=\"none\"\n              [class]=\"'ax-classic-' + field.part + '-select'\"\n              [disabled]=\"disabled\"\n              [readonly]=\"readonly\"\n              [dataSource]=\"_classicPartOptions(field.part)\"\n              textField=\"text\"\n              valueField=\"id\"\n              [ngModel]=\"_classicPartValue(field.part)\"\n              [dropdownWidth]=\"field.dropdownWidth\"\n              [isItemTruncated]=\"false\"\n              [maxVisibleItems]=\"field.maxVisibleItems\"\n              [itemHeight]=\"32\"\n              (onValueChanged)=\"_handleClassicPartChanged($event, field.part)\"\n            ></ax-select-box>\n            @if (!last) {\n              <span class=\"ax-classic-datetime-separator\" aria-hidden=\"true\">:</span>\n            }\n          }\n        </div>\n      }\n    </div>\n    <ng-content select=\"ax-suffix\"></ng-content>\n  </div>\n} @else {\n  <ax-dropdown-box\n    [look]=\"look\"\n    [disabled]=\"disabled\"\n    (onOpened)=\"_handleOnOpenedEvent($event)\"\n    (onClosed)=\"_handleOnClosedEvent($event)\"\n  >\n    <ng-container input>\n      <ng-content select=\"ax-prefix\"> </ng-content>\n      <ax-datetime-input\n        dir=\"ltr\"\n        [name]=\"name\"\n        [ngModel]=\"_editingDateObj()\"\n        id=\"{{ id }}-input\"\n        [format]=\"_resolvedFormat()\"\n        [picker]=\"picker()\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [allowTyping]=\"allowTyping()\"\n        [calendar]=\"_calendarSystem()\"\n        (onClick)=\"_handleInputOnClick()\"\n        (onBlur)=\"_handleInputOnBlurEvent($event)\"\n        (onFocus)=\"_handleInputOnFocusEvent($event)\"\n      ></ax-datetime-input>\n      @if (value && !disabled && !readonly) {\n        <ng-content select=\"ax-clear-button\"></ng-content>\n      }\n      <button type=\"button\" class=\"ax-editor-button\" [tabIndex]=\"-1\" [disabled]=\"disabled\" (click)=\"toggle()\">\n        <span class=\"ax-icon ax-icon-calendar\"></span>\n      </button>\n      <ng-content select=\"ax-suffix\"> </ng-content>\n    </ng-container>\n    <ng-container panel>\n      <ax-datetime-picker\n        #pickerRef\n        [type]=\"_calendarSystem()\"\n        [depth]=\"depth\"\n        [ngModel]=\"_editingDateObj()\"\n        [picker]=\"picker()\"\n        [format]=\"_resolvedFormat()\"\n        id=\"{{ id }}-picker\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [minValue]=\"minValue\"\n        [maxValue]=\"maxValue\"\n        [weekend]=\"weekend()\"\n        [weekdays]=\"weekdays()\"\n        [holidayDates]=\"holidayDates\"\n        [calendar]=\"_calendarSystem()\"\n        [disabledDates]=\"disabledDates\"\n        [calendarLook]=\"calendarLook()\"\n        [yearRange]=\"yearRange()\"\n        (onNavigate)=\"_handleCalendarOnNavigate($event)\"\n        (ngModelChange)=\"_handlePickerModelChange($event)\"\n      ></ax-datetime-picker>\n    </ng-container>\n  </ax-dropdown-box>\n}\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: ["ax-datetime-input{display:contents}ax-datetime-box .ax-classic-datetime-box{overflow:visible;height:auto;min-height:var(--ax-comp-editor-height)}ax-datetime-box .ax-classic-datetime-selects{display:flex;flex:1;align-items:center;justify-content:space-between;gap:1rem;min-width:12rem;flex-wrap:wrap;overflow:visible}ax-datetime-box .ax-classic-datetime-group{display:flex;align-items:center;gap:.125rem}ax-datetime-box .ax-classic-datetime-separator{flex:0 0 auto;padding-inline:.125rem;font-size:var(--ax-comp-editor-font-size);line-height:1;color:rgba(var(--ax-comp-editor-text-color));opacity:.6;-webkit-user-select:none;user-select:none;pointer-events:none}ax-datetime-box .ax-classic-datetime-selects ax-select-box{display:inline-block;width:auto;flex:0 0 auto}ax-datetime-box .ax-classic-datetime-selects ax-select-box .ax-editor-button{display:none}ax-datetime-box .ax-classic-datetime-selects ax-select-box .ax-editor-container,ax-datetime-box .ax-classic-datetime-selects ax-select-box ax-dropdown-box.ax-editor-container{gap:0;width:auto;overflow:visible}ax-datetime-box .ax-classic-datetime-selects ax-select-box ax-dropdown-box.ax-editor-container{--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0;justify-content:flex-start}ax-datetime-box .ax-classic-datetime-selects ax-select-box .ax-chips-container{flex:0 0 auto;width:auto}ax-datetime-box .ax-classic-datetime-selects ax-select-box .ax-chips-container .ax-chips{overflow:visible;text-overflow:unset;padding-inline:0}\n"] }]
+                    ], template: "@if (boxLook() === 'classic') {\n  <div [class]=\"_classicBoxClass\">\n    <ng-content select=\"ax-prefix\"></ng-content>\n    <div class=\"ax-classic-datetime-selects\" dir=\"ltr\">\n      @if (_classicHasDatePart) {\n        <div class=\"ax-classic-datetime-group\">\n          @for (field of _classicDateFields(); track field.part; let last = $last) {\n            <ax-select-box\n              look=\"none\"\n              [class]=\"'ax-classic-' + field.part + '-select'\"\n              [disabled]=\"disabled\"\n              [readonly]=\"readonly\"\n              [dataSource]=\"_classicPartOptions(field.part)\"\n              textField=\"text\"\n              valueField=\"id\"\n              [ngModel]=\"_classicPartValue(field.part)\"\n              [dropdownWidth]=\"field.dropdownWidth\"\n              [isItemTruncated]=\"false\"\n              [maxVisibleItems]=\"field.maxVisibleItems\"\n              [itemHeight]=\"32\"\n              (onValueChanged)=\"_handleClassicPartChanged($event, field.part)\"\n            ></ax-select-box>\n            @if (!last) {\n              <span class=\"ax-classic-datetime-separator\" aria-hidden=\"true\">-</span>\n            }\n          }\n        </div>\n      }\n      @if (_classicHasTimePart) {\n        <div class=\"ax-classic-datetime-group\">\n          @for (field of _classicTimeFields; track field.part; let last = $last) {\n            <ax-select-box\n              look=\"none\"\n              [class]=\"'ax-classic-' + field.part + '-select'\"\n              [disabled]=\"disabled\"\n              [readonly]=\"readonly\"\n              [dataSource]=\"_classicPartOptions(field.part)\"\n              textField=\"text\"\n              valueField=\"id\"\n              [ngModel]=\"_classicPartValue(field.part)\"\n              [dropdownWidth]=\"field.dropdownWidth\"\n              [isItemTruncated]=\"false\"\n              [maxVisibleItems]=\"field.maxVisibleItems\"\n              [itemHeight]=\"32\"\n              (onValueChanged)=\"_handleClassicPartChanged($event, field.part)\"\n            ></ax-select-box>\n            @if (!last) {\n              <span class=\"ax-classic-datetime-separator\" aria-hidden=\"true\">:</span>\n            }\n          }\n        </div>\n      }\n    </div>\n    <ng-content select=\"ax-suffix\"></ng-content>\n  </div>\n} @else {\n  <ax-dropdown-box\n    [look]=\"look\"\n    [disabled]=\"disabled\"\n    (onOpened)=\"_handleOnOpenedEvent($event)\"\n    (onClosed)=\"_handleOnClosedEvent($event)\"\n  >\n    <ng-container input>\n      <ng-content select=\"ax-prefix\"> </ng-content>\n      <ax-datetime-input\n        dir=\"ltr\"\n        [name]=\"name\"\n        [ngModel]=\"_editingDateObj()\"\n        (ngModelChange)=\"_handleInputModelChange($event)\"\n        id=\"{{ id }}-input\"\n        [format]=\"_resolvedFormat()\"\n        [picker]=\"picker()\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [allowTyping]=\"allowTyping()\"\n        [calendar]=\"_calendarSystem()\"\n        [minValue]=\"minValue\"\n        [maxValue]=\"maxValue\"\n        (onClick)=\"_handleInputOnClick()\"\n        (onBlur)=\"_handleInputOnBlurEvent($event)\"\n        (onFocus)=\"_handleInputOnFocusEvent($event)\"\n      ></ax-datetime-input>\n      @if (value && !disabled && !readonly) {\n        <ng-content select=\"ax-clear-button\"></ng-content>\n      }\n      <button type=\"button\" class=\"ax-editor-button\" [tabIndex]=\"-1\" [disabled]=\"disabled\" (click)=\"toggle()\">\n        <span class=\"ax-icon ax-icon-calendar\"></span>\n      </button>\n      <ng-content select=\"ax-suffix\"> </ng-content>\n    </ng-container>\n    <ng-container panel>\n      <ax-datetime-picker\n        #pickerRef\n        [type]=\"_calendarSystem()\"\n        [depth]=\"depth\"\n        [ngModel]=\"_editingDateObj()\"\n        [picker]=\"picker()\"\n        [format]=\"_resolvedFormat()\"\n        id=\"{{ id }}-picker\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [minValue]=\"minValue\"\n        [maxValue]=\"maxValue\"\n        [weekend]=\"weekend()\"\n        [weekdays]=\"weekdays()\"\n        [holidayDates]=\"holidayDates\"\n        [calendar]=\"_calendarSystem()\"\n        [disabledDates]=\"disabledDates\"\n        [calendarLook]=\"calendarLook()\"\n        [yearRange]=\"yearRange()\"\n        (onNavigate)=\"_handleCalendarOnNavigate($event)\"\n        (ngModelChange)=\"_handlePickerModelChange($event)\"\n      ></ax-datetime-picker>\n    </ng-container>\n  </ax-dropdown-box>\n}\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: ["ax-datetime-input{display:contents}ax-datetime-box .ax-classic-datetime-box{overflow:visible;height:auto;min-height:var(--ax-comp-editor-height)}ax-datetime-box .ax-classic-datetime-selects{display:flex;flex:1;align-items:center;justify-content:space-between;gap:1rem;min-width:12rem;flex-wrap:wrap;overflow:visible}ax-datetime-box .ax-classic-datetime-group{display:flex;align-items:center;gap:.125rem}ax-datetime-box .ax-classic-datetime-separator{flex:0 0 auto;padding-inline:.125rem;font-size:var(--ax-comp-editor-font-size);line-height:1;color:rgba(var(--ax-comp-editor-text-color));opacity:.6;-webkit-user-select:none;user-select:none;pointer-events:none}ax-datetime-box .ax-classic-datetime-selects ax-select-box{display:inline-block;width:auto;flex:0 0 auto}ax-datetime-box .ax-classic-datetime-selects ax-select-box .ax-editor-button{display:none}ax-datetime-box .ax-classic-datetime-selects ax-select-box .ax-editor-container,ax-datetime-box .ax-classic-datetime-selects ax-select-box ax-dropdown-box.ax-editor-container{gap:0;width:auto;overflow:visible}ax-datetime-box .ax-classic-datetime-selects ax-select-box ax-dropdown-box.ax-editor-container{--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0;justify-content:flex-start}ax-datetime-box .ax-classic-datetime-selects ax-select-box .ax-chips-container{flex:0 0 auto;width:auto}ax-datetime-box .ax-classic-datetime-selects ax-select-box .ax-chips-container .ax-chips{overflow:visible;text-overflow:unset;padding-inline:0}\n"] }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: [AXDateTimeInputComponent]