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

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

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-datetime-box.mjs","sources":["../../../../libs/components/datetime-box/src/lib/datetime-box.component.ts","../../../../libs/components/datetime-box/src/lib/datetime-box.component.html","../../../../libs/components/datetime-box/src/lib/datetime-box.module.ts","../../../../libs/components/datetime-box/src/acorex-components-datetime-box.ts"],"sourcesContent":["import { AXCalendarNavigateEvent, MXCalendarBaseComponent } from '@acorex/components/calendar';\nimport {\n  AXClearableComponent,\n  AXComponent,\n  AXEvent,\n  AXFocusEvent,\n  AXFocusableComponent,\n  AXValuableComponent,\n  MXInputBaseValueComponent,\n  MXLookComponent,\n} from '@acorex/components/common';\nimport { AXDateTimeInputComponent } from '@acorex/components/datetime-input';\nimport { AXDateTimePickerComponent } from '@acorex/components/datetime-picker';\nimport { AXDropdownBoxComponent, MXDropdownBoxBaseComponent } from '@acorex/components/dropdown';\nimport { AXHtmlUtil } from '@acorex/core/utils';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  Output,\n  ViewChild,\n  ViewEncapsulation,\n  afterNextRender,\n  forwardRef,\n  input,\n  signal,\n} from '@angular/core';\nimport { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { classes } from 'polytype';\n\n/**\n * Represents a date and time input component that allows user interaction and triggers events.\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-datetime-box',\n  templateUrl: './datetime-box.component.html',\n  styleUrl: './datetime-box.component.scss',\n  inputs: [\n    'disabled',\n    'readonly',\n    'tabIndex',\n    'placeholder',\n    'minValue',\n    'maxValue',\n    'value',\n    'state',\n    'name',\n    'depth',\n    'id',\n    'type',\n    'look',\n    'holidayDates',\n  ],\n  outputs: [\n    'valueChange',\n    'stateChange',\n    'onValueChanged',\n    'onBlur',\n    'onFocus',\n    'onOpened',\n    'onClosed',\n    'readonlyChange',\n    'disabledChange',\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  providers: [\n    { provide: AXComponent, useExisting: AXDateTimeBoxComponent },\n    { provide: AXFocusableComponent, useExisting: AXDateTimeBoxComponent },\n    { provide: AXValuableComponent, useExisting: AXDateTimeBoxComponent },\n    { provide: AXClearableComponent, useExisting: AXDateTimeBoxComponent },\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXDateTimeBoxComponent),\n      multi: true,\n    },\n  ],\n  host: { ngSkipHydration: 'true' },\n  imports: [AXDropdownBoxComponent, AXDateTimeInputComponent, FormsModule, AXDateTimePickerComponent],\n})\nexport class AXDateTimeBoxComponent extends classes(\n  MXInputBaseValueComponent<Date>,\n  MXCalendarBaseComponent,\n  MXDropdownBoxBaseComponent,\n  MXLookComponent,\n) {\n  /**\n   *  @ignore\n   */\n  @ViewChild(AXDateTimeInputComponent)\n  protected input: AXDateTimeInputComponent;\n\n  /**\n   *  @ignore\n   */\n  @ViewChild(AXDateTimePickerComponent)\n  protected picker: AXDateTimePickerComponent;\n\n  /**\n   *  @ignore\n   */\n  @ViewChild(AXDropdownBoxComponent)\n  protected dropdown: AXDropdownBoxComponent;\n\n  /**\n   * Emitted when the format of the component changes.\n   *\n   * @event\n   */\n  @Output()\n  formatChange = new EventEmitter<string>();\n\n  /**\n   * Indicates whether typing is allowed in the component.\n   *\n   * @defaultValue false\n   */\n  allowTyping = input<boolean>(false);\n\n  isRtl = signal(false);\n\n  #init = afterNextRender(() => {\n    this.isRtl.set(AXHtmlUtil.isRtl(this.getHostElement()));\n  });\n\n  /**\n   *  @ignore\n   */\n  private _format = this.calendarService.calendar.formats.dateTimeInput;\n\n  /**\n   * Gets the format string used for displaying values.\n   */\n  @Input()\n  public get format(): string {\n    return this._format;\n  }\n\n  /**\n   * Sets the format string for displaying values.\n   * @param v The format string to be set.\n   */\n  public set format(v: string) {\n    this.setOption({\n      name: 'format',\n      value: v,\n    });\n  }\n\n  /**\n   *  @ignore\n   */\n  protected _handleInputModelChange(value: Date | null) {\n    this.commitValue(value, true);\n  }\n\n  /**\n   *  @ignore\n   */\n  protected _handlePickerModelChange(value: Date | null) {\n    if (this.isOpen) this.commitValue(value, true);\n  }\n\n  /**\n   *  @ignore\n   */\n  protected _handleOnOpenedEvent(e: AXEvent) {\n    //this.emitOnFocusEvent(null);\n    this.emitOnOpenedEvent();\n  }\n\n  /**\n   *  @ignore\n   */\n  protected _handleOnClosedEvent(e: AXEvent) {\n    //this.emitOnBlurEvent(null);\n    this.input.focus();\n    this.emitOnClosedEvent();\n  }\n\n  /**\n   *  @ignore\n   */\n  protected _handleInputOnFocusEvent(e: AXFocusEvent) {\n    this.emitOnFocusEvent(e.nativeEvent);\n  }\n\n  /**\n   *  @ignore\n   */\n  protected _handleInputOnBlurEvent(e: AXFocusEvent) {\n    this.emitOnBlurEvent(e.nativeEvent);\n  }\n\n  /**\n   *  @ignore\n   */\n  protected _handleCalendarOnNavigate(e: AXCalendarNavigateEvent) {\n    this.onNavigate.emit(e);\n  }\n\n  /**\n   * Handles changes to the internal value.\n   * @param value The new value that was set.\n   * @ignore\n   */\n  override internalValueChanged(value): void {\n    this.close();\n  }\n\n  /**\n   *  @ignore\n   */\n  protected _handleInputOnClick() {\n    if (!this.allowTyping()) {\n      this.open();\n    } else {\n      this.close();\n    }\n  }\n}\n","<ax-dropdown-box [disabled]=\"disabled\" (onOpened)=\"_handleOnOpenedEvent($event)\" (onClosed)=\"_handleOnClosedEvent($event)\" [look]=\"look\">\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <ax-datetime-input\n      dir=\"ltr\"\n      id=\"{{ id }}-input\"\n      [ngModel]=\"value\"\n      [allowTyping]=\"allowTyping()\"\n      (ngModelChange)=\"_handleInputModelChange($event)\"\n      [placeholder]=\"placeholder\"\n      [format]=\"format\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [type]=\"type\"\n      (onFocus)=\"_handleInputOnFocusEvent($event)\"\n      (onBlur)=\"_handleInputOnBlurEvent($event)\"\n      (onClick)=\"_handleInputOnClick()\"\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      [isRtl]=\"isRtl()\"\n      [depth]=\"depth\"\n      id=\"{{ id }}-picker\"\n      #picker\n      [ngModel]=\"value\"\n      (ngModelChange)=\"_handlePickerModelChange($event)\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [minValue]=\"minValue\"\n      [maxValue]=\"maxValue\"\n      [format]=\"format\"\n      [disabledDates]=\"disabledDates\"\n      [holidayDates]=\"holidayDates\"\n      [depth]=\"depth\"\n      [type]=\"type\"\n      (onNavigate)=\"_handleCalendarOnNavigate($event)\"\n    ></ax-datetime-picker>\n  </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n","import { AXCalendarModule } from '@acorex/components/calendar';\nimport { AXDateTimeInputModule } from '@acorex/components/datetime-input';\nimport { AXDateTimePickerModule } from '@acorex/components/datetime-picker';\nimport { AXDropdownModule } from '@acorex/components/dropdown';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AXDateTimeBoxComponent } from './datetime-box.component';\n\nconst COMPONENT = [AXDateTimeBoxComponent];\nconst MODULES = [CommonModule, FormsModule, AXDateTimeInputModule, AXDropdownModule, AXCalendarModule, AXDateTimePickerModule];\n\n@NgModule({\n  imports: [...MODULES, ...COMPONENT],\n  exports: [...COMPONENT],\n  providers: [],\n})\nexport class AXDateTimeBoxModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-components-datetime-box.mjs","sources":["../../../../libs/components/datetime-box/src/lib/datetime-box.component.ts","../../../../libs/components/datetime-box/src/lib/datetime-box.component.html","../../../../libs/components/datetime-box/src/lib/datetime-box.module.ts","../../../../libs/components/datetime-box/src/acorex-components-datetime-box.ts"],"sourcesContent":["import { AXCalendarNavigateEvent, AXDateTimePickerType, MXCalendarBaseComponent } from '@acorex/components/calendar';\nimport {\n  AXClearableComponent,\n  AXComponent,\n  AXEvent,\n  AXFocusEvent,\n  AXFocusableComponent,\n  AXValuableComponent,\n  MXInputBaseValueComponent,\n  MXLookComponent,\n} from '@acorex/components/common';\nimport { AXDateTimeInputComponent } from '@acorex/components/datetime-input';\nimport { AXDateTimePickerComponent } from '@acorex/components/datetime-picker';\nimport { AXDropdownBoxComponent, MXDropdownBoxBaseComponent } from '@acorex/components/dropdown';\nimport { AXHtmlUtil } from '@acorex/core/utils';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  Output,\n  ViewChild,\n  ViewEncapsulation,\n  afterNextRender,\n  effect,\n  forwardRef,\n  input,\n  linkedSignal,\n  signal,\n} from '@angular/core';\nimport { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { classes } from 'polytype';\n\n/**\n * Represents a date and time input component that allows user interaction and triggers events.\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-datetime-box',\n  templateUrl: './datetime-box.component.html',\n  styleUrl: './datetime-box.component.scss',\n  inputs: [\n    'disabled',\n    'readonly',\n    'tabIndex',\n    'placeholder',\n    'minValue',\n    'maxValue',\n    'value',\n    'state',\n    'name',\n    'depth',\n    'id',\n    'type',\n    'look',\n    'holidayDates',\n  ],\n  outputs: [\n    'valueChange',\n    'stateChange',\n    'onValueChanged',\n    'onBlur',\n    'onFocus',\n    'onOpened',\n    'onClosed',\n    'readonlyChange',\n    'disabledChange',\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  providers: [\n    { provide: AXComponent, useExisting: AXDateTimeBoxComponent },\n    { provide: AXFocusableComponent, useExisting: AXDateTimeBoxComponent },\n    { provide: AXValuableComponent, useExisting: AXDateTimeBoxComponent },\n    { provide: AXClearableComponent, useExisting: AXDateTimeBoxComponent },\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXDateTimeBoxComponent),\n      multi: true,\n    },\n  ],\n  host: { ngSkipHydration: 'true' },\n  imports: [AXDropdownBoxComponent, AXDateTimeInputComponent, FormsModule, AXDateTimePickerComponent],\n})\nexport class AXDateTimeBoxComponent extends classes(\n  MXInputBaseValueComponent<Date>,\n  MXCalendarBaseComponent,\n  MXDropdownBoxBaseComponent,\n  MXLookComponent,\n) {\n  /**\n   *  @ignore\n   */\n  @ViewChild(AXDateTimeInputComponent)\n  protected input: AXDateTimeInputComponent;\n\n  /**\n   *  @ignore\n   */\n  @ViewChild(AXDateTimePickerComponent)\n  protected pickerRef: AXDateTimePickerComponent;\n\n  /**\n   *  @ignore\n   */\n  @ViewChild(AXDropdownBoxComponent)\n  protected dropdown: AXDropdownBoxComponent;\n\n  /**\n   * Emitted when the format of the component changes.\n   *\n   * @event\n   */\n  @Output()\n  formatChange = new EventEmitter<string>();\n\n  /**\n   * Indicates whether typing is allowed in the component.\n   *\n   * @defaultValue false\n   */\n  allowTyping = input<boolean>(false);\n\n  protected isRtl = signal(false);\n\n  #init = afterNextRender(() => {\n    this.isRtl.set(AXHtmlUtil.isRtl(this.getHostElement()));\n  });\n\n  /**\n * @description The calendar type to use for the datetime input.\n */\n  calendar = input<string | null>(null);\n\n  protected _calendarSystem = linkedSignal<string | null>(() => this.calendar() ?? this.type);\n\n  private _format = linkedSignal<string>(() => this.format());\n\n  picker = input<AXDateTimePickerType>('datetime');\n\n  /**\n   * @deprecated use locale & mode instead\n   */\n  format = input<string | null>();\n\n\n  #effect = effect(() => {\n    const profile = this.localeService.activeProfile();\n    //\n    if (!this.format()) {\n      this._format.set(this.format() ?? profile.formats[this.picker()]?.short ?? '');\n    }\n    //\n    if (!this.calendar()) {\n      this._calendarSystem.set(profile.calendar.system);\n    }\n  });\n\n  /**\n   *  @ignore\n   */\n  protected _handleInputModelChange(value: Date | null) {\n    this.commitValue(value, true);\n  }\n\n  /**\n   *  @ignore\n   */\n  protected _handlePickerModelChange(value: Date | null) {\n    if (this.isOpen) {\n      this.commitValue(value, true);\n    }\n  }\n\n  /**\n   *  @ignore\n   */\n  protected _handleOnOpenedEvent(e: AXEvent) {\n    //this.emitOnFocusEvent(null);\n    this.emitOnOpenedEvent();\n  }\n\n  /**\n   *  @ignore\n   */\n  protected _handleOnClosedEvent(e: AXEvent) {\n    //this.emitOnBlurEvent(null);\n    this.input.focus();\n    this.emitOnClosedEvent();\n  }\n\n  /**\n   *  @ignore\n   */\n  protected _handleInputOnFocusEvent(e: AXFocusEvent) {\n    this.emitOnFocusEvent(e.nativeEvent);\n  }\n\n  /**\n   *  @ignore\n   */\n  protected _handleInputOnBlurEvent(e: AXFocusEvent) {\n    this.emitOnBlurEvent(e.nativeEvent);\n  }\n\n  /**\n   *  @ignore\n   */\n  protected _handleCalendarOnNavigate(e: AXCalendarNavigateEvent) {\n    this.onNavigate.emit(e);\n  }\n\n  /**\n   * Handles changes to the internal value.\n   * @param value The new value that was set.\n   * @ignore\n   */\n  override internalValueChanged(value): void {\n    this.close();\n  }\n\n  /**\n   *  @ignore\n   */\n  protected _handleInputOnClick() {\n    if (!this.allowTyping()) {\n      this.open();\n    } else {\n      this.close();\n    }\n  }\n}\n","<ax-dropdown-box\n  [disabled]=\"disabled\"\n  (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\"\n  [look]=\"look\"\n>\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <ax-datetime-input\n      dir=\"ltr\"\n      id=\"{{ id }}-input\"\n      [ngModel]=\"value\"\n      [allowTyping]=\"allowTyping()\"\n      (ngModelChange)=\"_handleInputModelChange($event)\"\n      [placeholder]=\"placeholder\"\n      [format]=\"format()\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [calendar]=\"_calendarSystem()\"\n      [picker]=\"picker()\"\n      (onFocus)=\"_handleInputOnFocusEvent($event)\"\n      (onBlur)=\"_handleInputOnBlurEvent($event)\"\n      (onClick)=\"_handleInputOnClick()\"\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      [isRtl]=\"isRtl()\"\n      [depth]=\"depth\"\n      id=\"{{ id }}-picker\"\n      #pickerRef\n      [ngModel]=\"value\"\n      [picker]=\"picker()\"\n      [calendar]=\"_calendarSystem()\"\n      (ngModelChange)=\"_handlePickerModelChange($event)\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [minValue]=\"minValue\"\n      [maxValue]=\"maxValue\"\n      [format]=\"format()\"\n      [disabledDates]=\"disabledDates\"\n      [holidayDates]=\"holidayDates\"\n      [depth]=\"depth\"\n      [type]=\"type\"\n      (onNavigate)=\"_handleCalendarOnNavigate($event)\"\n    ></ax-datetime-picker>\n  </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n","import { AXCalendarModule } from '@acorex/components/calendar';\nimport { AXDateTimeInputModule } from '@acorex/components/datetime-input';\nimport { AXDateTimePickerModule } from '@acorex/components/datetime-picker';\nimport { AXDropdownModule } from '@acorex/components/dropdown';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AXDateTimeBoxComponent } from './datetime-box.component';\n\nconst COMPONENT = [AXDateTimeBoxComponent];\nconst MODULES = [CommonModule, FormsModule, AXDateTimeInputModule, AXDropdownModule, AXCalendarModule, AXDateTimePickerModule];\n\n@NgModule({\n  imports: [...MODULES, ...COMPONENT],\n  exports: [...COMPONENT],\n  providers: [],\n})\nexport class AXDateTimeBoxModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

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