@acorex/components 21.0.2-next.33 → 21.0.2-next.35

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

@@ -4,12 +4,23 @@ import { AXDateTimeInputComponent } from '@acorex/components/datetime-input';
 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 * as i0 from '@angular/core';
-import { EventEmitter, input, signal, linkedSignal, effect, forwardRef, HostBinding, Output, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { EventEmitter, input, signal, linkedSignal, effect, computed, forwardRef, HostBinding, Output, ViewChild, 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';
 
+const AX_DATETIME_BOX_CLASSIC_DATE_FIELDS = [
+    { part: 'year', dropdownWidth: '70', maxVisibleItems: 10 },
+    { part: 'month', dropdownWidth: '90', maxVisibleItems: 12 },
+    { part: 'day', dropdownWidth: '50', maxVisibleItems: 10 },
+];
+const AX_DATETIME_BOX_CLASSIC_TIME_FIELDS = [
+    { part: 'hour', dropdownWidth: '50', maxVisibleItems: 10 },
+    { part: 'minute', dropdownWidth: '50', maxVisibleItems: 10 },
+];
+
 /**
  * Represents a date and time input component that allows user interaction and triggers events.
  *
@@ -29,25 +40,31 @@ class AXDateTimeBoxComponent extends classes((MXInputBaseValueComponent), MXCale
          *
          * @defaultValue false
          */
-        this.allowTyping = input(false, ...(ngDevMode ? [{ debugName: "allowTyping" }] : /* istanbul ignore next */ []));
-        this.picker = input('datetime', ...(ngDevMode ? [{ debugName: "picker" }] : /* istanbul ignore next */ []));
+        this.allowTyping = input(false, ...(ngDevMode ? [{ debugName: "allowTyping" }] : []));
+        this.picker = input('datetime', ...(ngDevMode ? [{ debugName: "picker" }] : []));
         /**
          * @description The calendar type to use for the datetime input.
          */
-        this.calendar = input(null, ...(ngDevMode ? [{ debugName: "calendar" }] : /* istanbul ignore next */ []));
-        this.weekend = input([], ...(ngDevMode ? [{ debugName: "weekend" }] : /* istanbul ignore next */ []));
-        this.weekdays = input([], ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
+        this.calendar = input(null, ...(ngDevMode ? [{ debugName: "calendar" }] : []));
+        this.weekend = input([], ...(ngDevMode ? [{ debugName: "weekend" }] : []));
+        this.weekdays = input([], ...(ngDevMode ? [{ debugName: "weekdays" }] : []));
         /**
          * Day view navigation style of the embedded calendar.
          */
-        this.calendarLook = input('select', ...(ngDevMode ? [{ debugName: "calendarLook" }] : /* istanbul ignore next */ []));
+        this.calendarLook = input('select', ...(ngDevMode ? [{ debugName: "calendarLook" }] : []));
+        /**
+         * Input style of the datetime box.
+         * - `default`: text input with calendar popup.
+         * - `classic`: inline select boxes for date/time parts.
+         */
+        this.boxLook = input('default', ...(ngDevMode ? [{ debugName: "boxLook" }] : []));
         /**
          * @deprecated use locale & mode instead
          */
-        this.format = input(...(ngDevMode ? [undefined, { debugName: "format" }] : /* istanbul ignore next */ []));
-        this._editingDateObj = signal(null, ...(ngDevMode ? [{ debugName: "_editingDateObj" }] : /* istanbul ignore next */ []));
-        this._calendarSystem = linkedSignal(() => this.calendar() ?? this.type, ...(ngDevMode ? [{ debugName: "_calendarSystem" }] : /* istanbul ignore next */ []));
-        this._format = linkedSignal(() => this.format(), ...(ngDevMode ? [{ debugName: "_format" }] : /* istanbul ignore next */ []));
+        this.format = input(...(ngDevMode ? [undefined, { debugName: "format" }] : []));
+        this._editingDateObj = signal(null, ...(ngDevMode ? [{ debugName: "_editingDateObj" }] : []));
+        this._calendarSystem = linkedSignal(() => this.calendar() ?? this.type, ...(ngDevMode ? [{ debugName: "_calendarSystem" }] : []));
+        this._format = linkedSignal(() => this.format(), ...(ngDevMode ? [{ debugName: "_format" }] : []));
         this.#effect = effect(() => {
             const profile = this.localeService.activeProfile();
             //
@@ -58,14 +75,92 @@ class AXDateTimeBoxComponent extends classes((MXInputBaseValueComponent), MXCale
             if (!this.calendar()) {
                 this._calendarSystem.set(profile.calendar.system);
             }
-        }, ...(ngDevMode ? [{ debugName: "#effect" }] : /* istanbul ignore next */ []));
+        }, ...(ngDevMode ? [{ debugName: "#effect" }] : []));
+        this._classicDateFields = AX_DATETIME_BOX_CLASSIC_DATE_FIELDS;
+        this._classicTimeFields = AX_DATETIME_BOX_CLASSIC_TIME_FIELDS;
+        this._classicTimeOptions = {
+            hour: Array.from({ length: 24 }, (_, i) => ({ id: i, text: String(i).padStart(2, '0') })),
+            minute: Array.from({ length: 60 }, (_, i) => ({ id: i, text: String(i).padStart(2, '0') })),
+        };
+        this._classicDate = computed(() => {
+            const value = this._editingDateObj();
+            return value
+                ? this.calendarService.create(value, this._calendarSystem())
+                : this.calendarService.now(this._calendarSystem());
+        }, ...(ngDevMode ? [{ debugName: "_classicDate" }] : []));
+        this._classicYearOptions = computed(() => {
+            const current = this._classicDate();
+            const minYear = this.minValue
+                ? this.calendarService.create(this.minValue, this._calendarSystem()).year
+                : current.year - 100;
+            const maxYear = this.maxValue
+                ? this.calendarService.create(this.maxValue, this._calendarSystem()).year
+                : current.year + 10;
+            return Array.from({ length: maxYear - minYear + 1 }, (_, i) => ({
+                id: minYear + i,
+                text: String(minYear + i),
+            }));
+        }, ...(ngDevMode ? [{ debugName: "_classicYearOptions" }] : []));
+        this._classicMonthOptions = computed(() => {
+            const calendar = this._classicDate().calendar.name();
+            return Array.from({ length: 12 }, (_, i) => ({
+                id: i + 1,
+                text: `@acorex:dateTime.months.${calendar}.short.${i}`,
+            }));
+        }, ...(ngDevMode ? [{ debugName: "_classicMonthOptions" }] : []));
+        this._classicDayOptions = computed(() => {
+            const daysInMonth = this._classicDate().endOf('month').dayOfMonth;
+            return Array.from({ length: daysInMonth }, (_, i) => ({
+                id: i + 1,
+                text: String(i + 1).padStart(2, '0'),
+            }));
+        }, ...(ngDevMode ? [{ debugName: "_classicDayOptions" }] : []));
     }
     #effect;
