@acorex/components 20.7.35 → 20.7.37
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/button/index.d.ts +2 -8
- package/data-table/index.d.ts +14 -14
- package/datetime-box/index.d.ts +65 -4
- package/fesm2022/acorex-components-button.mjs +9 -10
- package/fesm2022/acorex-components-button.mjs.map +1 -1
- package/fesm2022/acorex-components-calendar.mjs +2 -2
- package/fesm2022/acorex-components-calendar.mjs.map +1 -1
- package/fesm2022/acorex-components-data-table.mjs +19 -19
- package/fesm2022/acorex-components-data-table.mjs.map +1 -1
- package/fesm2022/acorex-components-datetime-box.mjs +144 -9
- package/fesm2022/acorex-components-datetime-box.mjs.map +1 -1
- package/fesm2022/acorex-components-dialog.mjs +6 -13
- package/fesm2022/acorex-components-dialog.mjs.map +1 -1
- package/fesm2022/acorex-components-popup.mjs +2 -2
- package/fesm2022/acorex-components-popup.mjs.map +1 -1
- package/fesm2022/acorex-components-query-builder.mjs +1 -1
- package/fesm2022/acorex-components-query-builder.mjs.map +1 -1
- package/fesm2022/acorex-components-rrule.mjs +1 -1
- package/fesm2022/acorex-components-rrule.mjs.map +1 -1
- package/fesm2022/acorex-components-scheduler-picker.mjs +5 -5
- package/fesm2022/acorex-components-scheduler-picker.mjs.map +1 -1
- package/fesm2022/acorex-components-tree-view.mjs +1 -1
- package/fesm2022/acorex-components-tree-view.mjs.map +1 -1
- package/package.json +25 -25
|
@@ -4,12 +4,23 @@ import { AXDateTimeInputComponent } from '@acorex/components/datetime-input';
|
|
|
4
4
|
import { AXDateTimePickerComponent } from '@acorex/components/datetime-picker';
|
|
5
5
|
import { AXDecoratorGenericComponent } from '@acorex/components/decorators';
|
|
6
6
|
import { MXDropdownBoxBaseComponent, AXDropdownBoxComponent } from '@acorex/components/dropdown';
|
|
7
|
+
import { AXSelectBoxComponent } from '@acorex/components/select-box';
|
|
7
8
|
import * as i0 from '@angular/core';
|
|
8
|
-
import { EventEmitter, input, signal, linkedSignal, effect, forwardRef, HostBinding, Output, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
|
|
9
|
+
import { EventEmitter, input, signal, linkedSignal, effect, computed, forwardRef, HostBinding, Output, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
|
|
9
10
|
import * as i1 from '@angular/forms';
|
|
10
11
|
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
11
12
|
import { classes } from 'polytype';
|
|
12
13
|
|
|
14
|
+
const AX_DATETIME_BOX_CLASSIC_DATE_FIELDS = [
|
|
15
|
+
{ part: 'year', dropdownWidth: '70', maxVisibleItems: 10 },
|
|
16
|
+
{ part: 'month', dropdownWidth: '90', maxVisibleItems: 12 },
|
|
17
|
+
{ part: 'day', dropdownWidth: '50', maxVisibleItems: 10 },
|
|
18
|
+
];
|
|
19
|
+
const AX_DATETIME_BOX_CLASSIC_TIME_FIELDS = [
|
|
20
|
+
{ part: 'hour', dropdownWidth: '50', maxVisibleItems: 10 },
|
|
21
|
+
{ part: 'minute', dropdownWidth: '50', maxVisibleItems: 10 },
|
|
22
|
+
];
|
|
23
|
+
|
|
13
24
|
/**
|
|
14
25
|
* Represents a date and time input component that allows user interaction and triggers events.
|
|
15
26
|
*
|
|
@@ -41,6 +52,12 @@ class AXDateTimeBoxComponent extends classes((MXInputBaseValueComponent), MXCale
|
|
|
41
52
|
* Day view navigation style of the embedded calendar.
|
|
42
53
|
*/
|
|
43
54
|
this.calendarLook = input('select', ...(ngDevMode ? [{ debugName: "calendarLook" }] : []));
|
|
55
|
+
/**
|
|
56
|
+
* Input style of the datetime box.
|
|
57
|
+
* - `default`: text input with calendar popup.
|
|
58
|
+
* - `classic`: inline select boxes for date/time parts.
|
|
59
|
+
*/
|
|
60
|
+
this.boxLook = input('default', ...(ngDevMode ? [{ debugName: "boxLook" }] : []));
|
|
44
61
|
/**
|
|
45
62
|
* @deprecated use locale & mode instead
|
|
46
63
|
*/
|
|
@@ -59,13 +76,91 @@ class AXDateTimeBoxComponent extends classes((MXInputBaseValueComponent), MXCale
|
|
|
59
76
|
this._calendarSystem.set(profile.calendar.system);
|
|
60
77
|
}
|
|
61
78
|
}, ...(ngDevMode ? [{ debugName: "#effect" }] : []));
|
|
79
|
+
this._classicDateFields = AX_DATETIME_BOX_CLASSIC_DATE_FIELDS;
|
|
80
|
+
this._classicTimeFields = AX_DATETIME_BOX_CLASSIC_TIME_FIELDS;
|
|
81
|
+
this._classicTimeOptions = {
|
|
82
|
+
hour: Array.from({ length: 24 }, (_, i) => ({ id: i, text: String(i).padStart(2, '0') })),
|
|
83
|
+
minute: Array.from({ length: 60 }, (_, i) => ({ id: i, text: String(i).padStart(2, '0') })),
|
|
84
|
+
};
|
|
85
|
+
this._classicDate = computed(() => {
|
|
86
|
+
const value = this._editingDateObj();
|
|
87
|
+
return value
|
|
88
|
+
? this.calendarService.create(value, this._calendarSystem())
|
|
89
|
+
: this.calendarService.now(this._calendarSystem());
|
|
90
|
+
}, ...(ngDevMode ? [{ debugName: "_classicDate" }] : []));
|
|
91
|
+
this._classicYearOptions = computed(() => {
|
|
92
|
+
const current = this._classicDate();
|
|
93
|
+
const minYear = this.minValue
|
|
94
|
+
? this.calendarService.create(this.minValue, this._calendarSystem()).year
|
|
95
|
+
: current.year - 100;
|
|
96
|
+
const maxYear = this.maxValue
|
|
97
|
+
? this.calendarService.create(this.maxValue, this._calendarSystem()).year
|
|
98
|
+
: current.year + 10;
|
|
99
|
+
return Array.from({ length: maxYear - minYear + 1 }, (_, i) => ({
|
|
100
|
+
id: minYear + i,
|
|
101
|
+
text: String(minYear + i),
|
|
102
|
+
}));
|
|
103
|
+
}, ...(ngDevMode ? [{ debugName: "_classicYearOptions" }] : []));
|
|
104
|
+
this._classicMonthOptions = computed(() => {
|
|
105
|
+
const calendar = this._classicDate().calendar.name();
|
|
106
|
+
return Array.from({ length: 12 }, (_, i) => ({
|
|
107
|
+
id: i + 1,
|
|
108
|
+
text: `@acorex:dateTime.months.${calendar}.short.${i}`,
|
|
109
|
+
}));
|
|
110
|
+
}, ...(ngDevMode ? [{ debugName: "_classicMonthOptions" }] : []));
|
|
111
|
+
this._classicDayOptions = computed(() => {
|
|
112
|
+
const daysInMonth = this._classicDate().endOf('month').dayOfMonth;
|
|
113
|
+
return Array.from({ length: daysInMonth }, (_, i) => ({
|
|
114
|
+
id: i + 1,
|
|
115
|
+
text: String(i + 1).padStart(2, '0'),
|
|
116
|
+
}));
|
|
117
|
+
}, ...(ngDevMode ? [{ debugName: "_classicDayOptions" }] : []));
|
|
62
118
|
}
|
|
63
119
|
#effect;
|
|
120
|
+
get _classicBoxClass() {
|
|
121
|
+
return `ax-editor-container ax-default ax-classic-datetime-box ax-${this.look}${this.disabled ? ' ax-state-disabled' : ''}`;
|
|
122
|
+
}
|
|
123
|
+
get _classicHasDatePart() {
|
|
124
|
+
const mode = this.picker();
|
|
125
|
+
return mode === 'date' || mode === 'datetime';
|
|
126
|
+
}
|
|
127
|
+
get _classicHasTimePart() {
|
|
128
|
+
const mode = this.picker();
|
|
129
|
+
return mode === 'time' || mode === 'datetime';
|
|
130
|
+
}
|
|
64
131
|
/**
|
|
65
132
|
* @ignore
|
|
66
133
|
*/
|
|
67
|
-
|
|
68
|
-
this.
|
|
134
|
+
_classicPartValue(part) {
|
|
135
|
+
if (!this._editingDateObj())
|
|
136
|
+
return null;
|
|
137
|
+
const date = this._classicDate();
|
|
138
|
+
const values = {
|
|
139
|
+
year: date.year,
|
|
140
|
+
month: date.monthOfYear,
|
|
141
|
+
day: date.dayOfMonth,
|
|
142
|
+
hour: date.hour,
|
|
143
|
+
minute: date.minute,
|
|
144
|
+
};
|
|
145
|
+
const id = values[part];
|
|
146
|
+
return this._classicPartOptions(part).find((option) => option.id === id) ?? { id, text: String(id) };
|
|
147
|
+
}
|
|
148
|
+
/**
|
|
149
|
+
* @ignore
|
|
150
|
+
*/
|
|
151
|
+
_classicPartOptions(part) {
|
|
152
|
+
switch (part) {
|
|
153
|
+
case 'year':
|
|
154
|
+
return this._classicYearOptions();
|
|
155
|
+
case 'month':
|
|
156
|
+
return this._classicMonthOptions();
|
|
157
|
+
case 'day':
|
|
158
|
+
return this._classicDayOptions();
|
|
159
|
+
case 'hour':
|
|
160
|
+
return this._classicTimeOptions.hour;
|
|
161
|
+
case 'minute':
|
|
162
|
+
return this._classicTimeOptions.minute;
|
|
163
|
+
}
|
|
69
164
|
}
|
|
70
165
|
/**
|
|
71
166
|
* @ignore
|
|
@@ -87,7 +182,7 @@ class AXDateTimeBoxComponent extends classes((MXInputBaseValueComponent), MXCale
|
|
|
87
182
|
*/
|
|
88
183
|
_handleOnClosedEvent(e) {
|
|
89
184
|
//this.emitOnBlurEvent(null);
|
|
90
|
-
this.input
|
|
185
|
+
this.input?.focus();
|
|
91
186
|
this.emitOnClosedEvent();
|
|
92
187
|
}
|
|
93
188
|
/**
|
|
@@ -126,7 +221,41 @@ class AXDateTimeBoxComponent extends classes((MXInputBaseValueComponent), MXCale
|
|
|
126
221
|
this._editingDateObj.set(null);
|
|
127
222
|
}
|
|
128
223
|
this.commitValue(this._editingDateObj(), false);
|
|
129
|
-
this.
|
|
224
|
+
if (this.boxLook() !== 'classic') {
|
|
225
|
+
this.close();
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
/**
|
|
229
|
+
* @ignore
|
|
230
|
+
*/
|
|
231
|
+
_handleClassicPartChanged(e, part) {
|
|
232
|
+
if (!e.isUserInteraction)
|
|
233
|
+
return;
|
|
234
|
+
const partValue = this._readSelectValue(e.value);
|
|
235
|
+
if (partValue == null)
|
|
236
|
+
return;
|
|
237
|
+
let date = this._editingDateObj()
|
|
238
|
+
? this.calendarService.create(this._editingDateObj(), this._calendarSystem())
|
|
239
|
+
: this.calendarService.now(this._calendarSystem());
|
|
240
|
+
date = date.set(part, partValue);
|
|
241
|
+
if (part === 'year' || part === 'month') {
|
|
242
|
+
const maxDay = date.endOf('month').dayOfMonth;
|
|
243
|
+
if (date.dayOfMonth > maxDay) {
|
|
244
|
+
date = date.set('day', maxDay);
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
this._editingDateObj.set(date.date);
|
|
248
|
+
this.commitValue(date.date, true);
|
|
249
|
+
}
|
|
250
|
+
/**
|
|
251
|
+
* @ignore
|
|
252
|
+
*/
|
|
253
|
+
_readSelectValue(value) {
|
|
254
|
+
if (Array.isArray(value))
|
|
255
|
+
return value[0]?.id ?? null;
|
|
256
|
+
if (value && typeof value === 'object')
|
|
257
|
+
return value.id ?? null;
|
|
258
|
+
return value != null ? Number(value) : null;
|
|
130
259
|
}
|
|
131
260
|
/**
|
|
132
261
|
* @ignore
|
|
@@ -143,7 +272,7 @@ class AXDateTimeBoxComponent extends classes((MXInputBaseValueComponent), MXCale
|
|
|
143
272
|
return this.name;
|
|
144
273
|
}
|
|
145
274
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDateTimeBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
146
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXDateTimeBoxComponent, isStandalone: true, selector: "ax-datetime-box", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: false, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, holidayDates: { classPropertyName: "holidayDates", publicName: "holidayDates", isSignal: false, isRequired: false, transformFunction: null }, allowTyping: { classPropertyName: "allowTyping", publicName: "allowTyping", isSignal: true, isRequired: false, transformFunction: null }, picker: { classPropertyName: "picker", publicName: "picker", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, weekend: { classPropertyName: "weekend", publicName: "weekend", isSignal: true, isRequired: false, transformFunction: null }, weekdays: { classPropertyName: "weekdays", publicName: "weekdays", isSignal: true, isRequired: false, transformFunction: null }, calendarLook: { classPropertyName: "calendarLook", publicName: "calendarLook", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", onOpened: "onOpened", onClosed: "onClosed", readonlyChange: "readonlyChange", disabledChange: "disabledChange", formatChange: "formatChange" }, host: { attributes: { "ngSkipHydration": "true" }, properties: { "attr.name": "this.__hostName" } }, providers: [
|
|
275
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXDateTimeBoxComponent, isStandalone: true, selector: "ax-datetime-box", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: false, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, holidayDates: { classPropertyName: "holidayDates", publicName: "holidayDates", isSignal: false, isRequired: false, transformFunction: null }, allowTyping: { classPropertyName: "allowTyping", publicName: "allowTyping", isSignal: true, isRequired: false, transformFunction: null }, picker: { classPropertyName: "picker", publicName: "picker", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, weekend: { classPropertyName: "weekend", publicName: "weekend", isSignal: true, isRequired: false, transformFunction: null }, weekdays: { classPropertyName: "weekdays", publicName: "weekdays", isSignal: true, isRequired: false, transformFunction: null }, calendarLook: { classPropertyName: "calendarLook", publicName: "calendarLook", isSignal: true, isRequired: false, transformFunction: null }, boxLook: { classPropertyName: "boxLook", publicName: "boxLook", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", onOpened: "onOpened", onClosed: "onClosed", readonlyChange: "readonlyChange", disabledChange: "disabledChange", formatChange: "formatChange" }, host: { attributes: { "ngSkipHydration": "true" }, properties: { "attr.name": "this.__hostName" } }, providers: [
|
|
147
276
|
{ provide: AXComponent, useExisting: AXDateTimeBoxComponent },
|
|
148
277
|
{ provide: AXFocusableComponent, useExisting: AXDateTimeBoxComponent },
|
|
149
278
|
{ provide: AXValuableComponent, useExisting: AXDateTimeBoxComponent },
|
|
@@ -153,7 +282,7 @@ class AXDateTimeBoxComponent extends classes((MXInputBaseValueComponent), MXCale
|
|
|
153
282
|
useExisting: forwardRef(() => AXDateTimeBoxComponent),
|
|
154
283
|
multi: true,
|
|
155
284
|
},
|
|
156
|
-
], viewQueries: [{ propertyName: "input", first: true, predicate: AXDateTimeInputComponent, descendants: true }, { propertyName: "pickerRef", first: true, predicate: AXDateTimePickerComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-dropdown-box\n
|
|
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]=\"format()\"\n [picker]=\"picker()\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [allowTyping]=\"allowTyping()\"\n [calendar]=\"_calendarSystem()\"\n (onClick)=\"_handleInputOnClick()\"\n (onBlur)=\"_handleInputOnBlurEvent($event)\"\n (onFocus)=\"_handleInputOnFocusEvent($event)\"\n ></ax-datetime-input>\n @if (value && !disabled && !readonly) {\n <ng-content select=\"ax-clear-button\"></ng-content>\n }\n <button type=\"button\" class=\"ax-editor-button\" [tabIndex]=\"-1\" [disabled]=\"disabled\" (click)=\"toggle()\">\n <span class=\"ax-icon ax-icon-calendar\"></span>\n </button>\n <ng-content select=\"ax-suffix\"> </ng-content>\n </ng-container>\n <ng-container panel>\n <ax-datetime-picker\n #pickerRef\n [type]=\"type\"\n [depth]=\"depth\"\n [ngModel]=\"_editingDateObj()\"\n [picker]=\"picker()\"\n [format]=\"format()\"\n id=\"{{ id }}-picker\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [minValue]=\"minValue\"\n [maxValue]=\"maxValue\"\n [weekend]=\"weekend()\"\n [weekdays]=\"weekdays()\"\n [holidayDates]=\"holidayDates\"\n [calendar]=\"_calendarSystem()\"\n [disabledDates]=\"disabledDates\"\n [calendarLook]=\"calendarLook()\"\n (onNavigate)=\"_handleCalendarOnNavigate($event)\"\n (ngModelChange)=\"_handlePickerModelChange($event)\"\n ></ax-datetime-picker>\n </ng-container>\n </ax-dropdown-box>\n}\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: ["ax-datetime-input{display:contents}ax-datetime-box .ax-classic-datetime-box{overflow:visible;height:auto;min-height:var(--ax-comp-editor-height)}ax-datetime-box .ax-classic-datetime-selects{display:flex;flex:1;align-items:center;justify-content:space-between;gap:1rem;min-width:12rem;flex-wrap:wrap;overflow:visible}ax-datetime-box .ax-classic-datetime-group{display:flex;align-items:center;gap:.125rem}ax-datetime-box .ax-classic-datetime-separator{flex:0 0 auto;padding-inline:.125rem;font-size:var(--ax-comp-editor-font-size);line-height:1;color:rgba(var(--ax-comp-editor-text-color));opacity:.6;-webkit-user-select:none;user-select:none;pointer-events:none}ax-datetime-box .ax-classic-datetime-selects ax-select-box{display:inline-block;width:auto;flex:0 0 auto}ax-datetime-box .ax-classic-datetime-selects ax-select-box .ax-editor-button{display:none}ax-datetime-box .ax-classic-datetime-selects ax-select-box .ax-editor-container,ax-datetime-box .ax-classic-datetime-selects ax-select-box ax-dropdown-box.ax-editor-container{gap:0;width:auto;overflow:visible}ax-datetime-box .ax-classic-datetime-selects ax-select-box ax-dropdown-box.ax-editor-container{--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0;justify-content:flex-start}ax-datetime-box .ax-classic-datetime-selects ax-select-box .ax-chips-container{flex:0 0 auto;width:auto}ax-datetime-box .ax-classic-datetime-selects ax-select-box .ax-chips-container .ax-chips{overflow:visible;text-overflow:unset;padding-inline:0}\n"], dependencies: [{ kind: "component", type: AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look", "hasInput", "popoverWidth"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "component", type: AXDateTimeInputComponent, selector: "ax-datetime-input", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "allowTyping", "calendar", "minValue", "maxValue", "picker", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onClick"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXDateTimePickerComponent, selector: "ax-datetime-picker", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation", "weekend", "weekdays", "calendarLook", "currentTimeButton", "calendar", "picker", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onClick", "readonlyChange", "disabledChange", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick"] }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
157
286
|
}
|
|
158
287
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDateTimeBoxComponent, decorators: [{
|
|
159
288
|
type: Component,
|
|
@@ -192,7 +321,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
192
321
|
useExisting: forwardRef(() => AXDateTimeBoxComponent),
|
|
193
322
|
multi: true,
|
|
194
323
|
},
|
|
195
|
-
], host: { ngSkipHydration: 'true' }, imports: [
|
|
324
|
+
], host: { ngSkipHydration: 'true' }, imports: [
|
|
325
|
+
AXDropdownBoxComponent,
|
|
326
|
+
AXDateTimeInputComponent,
|
|
327
|
+
FormsModule,
|
|
328
|
+
AXDateTimePickerComponent,
|
|
329
|
+
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]=\"format()\"\n [picker]=\"picker()\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [allowTyping]=\"allowTyping()\"\n [calendar]=\"_calendarSystem()\"\n (onClick)=\"_handleInputOnClick()\"\n (onBlur)=\"_handleInputOnBlurEvent($event)\"\n (onFocus)=\"_handleInputOnFocusEvent($event)\"\n ></ax-datetime-input>\n @if (value && !disabled && !readonly) {\n <ng-content select=\"ax-clear-button\"></ng-content>\n }\n <button type=\"button\" class=\"ax-editor-button\" [tabIndex]=\"-1\" [disabled]=\"disabled\" (click)=\"toggle()\">\n <span class=\"ax-icon ax-icon-calendar\"></span>\n </button>\n <ng-content select=\"ax-suffix\"> </ng-content>\n </ng-container>\n <ng-container panel>\n <ax-datetime-picker\n #pickerRef\n [type]=\"type\"\n [depth]=\"depth\"\n [ngModel]=\"_editingDateObj()\"\n [picker]=\"picker()\"\n [format]=\"format()\"\n id=\"{{ id }}-picker\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [minValue]=\"minValue\"\n [maxValue]=\"maxValue\"\n [weekend]=\"weekend()\"\n [weekdays]=\"weekdays()\"\n [holidayDates]=\"holidayDates\"\n [calendar]=\"_calendarSystem()\"\n [disabledDates]=\"disabledDates\"\n [calendarLook]=\"calendarLook()\"\n (onNavigate)=\"_handleCalendarOnNavigate($event)\"\n (ngModelChange)=\"_handlePickerModelChange($event)\"\n ></ax-datetime-picker>\n </ng-container>\n </ax-dropdown-box>\n}\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: ["ax-datetime-input{display:contents}ax-datetime-box .ax-classic-datetime-box{overflow:visible;height:auto;min-height:var(--ax-comp-editor-height)}ax-datetime-box .ax-classic-datetime-selects{display:flex;flex:1;align-items:center;justify-content:space-between;gap:1rem;min-width:12rem;flex-wrap:wrap;overflow:visible}ax-datetime-box .ax-classic-datetime-group{display:flex;align-items:center;gap:.125rem}ax-datetime-box .ax-classic-datetime-separator{flex:0 0 auto;padding-inline:.125rem;font-size:var(--ax-comp-editor-font-size);line-height:1;color:rgba(var(--ax-comp-editor-text-color));opacity:.6;-webkit-user-select:none;user-select:none;pointer-events:none}ax-datetime-box .ax-classic-datetime-selects ax-select-box{display:inline-block;width:auto;flex:0 0 auto}ax-datetime-box .ax-classic-datetime-selects ax-select-box .ax-editor-button{display:none}ax-datetime-box .ax-classic-datetime-selects ax-select-box .ax-editor-container,ax-datetime-box .ax-classic-datetime-selects ax-select-box ax-dropdown-box.ax-editor-container{gap:0;width:auto;overflow:visible}ax-datetime-box .ax-classic-datetime-selects ax-select-box ax-dropdown-box.ax-editor-container{--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0;justify-content:flex-start}ax-datetime-box .ax-classic-datetime-selects ax-select-box .ax-chips-container{flex:0 0 auto;width:auto}ax-datetime-box .ax-classic-datetime-selects ax-select-box .ax-chips-container .ax-chips{overflow:visible;text-overflow:unset;padding-inline:0}\n"] }]
|
|
196
331
|
}], propDecorators: { input: [{
|
|
197
332
|
type: ViewChild,
|
|
198
333
|
args: [AXDateTimeInputComponent]
|
|
@@ -226,5 +361,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
226
361
|
* Generated bundle index. Do not edit.
|
|
227
362
|
*/
|
|
228
363
|
|
|
229
|
-
export { AXDateTimeBoxComponent, AXDateTimeBoxModule };
|
|
364
|
+
export { AXDateTimeBoxComponent, AXDateTimeBoxModule, AX_DATETIME_BOX_CLASSIC_DATE_FIELDS, AX_DATETIME_BOX_CLASSIC_TIME_FIELDS };
|
|
230
365
|
//# sourceMappingURL=acorex-components-datetime-box.mjs.map
|