@acorex/components 20.7.36 → 20.7.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -6,7 +6,7 @@ import { AXDecoratorGenericComponent } from '@acorex/components/decorators';
6
6
  import { MXDropdownBoxBaseComponent, AXDropdownBoxComponent } from '@acorex/components/dropdown';
7
7
  import { AXSelectBoxComponent } from '@acorex/components/select-box';
8
8
  import * as i0 from '@angular/core';
9
- import { EventEmitter, input, signal, linkedSignal, effect, computed, forwardRef, HostBinding, Output, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
9
+ import { EventEmitter, input, signal, computed, forwardRef, HostBinding, Output, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
10
10
  import * as i1 from '@angular/forms';
11
11
  import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
12
12
  import { classes } from 'polytype';
@@ -63,19 +63,8 @@ class AXDateTimeBoxComponent extends classes((MXInputBaseValueComponent), MXCale
63
63
  */
64
64
  this.format = input(...(ngDevMode ? [undefined, { debugName: "format" }] : []));
65
65
  this._editingDateObj = signal(null, ...(ngDevMode ? [{ debugName: "_editingDateObj" }] : []));
66
- this._calendarSystem = linkedSignal(() => this.calendar() ?? this.type, ...(ngDevMode ? [{ debugName: "_calendarSystem" }] : []));
67
- this._format = linkedSignal(() => this.format(), ...(ngDevMode ? [{ debugName: "_format" }] : []));
68
- this.#effect = effect(() => {
69
- const profile = this.localeService.activeProfile();
70
- //
71
- if (!this.format()) {
72
- this._format.set(this.format() ?? profile.formats[this.picker()]?.short ?? '');
73
- }
74
- //
75
- if (!this.calendar()) {
76
- this._calendarSystem.set(profile.calendar.system);
77
- }
78
- }, ...(ngDevMode ? [{ debugName: "#effect" }] : []));
66
+ this._calendarSystem = computed(() => this.calendar() ?? this.localeService.activeProfile().calendar.system, ...(ngDevMode ? [{ debugName: "_calendarSystem" }] : []));
67
+ this._resolvedFormat = computed(() => this.format() ?? this.localeService.activeProfile().formats[this.picker()]?.short ?? '', ...(ngDevMode ? [{ debugName: "_resolvedFormat" }] : []));
79
68
  this._classicDateFields = AX_DATETIME_BOX_CLASSIC_DATE_FIELDS;
80
69
  this._classicTimeFields = AX_DATETIME_BOX_CLASSIC_TIME_FIELDS;
81
70
  this._classicTimeOptions = {
@@ -116,7 +105,6 @@ class AXDateTimeBoxComponent extends classes((MXInputBaseValueComponent), MXCale
116
105
  }));
117
106
  }, ...(ngDevMode ? [{ debugName: "_classicDayOptions" }] : []));
118
107
  }
119
- #effect;
120
108
  get _classicBoxClass() {
121
109
  return `ax-editor-container ax-default ax-classic-datetime-box ax-${this.look}${this.disabled ? ' ax-state-disabled' : ''}`;
122
110
  }
@@ -142,7 +130,8 @@ class AXDateTimeBoxComponent extends classes((MXInputBaseValueComponent), MXCale
142
130
  hour: date.hour,
143
131
  minute: date.minute,
144
132
  };
145
- return values[part];
133
+ const id = values[part];
134
+ return this._classicPartOptions(part).find((option) => option.id === id) ?? { id, text: String(id) };
146
135
  }