+    get _classicBoxClass() {
+        return `ax-editor-container ax-default ax-classic-datetime-box ax-${this.look}${this.disabled ? ' ax-state-disabled' : ''}`;
+    }
+    get _classicHasDatePart() {
+        const mode = this.picker();
+        return mode === 'date' || mode === 'datetime';
+    }
+    get _classicHasTimePart() {
+        const mode = this.picker();
+        return mode === 'time' || mode === 'datetime';
+    }
     /**
      *  @ignore
      */
-    _handleInputModelChange(value) {
-        this.commitValue(value, true);
+    _classicPartValue(part) {
+        if (!this._editingDateObj())
+            return null;
+        const date = this._classicDate();
+        const values = {
+            year: date.year,
+            month: date.monthOfYear,
+            day: date.dayOfMonth,
+            hour: date.hour,
+            minute: date.minute,
+        };
+        const id = values[part];
+        return this._classicPartOptions(part).find((option) => option.id === id) ?? { id, text: String(id) };
+    }
+    /**
+     *  @ignore
+     */
+    _classicPartOptions(part) {
+        switch (part) {
+            case 'year':
+                return this._classicYearOptions();
+            case 'month':
+                return this._classicMonthOptions();
+            case 'day':
+                return this._classicDayOptions();
+            case 'hour':
+                return this._classicTimeOptions.hour;
+            case 'minute':
+                return this._classicTimeOptions.minute;
+        }
     }
     /**
      *  @ignore
@@ -87,7 +182,7 @@ class AXDateTimeBoxComponent extends classes((MXInputBaseValueComponent), MXCale
      */
     _handleOnClosedEvent(e) {
         //this.emitOnBlurEvent(null);
-        this.input.focus();
+        this.input?.focus();
         this.emitOnClosedEvent();
     }
     /**
@@ -126,7 +221,41 @@ class AXDateTimeBoxComponent extends classes((MXInputBaseValueComponent), MXCale
             this._editingDateObj.set(null);
         }
         this.commitValue(this._editingDateObj(), false);
-        this.close();
+        if (this.boxLook() !== 'classic') {
+            this.close();
+        }
+    }
+    /**
+     *  @ignore
+     */
+    _handleClassicPartChanged(e, part) {
+        if (!e.isUserInteraction)
+            return;
+        const partValue = this._readSelectValue(e.value);
+        if (partValue == null)
+            return;
+        let date = this._editingDateObj()
+            ? this.calendarService.create(this._editingDateObj(), this._calendarSystem())
+            : this.calendarService.now(this._calendarSystem());
+        date = date.set(part, partValue);
+        if (part === 'year' || part === 'month') {
+            const maxDay = date.endOf('month').dayOfMonth;
+            if (date.dayOfMonth > maxDay) {
+                date = date.set('day', maxDay);
+            }
+        }
+        this._editingDateObj.set(date.date);
+        this.commitValue(date.date, true);
+    }
+    /**
+     *  @ignore
+     */
+    _readSelectValue(value) {
+        if (Array.isArray(value))
+            return value[0]?.id ?? null;
+        if (value && typeof value === 'object')
+            return value.id ?? null;
+        return value != null ? Number(value) : null;
     }
     /**
      *  @ignore
@@ -142,8 +271,8 @@ class AXDateTimeBoxComponent extends classes((MXInputBaseValueComponent), MXCale
     get __hostName() {
         return this.name;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDateTimeBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXDateTimeBoxComponent, isStandalone: true, selector: "ax-datetime-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 }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: false, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", 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 }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, holidayDates: { classPropertyName: "holidayDates", publicName: "holidayDates", isSignal: false, isRequired: false, transformFunction: null }, allowTyping: { classPropertyName: "allowTyping", publicName: "allowTyping", isSignal: true, 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 }, weekend: { classPropertyName: "weekend", publicName: "weekend", isSignal: true, isRequired: false, transformFunction: null }, weekdays: { classPropertyName: "weekdays", publicName: "weekdays", isSignal: true, isRequired: false, transformFunction: null }, calendarLook: { classPropertyName: "calendarLook", publicName: "calendarLook", 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", onOpened: "onOpened", onClosed: "onClosed", readonlyChange: "readonlyChange", disabledChange: "disabledChange", formatChange: "formatChange" }, host: { attributes: { "ngSkipHydration": "true" }, properties: { "attr.name": "this.__hostName" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDateTimeBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXDateTimeBoxComponent, isStandalone: true, selector: "ax-datetime-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 }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: false, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", 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 }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, holidayDates: { classPropertyName: "holidayDates", publicName: "holidayDates", isSignal: false, isRequired: false, transformFunction: null }, allowTyping: { classPropertyName: "allowTyping", publicName: "allowTyping", isSignal: true, 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 }, weekend: { classPropertyName: "weekend", publicName: "weekend", isSignal: true, isRequired: false, transformFunction: null }, weekdays: { classPropertyName: "weekdays", publicName: "weekdays", isSignal: true, isRequired: false, transformFunction: null }, calendarLook: { classPropertyName: "calendarLook", publicName: "calendarLook", isSignal: true, isRequired: false, transformFunction: null }, boxLook: { classPropertyName: "boxLook", publicName: "boxLook", 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", onOpened: "onOpened", onClosed: "onClosed", readonlyChange: "readonlyChange", disabledChange: "disabledChange", formatChange: "formatChange" }, host: { attributes: { "ngSkipHydration": "true" }, properties: { "attr.name": "this.__hostName" } }, providers: [
             { provide: AXComponent, useExisting: AXDateTimeBoxComponent },
             { provide: AXFocusableComponent, useExisting: AXDateTimeBoxComponent },
             { provide: AXValuableComponent, useExisting: AXDateTimeBoxComponent },
@@ -153,9 +282,9 @@ 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: "<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]=\"format()\"\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-general-button-icon\" [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]=\"type\"\n      [depth]=\"depth\"\n      [ngModel]=\"_editingDateObj()\"\n      [picker]=\"picker()\"\n      [format]=\"format()\"\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      (onNavigate)=\"_handleCalendarOnNavigate($event)\"\n      (ngModelChange)=\"_handlePickerModelChange($event)\"\n    ></ax-datetime-picker>\n  </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: ["@layer components{ax-datetime-input{display:contents}app-demo-box .log-container{flex-direction:row-reverse;justify-content:space-between;display:flex}}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\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", "currentTimeButton", "calendar", "picker", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onClick", "readonlyChange", "disabledChange", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick"] }], 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        id=\"{{ id }}-input\"\n        [format]=\"format()\"\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]=\"type\"\n        [depth]=\"depth\"\n        [ngModel]=\"_editingDateObj()\"\n        [picker]=\"picker()\"\n        [format]=\"format()\"\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        (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", "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: "21.2.9", ngImport: i0, type: AXDateTimeBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDateTimeBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-datetime-box', inputs: [
                         'disabled',
@@ -192,7 +321,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useExisting: forwardRef(() => AXDateTimeBoxComponent),
                             multi: true,
                         },
-                    ], host: { ngSkipHydration: 'true' }, imports: [AXDropdownBoxComponent, AXDateTimeInputComponent, FormsModule, AXDateTimePickerComponent], template: "<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]=\"format()\"\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-general-button-icon\" [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]=\"type\"\n      [depth]=\"depth\"\n      [ngModel]=\"_editingDateObj()\"\n      [picker]=\"picker()\"\n      [format]=\"format()\"\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      (onNavigate)=\"_handleCalendarOnNavigate($event)\"\n      (ngModelChange)=\"_handlePickerModelChange($event)\"\n    ></ax-datetime-picker>\n  </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: ["@layer components{ax-datetime-input{display:contents}app-demo-box .log-container{flex-direction:row-reverse;justify-content:space-between;display:flex}}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], host: { ngSkipHydration: 'true' }, imports: [
+                        AXDropdownBoxComponent,
+                        AXDateTimeInputComponent,
+                        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]=\"format()\"\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]=\"type\"\n        [depth]=\"depth\"\n        [ngModel]=\"_editingDateObj()\"\n        [picker]=\"picker()\"\n        [format]=\"format()\"\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        (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]
@@ -204,17 +339,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 args: [AXDropdownBoxComponent]
             }], formatChange: [{
                 type: Output
-            }], allowTyping: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowTyping", required: false }] }], picker: [{ type: i0.Input, args: [{ isSignal: true, alias: "picker", required: false }] }], calendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendar", required: false }] }], weekend: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekend", required: false }] }], weekdays: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekdays", required: false }] }], calendarLook: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarLook", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], __hostName: [{
+            }], __hostName: [{
                 type: HostBinding,
                 args: ['attr.name']
             }] } });
 
 class AXDateTimeBoxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDateTimeBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: AXDateTimeBoxModule, imports: [AXDateTimeBoxComponent], exports: [AXDateTimeBoxComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDateTimeBoxModule, imports: [AXDateTimeBoxComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDateTimeBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AXDateTimeBoxModule, imports: [AXDateTimeBoxComponent], exports: [AXDateTimeBoxComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDateTimeBoxModule, imports: [AXDateTimeBoxComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDateTimeBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDateTimeBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXDateTimeBoxComponent],
@@ -226,5 +361,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXDateTimeBoxComponent, AXDateTimeBoxModule };
+export { AXDateTimeBoxComponent, AXDateTimeBoxModule, AX_DATETIME_BOX_CLASSIC_DATE_FIELDS, AX_DATETIME_BOX_CLASSIC_TIME_FIELDS };
 //# sourceMappingURL=acorex-components-datetime-box.mjs.map