@acorex/components 21.0.2-next.35 → 21.0.2-next.36
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.
- package/datetime-box/index.d.ts +2 -3
- package/datetime-input/index.d.ts +2 -2
- package/datetime-picker/index.d.ts +3 -3
- package/fesm2022/acorex-components-datetime-box.mjs +6 -18
- package/fesm2022/acorex-components-datetime-box.mjs.map +1 -1
- package/fesm2022/acorex-components-datetime-input.mjs +9 -17
- package/fesm2022/acorex-components-datetime-input.mjs.map +1 -1
- package/fesm2022/acorex-components-datetime-picker.mjs +27 -30
- package/fesm2022/acorex-components-datetime-picker.mjs.map +1 -1
- package/package.json +22 -22
package/datetime-box/index.d.ts
CHANGED
|
@@ -36,7 +36,6 @@ declare const AXDateTimeBoxComponent_base: polytype.Polytype.ClusteredConstructo
|
|
|
36
36
|
* @category Components
|
|
37
37
|
*/
|
|
38
38
|
declare class AXDateTimeBoxComponent extends AXDateTimeBoxComponent_base {
|
|
39
|
-
#private;
|
|
40
39
|
/**
|
|
41
40
|
* @ignore
|
|
42
41
|
*/
|
|
@@ -83,8 +82,8 @@ declare class AXDateTimeBoxComponent extends AXDateTimeBoxComponent_base {
|
|
|
83
82
|
*/
|
|
84
83
|
readonly format: _angular_core.InputSignal<string>;
|
|
85
84
|
protected _editingDateObj: _angular_core.WritableSignal<Date>;
|
|
86
|
-
protected _calendarSystem: _angular_core.
|
|
87
|
-
|
|
85
|
+
protected readonly _calendarSystem: _angular_core.Signal<string>;
|
|
86
|
+
protected readonly _resolvedFormat: _angular_core.Signal<string>;
|
|
88
87
|
protected readonly _classicDateFields: AXDateTimeBoxClassicField[];
|
|
89
88
|
protected readonly _classicTimeFields: AXDateTimeBoxClassicField[];
|
|
90
89
|
private readonly _classicTimeOptions;
|
|
@@ -34,7 +34,7 @@ declare class AXDateTimeInputComponent extends MXInputBaseValueComponent<Date> {
|
|
|
34
34
|
* @description The calendar type to use for the datetime input.
|
|
35
35
|
*/
|
|
36
36
|
calendar: _angular_core.InputSignal<string>;
|
|
37
|
-
protected _calendarSystem: _angular_core.
|
|
37
|
+
protected readonly _calendarSystem: _angular_core.Signal<string>;
|
|
38
38
|
private _activePart;
|
|
39
39
|
private _editingDate;
|
|
40
40
|
/**
|
|
@@ -49,7 +49,7 @@ declare class AXDateTimeInputComponent extends MXInputBaseValueComponent<Date> {
|
|
|
49
49
|
*/
|
|
50
50
|
onClick: _angular_core.OutputEmitterRef<AXClickEvent>;
|
|
51
51
|
picker: _angular_core.InputSignal<AXDateTimePickerType>;
|
|
52
|
-
|
|
52
|
+
protected readonly _resolvedFormat: _angular_core.Signal<string>;
|
|
53
53
|
/**
|
|
54
54
|
* @deprecated use locale & mode instead
|
|
55
55
|
*/
|
|
@@ -70,14 +70,14 @@ declare class AXDateTimePickerComponent extends AXDateTimePickerComponent_base i
|
|
|
70
70
|
* @ignore
|
|
71
71
|
*/
|
|
72
72
|
protected get _hasTimePart(): boolean;
|
|
73
|
-
editingDateObj: _angular_core.WritableSignal<AXDateTime>;
|
|
74
73
|
/**
|
|
75
74
|
* @description The calendar type to use for the datetime input.
|
|
76
75
|
*/
|
|
77
76
|
calendar: _angular_core.InputSignal<string>;
|
|
78
|
-
protected _calendarSystem: _angular_core.
|
|
77
|
+
protected readonly _calendarSystem: _angular_core.Signal<string>;
|
|
78
|
+
editingDateObj: _angular_core.WritableSignal<AXDateTime>;
|
|
79
79
|
picker: _angular_core.InputSignal<AXDateTimePickerType>;
|
|
80
|
-
|
|
80
|
+
protected readonly _resolvedFormat: _angular_core.Signal<string>;
|
|
81
81
|
/**
|
|
82
82
|
* @deprecated use locale & mode instead
|
|
83
83
|
*/
|
|
@@ -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,
|
|
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 =
|
|
67
|
-
this.
|
|
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
|
}
|
|
@@ -211,7 +199,7 @@ class AXDateTimeBoxComponent extends classes((MXInputBaseValueComponent), MXCale
|
|
|
211
199
|
internalValueChanged(value) {
|
|
212
200
|
try {
|
|
213
201
|
if (this.calendarService.isValidDate(value)) {
|
|
214
|
-
this._editingDateObj.set(this.calendarService.create(value, this.
|
|
202
|
+
this._editingDateObj.set(this.calendarService.create(value, this._calendarSystem()).date);
|
|
215
203
|
}
|
|
216
204
|
else {
|
|
217
205
|
throw new Error();
|
|
@@ -282,7 +270,7 @@ class AXDateTimeBoxComponent extends classes((MXInputBaseValueComponent), MXCale
|
|
|
282
270
|
useExisting: forwardRef(() => AXDateTimeBoxComponent),
|
|
283
271
|
multi: true,
|
|
284
272
|
},
|
|
285
|
-
], 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]=\"
|
|
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 }); }
|
|
286
274
|
}
|
|
287
275
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDateTimeBoxComponent, decorators: [{
|
|
288
276
|
type: Component,
|
|
@@ -327,7 +315,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
327
315
|
FormsModule,
|
|
328
316
|
AXDateTimePickerComponent,
|
|
329
317
|
AXSelectBoxComponent,
|
|
330
|
-
], 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]=\"
|
|
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"] }]
|
|
331
319
|
}], propDecorators: { input: [{
|
|
332
320
|
type: ViewChild,
|
|
333
321
|
args: [AXDateTimeInputComponent]
|