147
136
  /**
148
137
  * @ignore
@@ -210,7 +199,7 @@ class AXDateTimeBoxComponent extends classes((MXInputBaseValueComponent), MXCale
210
199
  internalValueChanged(value) {
211
200
  try {
212
201
  if (this.calendarService.isValidDate(value)) {
213
- this._editingDateObj.set(this.calendarService.create(value, this.calendar()).date);
202
+ this._editingDateObj.set(this.calendarService.create(value, this._calendarSystem()).date);
214
203
  }
215
204
  else {
216
205
  throw new Error();
@@ -281,7 +270,7 @@ class AXDateTimeBoxComponent extends classes((MXInputBaseValueComponent), MXCale
281
270
  useExisting: forwardRef(() => AXDateTimeBoxComponent),
282
271
  multi: true,
283
272
  },
284
- ], 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;gap:2rem;min-width:0;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 }); }
273
+ ], viewQueries: [{ propertyName: "input", first: true, predicate: AXDateTimeInputComponent, descendants: true }, { propertyName: "pickerRef", first: true, predicate: AXDateTimePickerComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (boxLook() === 'classic') {\n <div [class]=\"_classicBoxClass\">\n <ng-content select=\"ax-prefix\"></ng-content>\n <div class=\"ax-classic-datetime-selects\" dir=\"ltr\">\n @if (_classicHasDatePart) {\n <div class=\"ax-classic-datetime-group\">\n @for (field of _classicDateFields; track field.part; let last = $last) {\n <ax-select-box\n look=\"none\"\n [class]=\"'ax-classic-' + field.part + '-select'\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [dataSource]=\"_classicPartOptions(field.part)\"\n textField=\"text\"\n valueField=\"id\"\n [ngModel]=\"_classicPartValue(field.part)\"\n [dropdownWidth]=\"field.dropdownWidth\"\n [isItemTruncated]=\"false\"\n [maxVisibleItems]=\"field.maxVisibleItems\"\n [itemHeight]=\"32\"\n (onValueChanged)=\"_handleClassicPartChanged($event, field.part)\"\n ></ax-select-box>\n @if (!last) {\n <span class=\"ax-classic-datetime-separator\" aria-hidden=\"true\">-</span>\n }\n }\n </div>\n }\n @if (_classicHasTimePart) {\n <div class=\"ax-classic-datetime-group\">\n @for (field of _classicTimeFields; track field.part; let last = $last) {\n <ax-select-box\n look=\"none\"\n [class]=\"'ax-classic-' + field.part + '-select'\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [dataSource]=\"_classicPartOptions(field.part)\"\n textField=\"text\"\n valueField=\"id\"\n [ngModel]=\"_classicPartValue(field.part)\"\n [dropdownWidth]=\"field.dropdownWidth\"\n [isItemTruncated]=\"false\"\n [maxVisibleItems]=\"field.maxVisibleItems\"\n [itemHeight]=\"32\"\n (onValueChanged)=\"_handleClassicPartChanged($event, field.part)\"\n ></ax-select-box>\n @if (!last) {\n <span class=\"ax-classic-datetime-separator\" aria-hidden=\"true\">:</span>\n }\n }\n </div>\n }\n </div>\n <ng-content select=\"ax-suffix\"></ng-content>\n </div>\n} @else {\n <ax-dropdown-box\n [look]=\"look\"\n [disabled]=\"disabled\"\n (onOpened)=\"_handleOnOpenedEvent($event)\"\n (onClosed)=\"_handleOnClosedEvent($event)\"\n >\n <ng-container input>\n <ng-content select=\"ax-prefix\"> </ng-content>\n <ax-datetime-input\n dir=\"ltr\"\n [name]=\"name\"\n [ngModel]=\"_editingDateObj()\"\n id=\"{{ id }}-input\"\n [format]=\"_resolvedFormat()\"\n [picker]=\"picker()\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [allowTyping]=\"allowTyping()\"\n [calendar]=\"_calendarSystem()\"\n (onClick)=\"_handleInputOnClick()\"\n (onBlur)=\"_handleInputOnBlurEvent($event)\"\n (onFocus)=\"_handleInputOnFocusEvent($event)\"\n ></ax-datetime-input>\n @if (value && !disabled && !readonly) {\n <ng-content select=\"ax-clear-button\"></ng-content>\n }\n <button type=\"button\" class=\"ax-editor-button\" [tabIndex]=\"-1\" [disabled]=\"disabled\" (click)=\"toggle()\">\n <span class=\"ax-icon ax-icon-calendar\"></span>\n </button>\n <ng-content select=\"ax-suffix\"> </ng-content>\n </ng-container>\n <ng-container panel>\n <ax-datetime-picker\n #pickerRef\n [type]=\"_calendarSystem()\"\n [depth]=\"depth\"\n [ngModel]=\"_editingDateObj()\"\n [picker]=\"picker()\"\n [format]=\"_resolvedFormat()\"\n id=\"{{ id }}-picker\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [minValue]=\"minValue\"\n [maxValue]=\"maxValue\"\n [weekend]=\"weekend()\"\n [weekdays]=\"weekdays()\"\n [holidayDates]=\"holidayDates\"\n [calendar]=\"_calendarSystem()\"\n [disabledDates]=\"disabledDates\"\n [calendarLook]=\"calendarLook()\"\n (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 }); }
285
274
  }
286
275
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDateTimeBoxComponent, decorators: [{
287
276
  type: Component,
@@ -320,7 +309,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
320
309
  useExisting: forwardRef(() => AXDateTimeBoxComponent),
321
310
  multi: true,
322
311
  },
323
- ], 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;gap:2rem;min-width:0;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"] }]
312
+ ], host: { ngSkipHydration: 'true' }, imports: [
313
+ AXDropdownBoxComponent,
314
+ AXDateTimeInputComponent,
315
+ FormsModule,
316
+ AXDateTimePickerComponent,
317
+ AXSelectBoxComponent,
318
+ ], template: "@if (boxLook() === 'classic') {\n <div [class]=\"_classicBoxClass\">\n <ng-content select=\"ax-prefix\"></ng-content>\n <div class=\"ax-classic-datetime-selects\" dir=\"ltr\">\n @if (_classicHasDatePart) {\n <div class=\"ax-classic-datetime-group\">\n @for (field of _classicDateFields; track field.part; let last = $last) {\n <ax-select-box\n look=\"none\"\n [class]=\"'ax-classic-' + field.part + '-select'\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [dataSource]=\"_classicPartOptions(field.part)\"\n textField=\"text\"\n valueField=\"id\"\n [ngModel]=\"_classicPartValue(field.part)\"\n [dropdownWidth]=\"field.dropdownWidth\"\n [isItemTruncated]=\"false\"\n [maxVisibleItems]=\"field.maxVisibleItems\"\n [itemHeight]=\"32\"\n (onValueChanged)=\"_handleClassicPartChanged($event, field.part)\"\n ></ax-select-box>\n @if (!last) {\n <span class=\"ax-classic-datetime-separator\" aria-hidden=\"true\">-</span>\n }\n }\n </div>\n }\n @if (_classicHasTimePart) {\n <div class=\"ax-classic-datetime-group\">\n @for (field of _classicTimeFields; track field.part; let last = $last) {\n <ax-select-box\n look=\"none\"\n [class]=\"'ax-classic-' + field.part + '-select'\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [dataSource]=\"_classicPartOptions(field.part)\"\n textField=\"text\"\n valueField=\"id\"\n [ngModel]=\"_classicPartValue(field.part)\"\n [dropdownWidth]=\"field.dropdownWidth\"\n [isItemTruncated]=\"false\"\n [maxVisibleItems]=\"field.maxVisibleItems\"\n [itemHeight]=\"32\"\n (onValueChanged)=\"_handleClassicPartChanged($event, field.part)\"\n ></ax-select-box>\n @if (!last) {\n <span class=\"ax-classic-datetime-separator\" aria-hidden=\"true\">:</span>\n }\n }\n </div>\n }\n </div>\n <ng-content select=\"ax-suffix\"></ng-content>\n </div>\n} @else {\n <ax-dropdown-box\n [look]=\"look\"\n [disabled]=\"disabled\"\n (onOpened)=\"_handleOnOpenedEvent($event)\"\n (onClosed)=\"_handleOnClosedEvent($event)\"\n >\n <ng-container input>\n <ng-content select=\"ax-prefix\"> </ng-content>\n <ax-datetime-input\n dir=\"ltr\"\n [name]=\"name\"\n [ngModel]=\"_editingDateObj()\"\n id=\"{{ id }}-input\"\n [format]=\"_resolvedFormat()\"\n [picker]=\"picker()\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [allowTyping]=\"allowTyping()\"\n [calendar]=\"_calendarSystem()\"\n (onClick)=\"_handleInputOnClick()\"\n (onBlur)=\"_handleInputOnBlurEvent($event)\"\n (onFocus)=\"_handleInputOnFocusEvent($event)\"\n ></ax-datetime-input>\n @if (value && !disabled && !readonly) {\n <ng-content select=\"ax-clear-button\"></ng-content>\n }\n <button type=\"button\" class=\"ax-editor-button\" [tabIndex]=\"-1\" [disabled]=\"disabled\" (click)=\"toggle()\">\n <span class=\"ax-icon ax-icon-calendar\"></span>\n </button>\n <ng-content select=\"ax-suffix\"> </ng-content>\n </ng-container>\n <ng-container panel>\n <ax-datetime-picker\n #pickerRef\n [type]=\"_calendarSystem()\"\n [depth]=\"depth\"\n [ngModel]=\"_editingDateObj()\"\n [picker]=\"picker()\"\n [format]=\"_resolvedFormat()\"\n id=\"{{ id }}-picker\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [minValue]=\"minValue\"\n [maxValue]=\"maxValue\"\n [weekend]=\"weekend()\"\n [weekdays]=\"weekdays()\"\n [holidayDates]=\"holidayDates\"\n [calendar]=\"_calendarSystem()\"\n [disabledDates]=\"disabledDates\"\n [calendarLook]=\"calendarLook()\"\n (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"] }]
324
319
  }], propDecorators: { input: [{
325
320
  type: ViewChild,
326
321
  args: [AXDateTimeInputComponent]