nxt-pick-datetime 14.0.0 → 15.0.0
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/README.md +130 -147
- package/assets/picker.scss +88 -93
- package/esm2020/lib/class/date-time-adapter.class.mjs +8 -8
- package/esm2020/lib/class/date-time-format.class.mjs +2 -2
- package/esm2020/lib/class/date-time.class.mjs +54 -71
- package/esm2020/lib/class/dialog-config.class.mjs +3 -13
- package/esm2020/lib/class/dialog-ref.class.mjs +8 -9
- package/esm2020/lib/date-time/calendar/calendar.component.mjs +85 -90
- package/esm2020/lib/date-time/calendar-body/calendar-body.component.mjs +32 -28
- package/esm2020/lib/date-time/calendar-month-view/calendar-month-view.component.mjs +69 -78
- package/esm2020/lib/date-time/calendar-multi-year-view/calendar-multi-year-view.component.mjs +57 -63
- package/esm2020/lib/date-time/calendar-year-view/calendar-year-view.component.mjs +57 -68
- package/esm2020/lib/date-time/date-time-inline/date-time-inline.component.mjs +68 -78
- package/esm2020/lib/date-time/date-time-picker/date-time-picker.component.mjs +164 -182
- package/esm2020/lib/date-time/date-time-picker-container/date-time-picker-container.animations.mjs +2 -2
- package/esm2020/lib/date-time/date-time-picker-container/date-time-picker-container.component.mjs +106 -114
- package/esm2020/lib/date-time/date-time-picker-input.directive.mjs +185 -203
- package/esm2020/lib/date-time/date-time-picker-intl.service.mjs +5 -5
- package/esm2020/lib/date-time/date-time-picker-trigger.directive.mjs +20 -19
- package/esm2020/lib/date-time/date-time.module.mjs +79 -68
- package/esm2020/lib/date-time/number-fixed-len.pipe.mjs +9 -13
- package/esm2020/lib/date-time/timer/timer.component.mjs +62 -57
- package/esm2020/lib/date-time/timer-box/timer-box.component.mjs +22 -17
- package/esm2020/lib/dialog/dialog-container/dialog-container.component.mjs +44 -49
- package/esm2020/lib/dialog/dialog.module.mjs +26 -16
- package/esm2020/lib/dialog/dialog.service.mjs +52 -49
- package/esm2020/lib/utils/object.mjs +3 -3
- package/esm2020/moment-adapter/date-time-adapter.class.mjs +17 -16
- package/esm2020/moment-adapter/date-time-format.class.mjs +2 -2
- package/esm2020/moment-adapter/moment-adapter.module.mjs +18 -22
- package/esm2020/moment-adapter/nxt-pick-datetime-moment-adapter.mjs +1 -1
- package/esm2020/moment-adapter/public-api.mjs +2 -2
- package/esm2020/native-adapter/date-time-adapter.class.mjs +13 -13
- package/esm2020/native-adapter/date-time-format.class.mjs +2 -2
- package/esm2020/native-adapter/native-adapter.module.mjs +23 -21
- package/esm2020/native-adapter/nxt-pick-datetime-native-adapter.mjs +1 -1
- package/esm2020/native-adapter/public-api.mjs +2 -2
- package/esm2020/nxt-pick-datetime.mjs +1 -1
- package/esm2020/public-api.mjs +14 -14
- package/fesm2015/nxt-pick-datetime-moment-adapter.mjs +32 -35
- package/fesm2015/nxt-pick-datetime-moment-adapter.mjs.map +1 -1
- package/fesm2015/nxt-pick-datetime-native-adapter.mjs +34 -32
- package/fesm2015/nxt-pick-datetime-native-adapter.mjs.map +1 -1
- package/fesm2015/nxt-pick-datetime.mjs +1229 -1247
- package/fesm2015/nxt-pick-datetime.mjs.map +1 -1
- package/fesm2020/nxt-pick-datetime-moment-adapter.mjs +32 -35
- package/fesm2020/nxt-pick-datetime-moment-adapter.mjs.map +1 -1
- package/fesm2020/nxt-pick-datetime-native-adapter.mjs +34 -32
- package/fesm2020/nxt-pick-datetime-native-adapter.mjs.map +1 -1
- package/fesm2020/nxt-pick-datetime.mjs +1159 -1237
- package/fesm2020/nxt-pick-datetime.mjs.map +1 -1
- package/lib/class/date-time-adapter.class.d.ts +31 -31
- package/lib/class/date-time-format.class.d.ts +2 -2
- package/lib/class/date-time.class.d.ts +24 -23
- package/lib/class/dialog-config.class.d.ts +5 -5
- package/lib/class/dialog-ref.class.d.ts +16 -17
- package/lib/date-time/calendar/calendar.component.d.ts +41 -41
- package/lib/date-time/calendar-body/calendar-body.component.d.ts +11 -11
- package/lib/date-time/calendar-month-view/calendar-month-view.component.d.ts +40 -40
- package/lib/date-time/calendar-multi-year-view/calendar-multi-year-view.component.d.ts +38 -38
- package/lib/date-time/calendar-year-view/calendar-year-view.component.d.ts +36 -36
- package/lib/date-time/date-time-inline/date-time-inline.component.d.ts +38 -40
- package/lib/date-time/date-time-picker/date-time-picker.component.d.ts +51 -53
- package/lib/date-time/date-time-picker-container/date-time-picker-container.animations.d.ts +1 -1
- package/lib/date-time/date-time-picker-container/date-time-picker-container.component.d.ts +38 -39
- package/lib/date-time/date-time-picker-input.directive.d.ts +59 -53
- package/lib/date-time/date-time-picker-intl.service.d.ts +3 -3
- package/lib/date-time/date-time-picker-trigger.directive.d.ts +9 -9
- package/lib/date-time/date-time.module.d.ts +4 -4
- package/lib/date-time/number-fixed-len.pipe.d.ts +1 -1
- package/lib/date-time/timer/timer.component.d.ts +22 -22
- package/lib/date-time/timer-box/timer-box.component.d.ts +10 -10
- package/lib/dialog/dialog-container/dialog-container.component.d.ts +28 -24
- package/lib/dialog/dialog.module.d.ts +4 -4
- package/lib/dialog/dialog.service.d.ts +28 -28
- package/moment-adapter/date-time-adapter.class.d.ts +9 -9
- package/moment-adapter/date-time-format.class.d.ts +2 -2
- package/moment-adapter/moment-adapter.module.d.ts +0 -5
- package/moment-adapter/public-api.d.ts +1 -1
- package/native-adapter/date-time-adapter.class.d.ts +6 -6
- package/native-adapter/date-time-format.class.d.ts +2 -2
- package/native-adapter/native-adapter.module.d.ts +0 -5
- package/native-adapter/public-api.d.ts +1 -1
- package/package.json +13 -11
- package/public-api.d.ts +13 -13
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, inject, LOCALE_ID, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, HostBinding,
|
|
3
|
-
import { Subject,
|
|
2
|
+
import { InjectionToken, inject, LOCALE_ID, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, HostBinding, Inject, ViewChild, Injectable, Directive, Pipe, HostListener, forwardRef, Optional, TemplateRef, Injector, SkipSelf, NgModule } from '@angular/core';
|
|
3
|
+
import { Subject, of, merge, defer } from 'rxjs';
|
|
4
4
|
import { coerceNumberProperty, coerceBooleanProperty, coerceArray } from '@angular/cdk/coercion';
|
|
5
5
|
import { ENTER, PAGE_DOWN, PAGE_UP, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW, SPACE, ESCAPE } from '@angular/cdk/keycodes';
|
|
6
6
|
import { take, debounceTime, distinctUntilChanged, filter, concatAll } from 'rxjs/operators';
|
|
7
7
|
import * as i3 from '@angular/common';
|
|
8
|
-
import { DOCUMENT, CommonModule } from '@angular/common';
|
|
8
|
+
import { DOCUMENT, Location, CommonModule } from '@angular/common';
|
|
9
9
|
import * as i4 from '@angular/cdk/a11y';
|
|
10
10
|
import { A11yModule } from '@angular/cdk/a11y';
|
|
11
11
|
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators } from '@angular/forms';
|
|
@@ -16,17 +16,17 @@ import * as i2 from '@angular/cdk/portal';
|
|
|
16
16
|
import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, PortalModule } from '@angular/cdk/portal';
|
|
17
17
|
|
|
18
18
|
/** InjectionToken for date time picker that can be used to override default locale code. */
|
|
19
|
-
const
|
|
19
|
+
const NXT_DATE_TIME_LOCALE = new InjectionToken('NXT_DATE_TIME_LOCALE', {
|
|
20
20
|
providedIn: 'root',
|
|
21
|
-
factory:
|
|
21
|
+
factory: NXT_DATE_TIME_LOCALE_FACTORY
|
|
22
22
|
});
|
|
23
23
|
/** @docs-private */
|
|
24
|
-
function
|
|
24
|
+
function NXT_DATE_TIME_LOCALE_FACTORY() {
|
|
25
25
|
return inject(LOCALE_ID);
|
|
26
26
|
}
|
|
27
|
-
/** Provider for
|
|
28
|
-
const
|
|
29
|
-
provide:
|
|
27
|
+
/** Provider for NXT_DATE_TIME_LOCALE injection token. */
|
|
28
|
+
const NXT_DATE_TIME_LOCALE_PROVIDER = {
|
|
29
|
+
provide: NXT_DATE_TIME_LOCALE,
|
|
30
30
|
useExisting: LOCALE_ID
|
|
31
31
|
};
|
|
32
32
|
class DateTimeAdapter {
|
|
@@ -98,7 +98,7 @@ class DateTimeAdapter {
|
|
|
98
98
|
* to also deserialize the format used by your backend.
|
|
99
99
|
*/
|
|
100
100
|
deserialize(value) {
|
|
101
|
-
if (value == null ||
|
|
101
|
+
if (value == null || value == undefined ||
|
|
102
102
|
(this.isDateInstance(value) && this.isValid(value))) {
|
|
103
103
|
return value;
|
|
104
104
|
}
|
|
@@ -126,7 +126,7 @@ class DateTimeAdapter {
|
|
|
126
126
|
}
|
|
127
127
|
|
|
128
128
|
/** InjectionToken for date time picker that can be used to override default format. */
|
|
129
|
-
const
|
|
129
|
+
const NXT_DATE_TIME_FORMATS = new InjectionToken('NXT_DATE_TIME_FORMATS');
|
|
130
130
|
|
|
131
131
|
class CalendarCell {
|
|
132
132
|
constructor(value, displayValue, ariaLabel, enabled, out = false, cellClass = '') {
|
|
@@ -138,7 +138,18 @@ class CalendarCell {
|
|
|
138
138
|
this.cellClass = cellClass;
|
|
139
139
|
}
|
|
140
140
|
}
|
|
141
|
-
class
|
|
141
|
+
class CalendarBodyComponent {
|
|
142
|
+
get calendarBodyClass() {
|
|
143
|
+
return true;
|
|
144
|
+
}
|
|
145
|
+
get isInSingleMode() {
|
|
146
|
+
return this.selectMode === 'single';
|
|
147
|
+
}
|
|
148
|
+
get isInRangeMode() {
|
|
149
|
+
return (this.selectMode === 'range' ||
|
|
150
|
+
this.selectMode === 'rangeFrom' ||
|
|
151
|
+
this.selectMode === 'rangeTo');
|
|
152
|
+
}
|
|
142
153
|
constructor(elmRef, ngZone) {
|
|
143
154
|
this.elmRef = elmRef;
|
|
144
155
|
this.ngZone = ngZone;
|
|
@@ -159,17 +170,6 @@ class OwlCalendarBodyComponent {
|
|
|
159
170
|
* */
|
|
160
171
|
this.select = new EventEmitter();
|
|
161
172
|
}
|
|
162
|
-
get owlDTCalendarBodyClass() {
|
|
163
|
-
return true;
|
|
164
|
-
}
|
|
165
|
-
get isInSingleMode() {
|
|
166
|
-
return this.selectMode === 'single';
|
|
167
|
-
}
|
|
168
|
-
get isInRangeMode() {
|
|
169
|
-
return (this.selectMode === 'range' ||
|
|
170
|
-
this.selectMode === 'rangeFrom' ||
|
|
171
|
-
this.selectMode === 'rangeTo');
|
|
172
|
-
}
|
|
173
173
|
ngOnInit() { }
|
|
174
174
|
selectCell(cell) {
|
|
175
175
|
this.select.emit(cell);
|
|
@@ -193,39 +193,46 @@ class OwlCalendarBodyComponent {
|
|
|
193
193
|
const toValue = this.selectedValues[1];
|
|
194
194
|
return value === fromValue || value === toValue;
|
|
195
195
|
}
|
|
196
|
+
return false;
|
|
196
197
|
}
|
|
197
198
|
/**
|
|
198
199
|
* Check if the cell in the range
|
|
199
200
|
* */
|
|
200
201
|
isInRange(value) {
|
|
202
|
+
var _a, _b;
|
|
201
203
|
if (this.isInRangeMode) {
|
|
202
|
-
const fromValue = this.selectedValues[0];
|
|
203
|
-
const toValue = this.selectedValues[1];
|
|
204
|
-
if (fromValue !==
|
|
204
|
+
const fromValue = (_a = this.selectedValues) === null || _a === void 0 ? void 0 : _a[0];
|
|
205
|
+
const toValue = (_b = this.selectedValues) === null || _b === void 0 ? void 0 : _b[1];
|
|
206
|
+
if (fromValue !== undefined && toValue !== undefined) {
|
|
205
207
|
return value >= fromValue && value <= toValue;
|
|
206
208
|
}
|
|
207
209
|
else {
|
|
208
210
|
return value === fromValue || value === toValue;
|
|
209
211
|
}
|
|
210
212
|
}
|
|
213
|
+
return false;
|
|
211
214
|
}
|
|
212
215
|
/**
|
|
213
216
|
* Check if the cell is the range from
|
|
214
217
|
* */
|
|
215
218
|
isRangeFrom(value) {
|
|
219
|
+
var _a;
|
|
216
220
|
if (this.isInRangeMode) {
|
|
217
|
-
const fromValue = this.selectedValues[0];
|
|
218
|
-
return fromValue !==
|
|
221
|
+
const fromValue = (_a = this.selectedValues) === null || _a === void 0 ? void 0 : _a[0];
|
|
222
|
+
return fromValue !== undefined && value === fromValue;
|
|
219
223
|
}
|
|
224
|
+
return false;
|
|
220
225
|
}
|
|
221
226
|
/**
|
|
222
227
|
* Check if the cell is the range to
|
|
223
228
|
* */
|
|
224
229
|
isRangeTo(value) {
|
|
230
|
+
var _a;
|
|
225
231
|
if (this.isInRangeMode) {
|
|
226
|
-
const toValue = this.selectedValues[1];
|
|
227
|
-
return toValue !==
|
|
232
|
+
const toValue = (_a = this.selectedValues) === null || _a === void 0 ? void 0 : _a[1];
|
|
233
|
+
return toValue !== undefined && value === toValue;
|
|
228
234
|
}
|
|
235
|
+
return false;
|
|
229
236
|
}
|
|
230
237
|
/**
|
|
231
238
|
* Focus to a active cell
|
|
@@ -236,18 +243,17 @@ class OwlCalendarBodyComponent {
|
|
|
236
243
|
.asObservable()
|
|
237
244
|
.pipe(take(1))
|
|
238
245
|
.subscribe(() => {
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
.focus();
|
|
246
|
+
var _a, _b;
|
|
247
|
+
(_b = (_a = this.elmRef.nativeElement) === null || _a === void 0 ? void 0 : _a.querySelector('.nxt-dt-calendar-cell-active')) === null || _b === void 0 ? void 0 : _b.focus();
|
|
242
248
|
});
|
|
243
249
|
});
|
|
244
250
|
}
|
|
245
251
|
}
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
252
|
+
CalendarBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: CalendarBodyComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
253
|
+
CalendarBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: CalendarBodyComponent, selector: "[nxtDateTimeCalendarBody]", inputs: { activeCell: "activeCell", rows: "rows", numCols: "numCols", cellRatio: "cellRatio", todayValue: "todayValue", selectedValues: "selectedValues", selectMode: "selectMode" }, outputs: { select: "select" }, host: { properties: { "class.nxt-dt-calendar-body": "this.calendarBodyClass" } }, exportAs: ["nxtDateTimeCalendarBody"], ngImport: i0, template: "<tr *ngFor=\"let row of rows; let rowIndex = index\"\n role=\"row\">\n <td *ngFor=\"let item of row; let colIndex = index\"\n class=\"nxt-dt-calendar-cell {{item.cellClass}}\"\n [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n [class.nxt-dt-calendar-cell-active]=\"isActiveCell(rowIndex, colIndex)\"\n [class.nxt-dt-calendar-cell-disabled]=\"!item.enabled\"\n [class.nxt-dt-calendar-cell-in-range]=\"isInRange(item.value)\"\n [class.nxt-dt-calendar-cell-range-from]=\"isRangeFrom(item.value)\"\n [class.nxt-dt-calendar-cell-range-to]=\"isRangeTo(item.value)\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.aria-disabled]=\"!item.enabled || null\"\n [style.width.%]=\"100 / numCols\"\n [style.paddingTop.%]=\"50 * cellRatio / numCols\"\n [style.paddingBottom.%]=\"50 * cellRatio / numCols\"\n (click)=\"selectCell(item)\">\n <span class=\"nxt-dt-calendar-cell-content\"\n [ngClass]=\"{\n 'nxt-dt-calendar-cell-out': item.out,\n 'nxt-dt-calendar-cell-today': item.value === todayValue,\n 'nxt-dt-calendar-cell-selected': isSelected(item.value)\n }\">\n {{item.displayValue}}\n </span>\n </td>\n</tr>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
254
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: CalendarBodyComponent, decorators: [{
|
|
249
255
|
type: Component,
|
|
250
|
-
args: [{ selector: '[
|
|
256
|
+
args: [{ selector: '[nxtDateTimeCalendarBody]', exportAs: 'nxtDateTimeCalendarBody', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<tr *ngFor=\"let row of rows; let rowIndex = index\"\n role=\"row\">\n <td *ngFor=\"let item of row; let colIndex = index\"\n class=\"nxt-dt-calendar-cell {{item.cellClass}}\"\n [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n [class.nxt-dt-calendar-cell-active]=\"isActiveCell(rowIndex, colIndex)\"\n [class.nxt-dt-calendar-cell-disabled]=\"!item.enabled\"\n [class.nxt-dt-calendar-cell-in-range]=\"isInRange(item.value)\"\n [class.nxt-dt-calendar-cell-range-from]=\"isRangeFrom(item.value)\"\n [class.nxt-dt-calendar-cell-range-to]=\"isRangeTo(item.value)\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.aria-disabled]=\"!item.enabled || null\"\n [style.width.%]=\"100 / numCols\"\n [style.paddingTop.%]=\"50 * cellRatio / numCols\"\n [style.paddingBottom.%]=\"50 * cellRatio / numCols\"\n (click)=\"selectCell(item)\">\n <span class=\"nxt-dt-calendar-cell-content\"\n [ngClass]=\"{\n 'nxt-dt-calendar-cell-out': item.out,\n 'nxt-dt-calendar-cell-today': item.value === todayValue,\n 'nxt-dt-calendar-cell-selected': isSelected(item.value)\n }\">\n {{item.displayValue}}\n </span>\n </td>\n</tr>\n" }]
|
|
251
257
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { activeCell: [{
|
|
252
258
|
type: Input
|
|
253
259
|
}], rows: [{
|
|
@@ -264,50 +270,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
264
270
|
type: Input
|
|
265
271
|
}], select: [{
|
|
266
272
|
type: Output
|
|
267
|
-
}],
|
|
273
|
+
}], calendarBodyClass: [{
|
|
268
274
|
type: HostBinding,
|
|
269
|
-
args: ['class.
|
|
275
|
+
args: ['class.nxt-dt-calendar-body']
|
|
270
276
|
}] } });
|
|
271
277
|
|
|
272
278
|
const DAYS_PER_WEEK = 7;
|
|
273
279
|
const WEEKS_PER_VIEW = 6;
|
|
274
|
-
class
|
|
275
|
-
constructor(cdRef, dateTimeAdapter, dateTimeFormats) {
|
|
276
|
-
this.cdRef = cdRef;
|
|
277
|
-
this.dateTimeAdapter = dateTimeAdapter;
|
|
278
|
-
this.dateTimeFormats = dateTimeFormats;
|
|
279
|
-
/**
|
|
280
|
-
* Whether to hide dates in other months at the start or end of the current month.
|
|
281
|
-
* */
|
|
282
|
-
this.hideOtherMonths = false;
|
|
283
|
-
/**
|
|
284
|
-
* Define the first day of a week
|
|
285
|
-
* Sunday: 0 ~ Saturday: 6
|
|
286
|
-
* */
|
|
287
|
-
this._firstDayOfWeek = 0;
|
|
288
|
-
/**
|
|
289
|
-
* The select mode of the picker;
|
|
290
|
-
* */
|
|
291
|
-
this._selectMode = 'single';
|
|
292
|
-
this._selecteds = [];
|
|
293
|
-
this.localeSub = Subscription.EMPTY;
|
|
294
|
-
this.initiated = false;
|
|
295
|
-
/**
|
|
296
|
-
* An array to hold all selectedDates' value
|
|
297
|
-
* the value is the day number in current month
|
|
298
|
-
* */
|
|
299
|
-
this.selectedDates = [];
|
|
300
|
-
/**
|
|
301
|
-
* Callback to invoke when a new date is selected
|
|
302
|
-
* */
|
|
303
|
-
this.selectedChange = new EventEmitter();
|
|
304
|
-
/**
|
|
305
|
-
* Callback to invoke when any date is selected.
|
|
306
|
-
* */
|
|
307
|
-
this.userSelection = new EventEmitter();
|
|
308
|
-
/** Emits when any date is activated. */
|
|
309
|
-
this.pickerMomentChange = new EventEmitter();
|
|
310
|
-
}
|
|
280
|
+
class MonthViewComponent {
|
|
311
281
|
get firstDayOfWeek() {
|
|
312
282
|
return this._firstDayOfWeek;
|
|
313
283
|
}
|
|
@@ -344,7 +314,7 @@ class OwlMonthViewComponent {
|
|
|
344
314
|
}
|
|
345
315
|
}
|
|
346
316
|
get selecteds() {
|
|
347
|
-
return this._selecteds;
|
|
317
|
+
return this._selecteds || [];
|
|
348
318
|
}
|
|
349
319
|
set selecteds(values) {
|
|
350
320
|
this._selecteds = values.map(v => {
|
|
@@ -377,10 +347,10 @@ class OwlMonthViewComponent {
|
|
|
377
347
|
this.cdRef.markForCheck();
|
|
378
348
|
}
|
|
379
349
|
}
|
|
380
|
-
get
|
|
350
|
+
get min() {
|
|
381
351
|
return this._minDate;
|
|
382
352
|
}
|
|
383
|
-
set
|
|
353
|
+
set min(value) {
|
|
384
354
|
value = this.dateTimeAdapter.deserialize(value);
|
|
385
355
|
this._minDate = this.getValidDate(value);
|
|
386
356
|
if (this.initiated) {
|
|
@@ -388,10 +358,10 @@ class OwlMonthViewComponent {
|
|
|
388
358
|
this.cdRef.markForCheck();
|
|
389
359
|
}
|
|
390
360
|
}
|
|
391
|
-
get
|
|
361
|
+
get max() {
|
|
392
362
|
return this._maxDate;
|
|
393
363
|
}
|
|
394
|
-
set
|
|
364
|
+
set max(value) {
|
|
395
365
|
value = this.dateTimeAdapter.deserialize(value);
|
|
396
366
|
this._maxDate = this.getValidDate(value);
|
|
397
367
|
if (this.initiated) {
|
|
@@ -411,6 +381,7 @@ class OwlMonthViewComponent {
|
|
|
411
381
|
this.firstRowOffset -
|
|
412
382
|
1);
|
|
413
383
|
}
|
|
384
|
+
return;
|
|
414
385
|
}
|
|
415
386
|
get isInSingleMode() {
|
|
416
387
|
return this.selectMode === 'single';
|
|
@@ -420,9 +391,41 @@ class OwlMonthViewComponent {
|
|
|
420
391
|
this.selectMode === 'rangeFrom' ||
|
|
421
392
|
this.selectMode === 'rangeTo');
|
|
422
393
|
}
|
|
423
|
-
get
|
|
394
|
+
get calendarView() {
|
|
424
395
|
return true;
|
|
425
396
|
}
|
|
397
|
+
constructor(cdRef, dateTimeAdapter, dateTimeFormats) {
|
|
398
|
+
this.cdRef = cdRef;
|
|
399
|
+
this.dateTimeAdapter = dateTimeAdapter;
|
|
400
|
+
this.dateTimeFormats = dateTimeFormats;
|
|
401
|
+
/**
|
|
402
|
+
* Whether to hide dates in other months at the start or end of the current month.
|
|
403
|
+
* */
|
|
404
|
+
this.hideOtherMonths = false;
|
|
405
|
+
/**
|
|
406
|
+
* Define the first day of a week
|
|
407
|
+
* Sunday: 0 ~ Saturday: 6
|
|
408
|
+
* */
|
|
409
|
+
this._firstDayOfWeek = 0;
|
|
410
|
+
/**
|
|
411
|
+
* The select mode of the picker;
|
|
412
|
+
* */
|
|
413
|
+
this._selectMode = 'single';
|
|
414
|
+
this._selecteds = new Array();
|
|
415
|
+
this.initiated = false;
|
|
416
|
+
// the index of cell that contains the first date of the month
|
|
417
|
+
this.firstRowOffset = 0;
|
|
418
|
+
/**
|
|
419
|
+
* Callback to invoke when a new date is selected
|
|
420
|
+
* */
|
|
421
|
+
this.selectedChange = new EventEmitter();
|
|
422
|
+
/**
|
|
423
|
+
* Callback to invoke when any date is selected.
|
|
424
|
+
* */
|
|
425
|
+
this.userSelection = new EventEmitter();
|
|
426
|
+
/** Emits when any date is activated. */
|
|
427
|
+
this.pickerMomentChange = new EventEmitter();
|
|
428
|
+
}
|
|
426
429
|
ngOnInit() {
|
|
427
430
|
this.generateWeekDays();
|
|
428
431
|
this.localeSub = this.dateTimeAdapter.localeChanges.subscribe(() => {
|
|
@@ -436,7 +439,9 @@ class OwlMonthViewComponent {
|
|
|
436
439
|
this.initiated = true;
|
|
437
440
|
}
|
|
438
441
|
ngOnDestroy() {
|
|
439
|
-
|
|
442
|
+
var _a;
|
|
443
|
+
(_a = this.localeSub) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
|
444
|
+
this.localeSub = undefined;
|
|
440
445
|
}
|
|
441
446
|
/**
|
|
442
447
|
* Handle a calendarCell selected
|
|
@@ -543,7 +548,7 @@ class OwlMonthViewComponent {
|
|
|
543
548
|
if (!this.pickerMoment) {
|
|
544
549
|
return;
|
|
545
550
|
}
|
|
546
|
-
this.todayDate =
|
|
551
|
+
this.todayDate = undefined;
|
|
547
552
|
// the first weekday of the month
|
|
548
553
|
const startWeekdayOfMonth = this.dateTimeAdapter.getDay(this.firstDateOfMonth);
|
|
549
554
|
const firstDayOfWeek = this.firstDayOfWeek;
|
|
@@ -586,7 +591,7 @@ class OwlMonthViewComponent {
|
|
|
586
591
|
// check if date is not in current month
|
|
587
592
|
const dayValue = daysDiff + 1;
|
|
588
593
|
const out = dayValue < 1 || dayValue > daysInMonth;
|
|
589
|
-
const cellClass = '
|
|
594
|
+
const cellClass = 'nxt-dt-day-' + this.dateTimeAdapter.getDay(date);
|
|
590
595
|
return new CalendarCell(dayValue, dateName, ariaLabel, enabled, out, cellClass);
|
|
591
596
|
}
|
|
592
597
|
/**
|
|
@@ -595,10 +600,10 @@ class OwlMonthViewComponent {
|
|
|
595
600
|
isDateEnabled(date) {
|
|
596
601
|
return (!!date &&
|
|
597
602
|
(!this.dateFilter || this.dateFilter(date, 'date')) &&
|
|
598
|
-
(!this.
|
|
599
|
-
this.dateTimeAdapter.compare(date, this.
|
|
600
|
-
(!this.
|
|
601
|
-
this.dateTimeAdapter.compare(date, this.
|
|
603
|
+
(!this.min ||
|
|
604
|
+
this.dateTimeAdapter.compare(date, this.min) >= 0) &&
|
|
605
|
+
(!this.max ||
|
|
606
|
+
this.dateTimeAdapter.compare(date, this.max) <= 0));
|
|
602
607
|
}
|
|
603
608
|
/**
|
|
604
609
|
* Get a valid date object
|
|
@@ -607,10 +612,10 @@ class OwlMonthViewComponent {
|
|
|
607
612
|
return this.dateTimeAdapter.isDateInstance(obj) &&
|
|
608
613
|
this.dateTimeAdapter.isValid(obj)
|
|
609
614
|
? obj
|
|
610
|
-
:
|
|
615
|
+
: undefined;
|
|
611
616
|
}
|
|
612
617
|
/**
|
|
613
|
-
* Check if the give dates are
|
|
618
|
+
* Check if the give dates are defined and in the same month
|
|
614
619
|
*/
|
|
615
620
|
isSameMonth(dateLeft, dateRight) {
|
|
616
621
|
return !!(dateLeft &&
|
|
@@ -628,44 +633,41 @@ class OwlMonthViewComponent {
|
|
|
628
633
|
* In range mode, it would has two values, one for the fromValue and the other for the toValue
|
|
629
634
|
* */
|
|
630
635
|
setSelectedDates() {
|
|
636
|
+
var _a;
|
|
631
637
|
this.selectedDates = [];
|
|
632
638
|
if (!this.firstDateOfMonth) {
|
|
633
639
|
return;
|
|
634
640
|
}
|
|
635
641
|
if (this.isInSingleMode && this.selected) {
|
|
636
|
-
const dayDiff = this.dateTimeAdapter.differenceInCalendarDays(this.selected, this.firstDateOfMonth);
|
|
642
|
+
const dayDiff = (_a = this.dateTimeAdapter.differenceInCalendarDays(this.selected, this.firstDateOfMonth)) !== null && _a !== void 0 ? _a : 0;
|
|
637
643
|
this.selectedDates[0] = dayDiff + 1;
|
|
638
644
|
return;
|
|
639
645
|
}
|
|
640
646
|
if (this.isInRangeMode && this.selecteds) {
|
|
641
647
|
this.selectedDates = this.selecteds.map(selected => {
|
|
648
|
+
var _a;
|
|
642
649
|
if (this.dateTimeAdapter.isValid(selected)) {
|
|
643
|
-
const dayDiff = this.dateTimeAdapter.differenceInCalendarDays(selected, this.firstDateOfMonth);
|
|
650
|
+
const dayDiff = (_a = this.dateTimeAdapter.differenceInCalendarDays(selected, this.firstDateOfMonth)) !== null && _a !== void 0 ? _a : 0;
|
|
644
651
|
return dayDiff + 1;
|
|
645
652
|
}
|
|
646
|
-
|
|
647
|
-
return null;
|
|
648
|
-
}
|
|
653
|
+
return;
|
|
649
654
|
});
|
|
650
655
|
}
|
|
651
656
|
}
|
|
652
657
|
focusActiveCell() {
|
|
653
|
-
|
|
658
|
+
var _a;
|
|
659
|
+
(_a = this.calendarBodyElm) === null || _a === void 0 ? void 0 : _a.focusActiveCell();
|
|
654
660
|
}
|
|
655
661
|
}
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
662
|
+
MonthViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: MonthViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DateTimeAdapter }, { token: NXT_DATE_TIME_FORMATS }], target: i0.ɵɵFactoryTarget.Component });
|
|
663
|
+
MonthViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: MonthViewComponent, selector: "nxt-date-time-month-view", inputs: { hideOtherMonths: "hideOtherMonths", firstDayOfWeek: "firstDayOfWeek", selectMode: "selectMode", selected: "selected", selecteds: "selecteds", pickerMoment: "pickerMoment", dateFilter: "dateFilter", min: "min", max: "max" }, outputs: { selectedChange: "selectedChange", userSelection: "userSelection", pickerMomentChange: "pickerMomentChange" }, host: { properties: { "class.nxt-dt-calendar-view": "this.calendarView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: CalendarBodyComponent, descendants: true, static: true }], ngImport: i0, template: "<table class=\"nxt-dt-calendar-table nxt-dt-calendar-month-table\"\n [class.nxt-dt-calendar-only-current-month]=\"hideOtherMonths\">\n <thead class=\"nxt-dt-calendar-header\">\n <tr class=\"nxt-dt-weekdays\">\n <th *ngFor=\"let weekday of weekdays\"\n [attr.aria-label]=\"weekday.long\"\n class=\"nxt-dt-weekday\"\n scope=\"col\">\n <span>{{weekday.short}}</span>\n </th>\n </tr>\n <tr>\n <th class=\"nxt-dt-calendar-table-divider\"\n aria-hidden=\"true\"\n colspan=\"7\"></th>\n </tr>\n </thead>\n <tbody nxtDateTimeCalendarBody\n role=\"grid\"\n [rows]=\"days\"\n [todayValue]=\"todayDate ?? undefined\"\n [selectedValues]=\"selectedDates\"\n [selectMode]=\"selectMode\"\n [activeCell]=\"activeCell ?? 0\"\n (keydown)=\"handleCalendarKeydown($event)\"\n (select)=\"selectCalendarCell($event)\">\n </tbody>\n</table>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CalendarBodyComponent, selector: "[nxtDateTimeCalendarBody]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["select"], exportAs: ["nxtDateTimeCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
664
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: MonthViewComponent, decorators: [{
|
|
659
665
|
type: Component,
|
|
660
|
-
args: [{ selector: '
|
|
666
|
+
args: [{ selector: 'nxt-date-time-month-view', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"nxt-dt-calendar-table nxt-dt-calendar-month-table\"\n [class.nxt-dt-calendar-only-current-month]=\"hideOtherMonths\">\n <thead class=\"nxt-dt-calendar-header\">\n <tr class=\"nxt-dt-weekdays\">\n <th *ngFor=\"let weekday of weekdays\"\n [attr.aria-label]=\"weekday.long\"\n class=\"nxt-dt-weekday\"\n scope=\"col\">\n <span>{{weekday.short}}</span>\n </th>\n </tr>\n <tr>\n <th class=\"nxt-dt-calendar-table-divider\"\n aria-hidden=\"true\"\n colspan=\"7\"></th>\n </tr>\n </thead>\n <tbody nxtDateTimeCalendarBody\n role=\"grid\"\n [rows]=\"days\"\n [todayValue]=\"todayDate ?? undefined\"\n [selectedValues]=\"selectedDates\"\n [selectMode]=\"selectMode\"\n [activeCell]=\"activeCell ?? 0\"\n (keydown)=\"handleCalendarKeydown($event)\"\n (select)=\"selectCalendarCell($event)\">\n </tbody>\n</table>\n" }]
|
|
661
667
|
}], ctorParameters: function () {
|
|
662
|
-
return [{ type: i0.ChangeDetectorRef }, { type: DateTimeAdapter, decorators: [{
|
|
663
|
-
type: Optional
|
|
664
|
-
}] }, { type: undefined, decorators: [{
|
|
665
|
-
type: Optional
|
|
666
|
-
}, {
|
|
668
|
+
return [{ type: i0.ChangeDetectorRef }, { type: DateTimeAdapter }, { type: undefined, decorators: [{
|
|
667
669
|
type: Inject,
|
|
668
|
-
args: [
|
|
670
|
+
args: [NXT_DATE_TIME_FORMATS]
|
|
669
671
|
}] }];
|
|
670
672
|
}, propDecorators: { hideOtherMonths: [{
|
|
671
673
|
type: Input
|
|
@@ -681,9 +683,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
681
683
|
type: Input
|
|
682
684
|
}], dateFilter: [{
|
|
683
685
|
type: Input
|
|
684
|
-
}],
|
|
686
|
+
}], min: [{
|
|
685
687
|
type: Input
|
|
686
|
-
}],
|
|
688
|
+
}], max: [{
|
|
687
689
|
type: Input
|
|
688
690
|
}], selectedChange: [{
|
|
689
691
|
type: Output
|
|
@@ -693,13 +695,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
693
695
|
type: Output
|
|
694
696
|
}], calendarBodyElm: [{
|
|
695
697
|
type: ViewChild,
|
|
696
|
-
args: [
|
|
697
|
-
}],
|
|
698
|
+
args: [CalendarBodyComponent, { static: true }]
|
|
699
|
+
}], calendarView: [{
|
|
698
700
|
type: HostBinding,
|
|
699
|
-
args: ['class.
|
|
701
|
+
args: ['class.nxt-dt-calendar-view']
|
|
700
702
|
}] } });
|
|
701
703
|
|
|
702
|
-
class
|
|
704
|
+
class DateTimeIntl {
|
|
703
705
|
constructor() {
|
|
704
706
|
/**
|
|
705
707
|
* Stream that emits whenever the labels here are changed. Use this to notify
|
|
@@ -748,9 +750,9 @@ class OwlDateTimeIntl {
|
|
|
748
750
|
this.hour12PMLabel = $localize `:@@nxt-pick-datetime.time-pm:PM`;
|
|
749
751
|
}
|
|
750
752
|
}
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
753
|
+
DateTimeIntl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: DateTimeIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
754
|
+
DateTimeIntl.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: DateTimeIntl, providedIn: 'root' });
|
|
755
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: DateTimeIntl, decorators: [{
|
|
754
756
|
type: Injectable,
|
|
755
757
|
args: [{
|
|
756
758
|
providedIn: 'root'
|
|
@@ -759,31 +761,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
759
761
|
|
|
760
762
|
const YEARS_PER_ROW = 3;
|
|
761
763
|
const YEAR_ROWS = 7;
|
|
762
|
-
class
|
|
763
|
-
constructor(cdRef, pickerIntl, dateTimeAdapter) {
|
|
764
|
-
this.cdRef = cdRef;
|
|
765
|
-
this.pickerIntl = pickerIntl;
|
|
766
|
-
this.dateTimeAdapter = dateTimeAdapter;
|
|
767
|
-
/**
|
|
768
|
-
* The select mode of the picker;
|
|
769
|
-
* */
|
|
770
|
-
this._selectMode = 'single';
|
|
771
|
-
this._selecteds = [];
|
|
772
|
-
this.initiated = false;
|
|
773
|
-
/**
|
|
774
|
-
* Callback to invoke when a new month is selected
|
|
775
|
-
* */
|
|
776
|
-
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
777
|
-
this.change = new EventEmitter();
|
|
778
|
-
/**
|
|
779
|
-
* Emits the selected year. This doesn't imply a change on the selected date
|
|
780
|
-
* */
|
|
781
|
-
this.yearSelected = new EventEmitter();
|
|
782
|
-
/** Emits when any date is activated. */
|
|
783
|
-
this.pickerMomentChange = new EventEmitter();
|
|
784
|
-
/** Emits when use keyboard enter to select a calendar cell */
|
|
785
|
-
this.keyboardEnter = new EventEmitter();
|
|
786
|
-
}
|
|
764
|
+
class MultiYearViewComponent {
|
|
787
765
|
get selectMode() {
|
|
788
766
|
return this._selectMode;
|
|
789
767
|
}
|
|
@@ -836,20 +814,20 @@ class OwlMultiYearViewComponent {
|
|
|
836
814
|
this.generateYearList();
|
|
837
815
|
}
|
|
838
816
|
}
|
|
839
|
-
get
|
|
817
|
+
get min() {
|
|
840
818
|
return this._minDate;
|
|
841
819
|
}
|
|
842
|
-
set
|
|
820
|
+
set min(value) {
|
|
843
821
|
value = this.dateTimeAdapter.deserialize(value);
|
|
844
822
|
this._minDate = this.getValidDate(value);
|
|
845
823
|
if (this.initiated) {
|
|
846
824
|
this.generateYearList();
|
|
847
825
|
}
|
|
848
826
|
}
|
|
849
|
-
get
|
|
827
|
+
get max() {
|
|
850
828
|
return this._maxDate;
|
|
851
829
|
}
|
|
852
|
-
set
|
|
830
|
+
set max(value) {
|
|
853
831
|
value = this.dateTimeAdapter.deserialize(value);
|
|
854
832
|
this._maxDate = this.getValidDate(value);
|
|
855
833
|
if (this.initiated) {
|
|
@@ -876,11 +854,13 @@ class OwlMultiYearViewComponent {
|
|
|
876
854
|
if (this._pickerMoment) {
|
|
877
855
|
return this.dateTimeAdapter.getYear(this._pickerMoment) % (YEARS_PER_ROW * YEAR_ROWS);
|
|
878
856
|
}
|
|
857
|
+
return;
|
|
879
858
|
}
|
|
880
859
|
get tableHeader() {
|
|
881
860
|
if (this._years && this._years.length > 0) {
|
|
882
861
|
return `${this._years[0][0].displayValue} ~ ${this._years[YEAR_ROWS - 1][YEARS_PER_ROW - 1].displayValue}`;
|
|
883
862
|
}
|
|
863
|
+
return;
|
|
884
864
|
}
|
|
885
865
|
get prevButtonLabel() {
|
|
886
866
|
return this.pickerIntl.prevMultiYearLabel;
|
|
@@ -888,12 +868,36 @@ class OwlMultiYearViewComponent {
|
|
|
888
868
|
get nextButtonLabel() {
|
|
889
869
|
return this.pickerIntl.nextMultiYearLabel;
|
|
890
870
|
}
|
|
891
|
-
get
|
|
871
|
+
get calendarView() {
|
|
892
872
|
return true;
|
|
893
873
|
}
|
|
894
|
-
get
|
|
874
|
+
get calendarMultiYearView() {
|
|
895
875
|
return true;
|
|
896
876
|
}
|
|
877
|
+
constructor(cdRef, pickerIntl, dateTimeAdapter) {
|
|
878
|
+
this.cdRef = cdRef;
|
|
879
|
+
this.pickerIntl = pickerIntl;
|
|
880
|
+
this.dateTimeAdapter = dateTimeAdapter;
|
|
881
|
+
/**
|
|
882
|
+
* The select mode of the picker;
|
|
883
|
+
* */
|
|
884
|
+
this._selectMode = 'single';
|
|
885
|
+
this._selecteds = new Array();
|
|
886
|
+
this.initiated = false;
|
|
887
|
+
/**
|
|
888
|
+
* Callback to invoke when a new month is selected
|
|
889
|
+
* */
|
|
890
|
+
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
891
|
+
this.change = new EventEmitter();
|
|
892
|
+
/**
|
|
893
|
+
* Emits the selected year. This doesn't imply a change on the selected date
|
|
894
|
+
* */
|
|
895
|
+
this.yearSelected = new EventEmitter();
|
|
896
|
+
/** Emits when any date is activated. */
|
|
897
|
+
this.pickerMomentChange = new EventEmitter();
|
|
898
|
+
/** Emits when use keyboard enter to select a calendar cell */
|
|
899
|
+
this.keyboardEnter = new EventEmitter();
|
|
900
|
+
}
|
|
897
901
|
ngOnInit() {
|
|
898
902
|
}
|
|
899
903
|
ngAfterContentInit() {
|
|
@@ -947,14 +951,14 @@ class OwlMultiYearViewComponent {
|
|
|
947
951
|
}
|
|
948
952
|
/** Whether the previous period button is enabled. */
|
|
949
953
|
previousEnabled() {
|
|
950
|
-
if (!this.
|
|
954
|
+
if (!this.min) {
|
|
951
955
|
return true;
|
|
952
956
|
}
|
|
953
|
-
return !this.
|
|
957
|
+
return !this.min || !this.isSameYearList(this._pickerMoment, this.min);
|
|
954
958
|
}
|
|
955
959
|
/** Whether the next period button is enabled. */
|
|
956
960
|
nextEnabled() {
|
|
957
|
-
return !this.
|
|
961
|
+
return !this.max || !this.isSameYearList(this._pickerMoment, this.max);
|
|
958
962
|
}
|
|
959
963
|
handleCalendarKeydown(event) {
|
|
960
964
|
let moment;
|
|
@@ -1015,7 +1019,7 @@ class OwlMultiYearViewComponent {
|
|
|
1015
1019
|
createYearCell(year) {
|
|
1016
1020
|
const startDateOfYear = this.dateTimeAdapter.createDate(year, 0, 1);
|
|
1017
1021
|
const ariaLabel = this.dateTimeAdapter.getYearName(startDateOfYear);
|
|
1018
|
-
const cellClass = '
|
|
1022
|
+
const cellClass = 'nxt-dt-year-' + year;
|
|
1019
1023
|
return new CalendarCell(year, year.toString(), ariaLabel, this.isYearEnabled(year), false, cellClass);
|
|
1020
1024
|
}
|
|
1021
1025
|
setSelectedYears() {
|
|
@@ -1028,20 +1032,12 @@ class OwlMultiYearViewComponent {
|
|
|
1028
1032
|
if (this.dateTimeAdapter.isValid(selected)) {
|
|
1029
1033
|
return this.dateTimeAdapter.getYear(selected);
|
|
1030
1034
|
}
|
|
1031
|
-
|
|
1032
|
-
return null;
|
|
1033
|
-
}
|
|
1035
|
+
return;
|
|
1034
1036
|
});
|
|
1035
1037
|
}
|
|
1036
1038
|
}
|
|
1037
1039
|
/** Whether the given year is enabled. */
|
|
1038
1040
|
isYearEnabled(year) {
|
|
1039
|
-
// disable if the year is greater than maxDate lower than minDate
|
|
1040
|
-
if (year === undefined || year === null ||
|
|
1041
|
-
(this.maxDate && year > this.dateTimeAdapter.getYear(this.maxDate)) ||
|
|
1042
|
-
(this.minDate && year < this.dateTimeAdapter.getYear(this.minDate))) {
|
|
1043
|
-
return false;
|
|
1044
|
-
}
|
|
1045
1041
|
// enable if it reaches here and there's no filter defined
|
|
1046
1042
|
if (!this.dateFilter) {
|
|
1047
1043
|
return true;
|
|
@@ -1063,22 +1059,21 @@ class OwlMultiYearViewComponent {
|
|
|
1063
1059
|
* Get a valid date object
|
|
1064
1060
|
*/
|
|
1065
1061
|
getValidDate(obj) {
|
|
1066
|
-
return (this.dateTimeAdapter.isDateInstance(obj) && this.dateTimeAdapter.isValid(obj))
|
|
1062
|
+
return (this.dateTimeAdapter.isDateInstance(obj) && this.dateTimeAdapter.isValid(obj))
|
|
1063
|
+
? obj
|
|
1064
|
+
: undefined;
|
|
1067
1065
|
}
|
|
1068
1066
|
focusActiveCell() {
|
|
1069
|
-
|
|
1067
|
+
var _a;
|
|
1068
|
+
(_a = this.calendarBodyElm) === null || _a === void 0 ? void 0 : _a.focusActiveCell();
|
|
1070
1069
|
}
|
|
1071
1070
|
}
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1071
|
+
MultiYearViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: MultiYearViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DateTimeIntl }, { token: DateTimeAdapter }], target: i0.ɵɵFactoryTarget.Component });
|
|
1072
|
+
MultiYearViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: MultiYearViewComponent, selector: "nxt-date-time-multi-year-view", inputs: { selectMode: "selectMode", selected: "selected", selecteds: "selecteds", pickerMoment: "pickerMoment", dateFilter: "dateFilter", min: "min", max: "max" }, outputs: { change: "change", yearSelected: "yearSelected", pickerMomentChange: "pickerMomentChange", keyboardEnter: "keyboardEnter" }, host: { properties: { "class.nxt-dt-calendar-view": "this.calendarView", "class.nxt-dt-calendar-multi-year-view": "this.calendarMultiYearView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: CalendarBodyComponent, descendants: true, static: true }], ngImport: i0, template: "<button class=\"nxt-dt-control-button nxt-dt-control-arrow-button\"\n [disabled]=\"!previousEnabled()\"\n [attr.aria-label]=\"prevButtonLabel\"\n type=\"button\"\n tabindex=\"0\"\n (click)=\"prevYearList($event)\">\n <span class=\"nxt-dt-control-button-content\"\n tabindex=\"-1\">\n <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n version=\"1.1\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 250.738 250.738\"\n style=\"enable-background:new 0 0 250.738 250.738;\"\n xml:space=\"preserve\"\n width=\"100%\"\n height=\"100%\">\n <path style=\"fill-rule: evenodd; clip-rule: evenodd;\"\n d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546 c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681 l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\" />\n </svg>\n <!-- </editor-fold> -->\n </span>\n</button>\n<table class=\"nxt-dt-calendar-table nxt-dt-calendar-multi-year-table\">\n <thead class=\"nxt-dt-calendar-header\">\n <tr>\n <th colspan=\"3\">{{tableHeader}}</th>\n </tr>\n </thead>\n <tbody nxtDateTimeCalendarBody\n role=\"grid\"\n [rows]=\"years\"\n [numCols]=\"3\"\n [cellRatio]=\"3 / 7\"\n [activeCell]=\"activeCell ?? 0\"\n [todayValue]=\"todayYear\"\n [selectedValues]=\"selectedYears\"\n [selectMode]=\"selectMode\"\n (keydown)=\"handleCalendarKeydown($event)\"\n (select)=\"selectCalendarCell($event)\"></tbody>\n</table>\n<button class=\"nxt-dt-control-button nxt-dt-control-arrow-button\"\n [disabled]=\"!nextEnabled()\"\n [attr.aria-label]=\"nextButtonLabel\"\n type=\"button\"\n tabindex=\"0\"\n (click)=\"nextYearList($event)\">\n <span class=\"nxt-dt-control-button-content\"\n tabindex=\"-1\">\n <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\n <svg version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 250.738 250.738\"\n style=\"enable-background:new 0 0 250.738 250.738;\"\n xml:space=\"preserve\">\n <path style=\"fill-rule:evenodd;clip-rule:evenodd;\"\n d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\n c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\n c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\n C197.237,120.447,195.534,115.448,191.75,111.689z\" />\n </svg>\n <!-- </editor-fold> -->\n </span>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: CalendarBodyComponent, selector: "[nxtDateTimeCalendarBody]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["select"], exportAs: ["nxtDateTimeCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1073
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: MultiYearViewComponent, decorators: [{
|
|
1075
1074
|
type: Component,
|
|
1076
|
-
args: [{ selector: '
|
|
1077
|
-
}], ctorParameters: function () {
|
|
1078
|
-
return [{ type: i0.ChangeDetectorRef }, { type: OwlDateTimeIntl }, { type: DateTimeAdapter, decorators: [{
|
|
1079
|
-
type: Optional
|
|
1080
|
-
}] }];
|
|
1081
|
-
}, propDecorators: { selectMode: [{
|
|
1075
|
+
args: [{ selector: 'nxt-date-time-multi-year-view', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"nxt-dt-control-button nxt-dt-control-arrow-button\"\n [disabled]=\"!previousEnabled()\"\n [attr.aria-label]=\"prevButtonLabel\"\n type=\"button\"\n tabindex=\"0\"\n (click)=\"prevYearList($event)\">\n <span class=\"nxt-dt-control-button-content\"\n tabindex=\"-1\">\n <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n version=\"1.1\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 250.738 250.738\"\n style=\"enable-background:new 0 0 250.738 250.738;\"\n xml:space=\"preserve\"\n width=\"100%\"\n height=\"100%\">\n <path style=\"fill-rule: evenodd; clip-rule: evenodd;\"\n d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546 c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681 l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\" />\n </svg>\n <!-- </editor-fold> -->\n </span>\n</button>\n<table class=\"nxt-dt-calendar-table nxt-dt-calendar-multi-year-table\">\n <thead class=\"nxt-dt-calendar-header\">\n <tr>\n <th colspan=\"3\">{{tableHeader}}</th>\n </tr>\n </thead>\n <tbody nxtDateTimeCalendarBody\n role=\"grid\"\n [rows]=\"years\"\n [numCols]=\"3\"\n [cellRatio]=\"3 / 7\"\n [activeCell]=\"activeCell ?? 0\"\n [todayValue]=\"todayYear\"\n [selectedValues]=\"selectedYears\"\n [selectMode]=\"selectMode\"\n (keydown)=\"handleCalendarKeydown($event)\"\n (select)=\"selectCalendarCell($event)\"></tbody>\n</table>\n<button class=\"nxt-dt-control-button nxt-dt-control-arrow-button\"\n [disabled]=\"!nextEnabled()\"\n [attr.aria-label]=\"nextButtonLabel\"\n type=\"button\"\n tabindex=\"0\"\n (click)=\"nextYearList($event)\">\n <span class=\"nxt-dt-control-button-content\"\n tabindex=\"-1\">\n <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\n <svg version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 250.738 250.738\"\n style=\"enable-background:new 0 0 250.738 250.738;\"\n xml:space=\"preserve\">\n <path style=\"fill-rule:evenodd;clip-rule:evenodd;\"\n d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\n c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\n c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\n C197.237,120.447,195.534,115.448,191.75,111.689z\" />\n </svg>\n <!-- </editor-fold> -->\n </span>\n</button>\n" }]
|
|
1076
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: DateTimeIntl }, { type: DateTimeAdapter }]; }, propDecorators: { selectMode: [{
|
|
1082
1077
|
type: Input
|
|
1083
1078
|
}], selected: [{
|
|
1084
1079
|
type: Input
|
|
@@ -1088,9 +1083,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
1088
1083
|
type: Input
|
|
1089
1084
|
}], dateFilter: [{
|
|
1090
1085
|
type: Input
|
|
1091
|
-
}],
|
|
1086
|
+
}], min: [{
|
|
1092
1087
|
type: Input
|
|
1093
|
-
}],
|
|
1088
|
+
}], max: [{
|
|
1094
1089
|
type: Input
|
|
1095
1090
|
}], change: [{
|
|
1096
1091
|
type: Output
|
|
@@ -1102,48 +1097,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
1102
1097
|
type: Output
|
|
1103
1098
|
}], calendarBodyElm: [{
|
|
1104
1099
|
type: ViewChild,
|
|
1105
|
-
args: [
|
|
1106
|
-
}],
|
|
1100
|
+
args: [CalendarBodyComponent, { static: true }]
|
|
1101
|
+
}], calendarView: [{
|
|
1107
1102
|
type: HostBinding,
|
|
1108
|
-
args: ['class.
|
|
1109
|
-
}],
|
|
1103
|
+
args: ['class.nxt-dt-calendar-view']
|
|
1104
|
+
}], calendarMultiYearView: [{
|
|
1110
1105
|
type: HostBinding,
|
|
1111
|
-
args: ['class.
|
|
1106
|
+
args: ['class.nxt-dt-calendar-multi-year-view']
|
|
1112
1107
|
}] } });
|
|
1113
1108
|
|
|
1114
1109
|
const MONTHS_PER_YEAR = 12;
|
|
1115
1110
|
const MONTHS_PER_ROW = 3;
|
|
1116
|
-
class
|
|
1117
|
-
constructor(cdRef, dateTimeAdapter, dateTimeFormats) {
|
|
1118
|
-
this.cdRef = cdRef;
|
|
1119
|
-
this.dateTimeAdapter = dateTimeAdapter;
|
|
1120
|
-
this.dateTimeFormats = dateTimeFormats;
|
|
1121
|
-
/**
|
|
1122
|
-
* The select mode of the picker;
|
|
1123
|
-
* */
|
|
1124
|
-
this._selectMode = 'single';
|
|
1125
|
-
this._selecteds = [];
|
|
1126
|
-
this.localeSub = Subscription.EMPTY;
|
|
1127
|
-
this.initiated = false;
|
|
1128
|
-
/**
|
|
1129
|
-
* An array to hold all selectedDates' month value
|
|
1130
|
-
* the value is the month number in current year
|
|
1131
|
-
* */
|
|
1132
|
-
this.selectedMonths = [];
|
|
1133
|
-
/**
|
|
1134
|
-
* Callback to invoke when a new month is selected
|
|
1135
|
-
* */
|
|
1136
|
-
this.change = new EventEmitter();
|
|
1137
|
-
/**
|
|
1138
|
-
* Emits the selected year. This doesn't imply a change on the selected date
|
|
1139
|
-
* */
|
|
1140
|
-
this.monthSelected = new EventEmitter();
|
|
1141
|
-
/** Emits when any date is activated. */
|
|
1142
|
-
this.pickerMomentChange = new EventEmitter();
|
|
1143
|
-
/** Emits when use keyboard enter to select a calendar cell */
|
|
1144
|
-
this.keyboardEnter = new EventEmitter();
|
|
1145
|
-
this.monthNames = this.dateTimeAdapter.getMonthNames('short');
|
|
1146
|
-
}
|
|
1111
|
+
class YearViewComponent {
|
|
1147
1112
|
get selectMode() {
|
|
1148
1113
|
return this._selectMode;
|
|
1149
1114
|
}
|
|
@@ -1195,20 +1160,20 @@ class OwlYearViewComponent {
|
|
|
1195
1160
|
this.generateMonthList();
|
|
1196
1161
|
}
|
|
1197
1162
|
}
|
|
1198
|
-
get
|
|
1163
|
+
get min() {
|
|
1199
1164
|
return this._minDate;
|
|
1200
1165
|
}
|
|
1201
|
-
set
|
|
1166
|
+
set min(value) {
|
|
1202
1167
|
value = this.dateTimeAdapter.deserialize(value);
|
|
1203
1168
|
this._minDate = this.getValidDate(value);
|
|
1204
1169
|
if (this.initiated) {
|
|
1205
1170
|
this.generateMonthList();
|
|
1206
1171
|
}
|
|
1207
1172
|
}
|
|
1208
|
-
get
|
|
1173
|
+
get max() {
|
|
1209
1174
|
return this._maxDate;
|
|
1210
1175
|
}
|
|
1211
|
-
set
|
|
1176
|
+
set max(value) {
|
|
1212
1177
|
value = this.dateTimeAdapter.deserialize(value);
|
|
1213
1178
|
this._maxDate = this.getValidDate(value);
|
|
1214
1179
|
if (this.initiated) {
|
|
@@ -1222,6 +1187,7 @@ class OwlYearViewComponent {
|
|
|
1222
1187
|
if (this._pickerMoment) {
|
|
1223
1188
|
return this.dateTimeAdapter.getMonth(this._pickerMoment);
|
|
1224
1189
|
}
|
|
1190
|
+
return;
|
|
1225
1191
|
}
|
|
1226
1192
|
get isInSingleMode() {
|
|
1227
1193
|
return this.selectMode === 'single';
|
|
@@ -1231,9 +1197,33 @@ class OwlYearViewComponent {
|
|
|
1231
1197
|
this.selectMode === 'rangeFrom' ||
|
|
1232
1198
|
this.selectMode === 'rangeTo');
|
|
1233
1199
|
}
|
|
1234
|
-
get
|
|
1200
|
+
get calendarView() {
|
|
1235
1201
|
return true;
|
|
1236
1202
|
}
|
|
1203
|
+
constructor(cdRef, dateTimeAdapter, dateTimeFormats) {
|
|
1204
|
+
this.cdRef = cdRef;
|
|
1205
|
+
this.dateTimeAdapter = dateTimeAdapter;
|
|
1206
|
+
this.dateTimeFormats = dateTimeFormats;
|
|
1207
|
+
/**
|
|
1208
|
+
* The select mode of the picker;
|
|
1209
|
+
* */
|
|
1210
|
+
this._selectMode = 'single';
|
|
1211
|
+
this._selecteds = new Array();
|
|
1212
|
+
this.initiated = false;
|
|
1213
|
+
/**
|
|
1214
|
+
* Callback to invoke when a new month is selected
|
|
1215
|
+
* */
|
|
1216
|
+
this.change = new EventEmitter();
|
|
1217
|
+
/**
|
|
1218
|
+
* Emits the selected year. This doesn't imply a change on the selected date
|
|
1219
|
+
* */
|
|
1220
|
+
this.monthSelected = new EventEmitter();
|
|
1221
|
+
/** Emits when any date is activated. */
|
|
1222
|
+
this.pickerMomentChange = new EventEmitter();
|
|
1223
|
+
/** Emits when use keyboard enter to select a calendar cell */
|
|
1224
|
+
this.keyboardEnter = new EventEmitter();
|
|
1225
|
+
this.monthNames = this.dateTimeAdapter.getMonthNames('short');
|
|
1226
|
+
}
|
|
1237
1227
|
ngOnInit() {
|
|
1238
1228
|
this.localeSub = this.dateTimeAdapter.localeChanges.subscribe(() => {
|
|
1239
1229
|
this.generateMonthList();
|
|
@@ -1245,7 +1235,9 @@ class OwlYearViewComponent {
|
|
|
1245
1235
|
this.initiated = true;
|
|
1246
1236
|
}
|
|
1247
1237
|
ngOnDestroy() {
|
|
1248
|
-
|
|
1238
|
+
var _a;
|
|
1239
|
+
(_a = this.localeSub) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
|
1240
|
+
this.localeSub = undefined;
|
|
1249
1241
|
}
|
|
1250
1242
|
/**
|
|
1251
1243
|
* Handle a calendarCell selected
|
|
@@ -1347,7 +1339,7 @@ class OwlYearViewComponent {
|
|
|
1347
1339
|
createMonthCell(month) {
|
|
1348
1340
|
const startDateOfMonth = this.dateTimeAdapter.createDate(this.dateTimeAdapter.getYear(this.pickerMoment), month, 1);
|
|
1349
1341
|
const ariaLabel = this.dateTimeAdapter.format(startDateOfMonth, this.dateTimeFormats.monthYearA11yLabel);
|
|
1350
|
-
const cellClass = '
|
|
1342
|
+
const cellClass = 'nxt-dt-month-' + month;
|
|
1351
1343
|
return new CalendarCell(month, this.monthNames[month], ariaLabel, this.isMonthEnabled(month), false, cellClass);
|
|
1352
1344
|
}
|
|
1353
1345
|
/**
|
|
@@ -1360,10 +1352,10 @@ class OwlYearViewComponent {
|
|
|
1360
1352
|
for (let date = firstDateOfMonth; this.dateTimeAdapter.getMonth(date) === month; date = this.dateTimeAdapter.addCalendarDays(date, 1)) {
|
|
1361
1353
|
if (!!date &&
|
|
1362
1354
|
(!this.dateFilter || this.dateFilter(date, 'month')) &&
|
|
1363
|
-
(!this.
|
|
1364
|
-
this.dateTimeAdapter.compare(date, this.
|
|
1365
|
-
(!this.
|
|
1366
|
-
this.dateTimeAdapter.compare(date, this.
|
|
1355
|
+
(!this.min ||
|
|
1356
|
+
this.dateTimeAdapter.compare(date, this.min) >= 0) &&
|
|
1357
|
+
(!this.max ||
|
|
1358
|
+
this.dateTimeAdapter.compare(date, this.max) <= 0)) {
|
|
1367
1359
|
return true;
|
|
1368
1360
|
}
|
|
1369
1361
|
}
|
|
@@ -1371,7 +1363,7 @@ class OwlYearViewComponent {
|
|
|
1371
1363
|
}
|
|
1372
1364
|
/**
|
|
1373
1365
|
* Gets the month in this year that the given Date falls on.
|
|
1374
|
-
* Returns
|
|
1366
|
+
* Returns undefined if the given Date is in another year.
|
|
1375
1367
|
*/
|
|
1376
1368
|
getMonthInCurrentYear(date) {
|
|
1377
1369
|
if (this.getValidDate(date) && this.getValidDate(this._pickerMoment)) {
|
|
@@ -1389,9 +1381,7 @@ class OwlYearViewComponent {
|
|
|
1389
1381
|
return this.dateTimeAdapter.getMonth(date);
|
|
1390
1382
|
}
|
|
1391
1383
|
}
|
|
1392
|
-
|
|
1393
|
-
return null;
|
|
1394
|
-
}
|
|
1384
|
+
return;
|
|
1395
1385
|
}
|
|
1396
1386
|
/**
|
|
1397
1387
|
* Set the selectedMonths value
|
|
@@ -1424,25 +1414,22 @@ class OwlYearViewComponent {
|
|
|
1424
1414
|
return this.dateTimeAdapter.isDateInstance(obj) &&
|
|
1425
1415
|
this.dateTimeAdapter.isValid(obj)
|
|
1426
1416
|
? obj
|
|
1427
|
-
:
|
|
1417
|
+
: undefined;
|
|
1428
1418
|
}
|
|
1429
1419
|
focusActiveCell() {
|
|
1430
|
-
|
|
1420
|
+
var _a;
|
|
1421
|
+
(_a = this.calendarBodyElm) === null || _a === void 0 ? void 0 : _a.focusActiveCell();
|
|
1431
1422
|
}
|
|
1432
1423
|
}
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1424
|
+
YearViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: YearViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DateTimeAdapter }, { token: NXT_DATE_TIME_FORMATS }], target: i0.ɵɵFactoryTarget.Component });
|
|
1425
|
+
YearViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: YearViewComponent, selector: "nxt-date-time-year-view", inputs: { selectMode: "selectMode", selected: "selected", selecteds: "selecteds", pickerMoment: "pickerMoment", dateFilter: "dateFilter", min: "min", max: "max" }, outputs: { change: "change", monthSelected: "monthSelected", pickerMomentChange: "pickerMomentChange", keyboardEnter: "keyboardEnter" }, host: { properties: { "class.nxt-dt-calendar-view": "this.calendarView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: CalendarBodyComponent, descendants: true, static: true }], ngImport: i0, template: "<table class=\"nxt-dt-calendar-table nxt-dt-calendar-year-table\">\n <thead class=\"nxt-dt-calendar-header\">\n <tr>\n <th class=\"nxt-dt-calendar-table-divider\"\n aria-hidden=\"true\"\n colspan=\"3\"></th>\n </tr>\n </thead>\n <tbody nxtDateTimeCalendarBody\n role=\"grid\"\n [rows]=\"months\"\n [numCols]=\"3\"\n [cellRatio]=\"3 / 7\"\n [activeCell]=\"activeCell ?? 0\"\n [todayValue]=\"todayMonth??undefined\"\n [selectedValues]=\"selectedMonths\"\n [selectMode]=\"selectMode\"\n (keydown)=\"handleCalendarKeydown($event)\"\n (select)=\"selectCalendarCell($event)\">\n </tbody>\n</table>\n", styles: [""], dependencies: [{ kind: "component", type: CalendarBodyComponent, selector: "[nxtDateTimeCalendarBody]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["select"], exportAs: ["nxtDateTimeCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1426
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: YearViewComponent, decorators: [{
|
|
1436
1427
|
type: Component,
|
|
1437
|
-
args: [{ selector: '
|
|
1428
|
+
args: [{ selector: 'nxt-date-time-year-view', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"nxt-dt-calendar-table nxt-dt-calendar-year-table\">\n <thead class=\"nxt-dt-calendar-header\">\n <tr>\n <th class=\"nxt-dt-calendar-table-divider\"\n aria-hidden=\"true\"\n colspan=\"3\"></th>\n </tr>\n </thead>\n <tbody nxtDateTimeCalendarBody\n role=\"grid\"\n [rows]=\"months\"\n [numCols]=\"3\"\n [cellRatio]=\"3 / 7\"\n [activeCell]=\"activeCell ?? 0\"\n [todayValue]=\"todayMonth??undefined\"\n [selectedValues]=\"selectedMonths\"\n [selectMode]=\"selectMode\"\n (keydown)=\"handleCalendarKeydown($event)\"\n (select)=\"selectCalendarCell($event)\">\n </tbody>\n</table>\n" }]
|
|
1438
1429
|
}], ctorParameters: function () {
|
|
1439
|
-
return [{ type: i0.ChangeDetectorRef }, { type: DateTimeAdapter, decorators: [{
|
|
1440
|
-
type: Optional
|
|
1441
|
-
}] }, { type: undefined, decorators: [{
|
|
1442
|
-
type: Optional
|
|
1443
|
-
}, {
|
|
1430
|
+
return [{ type: i0.ChangeDetectorRef }, { type: DateTimeAdapter }, { type: undefined, decorators: [{
|
|
1444
1431
|
type: Inject,
|
|
1445
|
-
args: [
|
|
1432
|
+
args: [NXT_DATE_TIME_FORMATS]
|
|
1446
1433
|
}] }];
|
|
1447
1434
|
}, propDecorators: { selectMode: [{
|
|
1448
1435
|
type: Input
|
|
@@ -1454,9 +1441,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
1454
1441
|
type: Input
|
|
1455
1442
|
}], dateFilter: [{
|
|
1456
1443
|
type: Input
|
|
1457
|
-
}],
|
|
1444
|
+
}], min: [{
|
|
1458
1445
|
type: Input
|
|
1459
|
-
}],
|
|
1446
|
+
}], max: [{
|
|
1460
1447
|
type: Input
|
|
1461
1448
|
}], change: [{
|
|
1462
1449
|
type: Output
|
|
@@ -1468,82 +1455,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
1468
1455
|
type: Output
|
|
1469
1456
|
}], calendarBodyElm: [{
|
|
1470
1457
|
type: ViewChild,
|
|
1471
|
-
args: [
|
|
1472
|
-
}],
|
|
1458
|
+
args: [CalendarBodyComponent, { static: true }]
|
|
1459
|
+
}], calendarView: [{
|
|
1473
1460
|
type: HostBinding,
|
|
1474
|
-
args: ['class.
|
|
1461
|
+
args: ['class.nxt-dt-calendar-view']
|
|
1475
1462
|
}] } });
|
|
1476
1463
|
|
|
1477
|
-
class
|
|
1478
|
-
|
|
1479
|
-
this.elmRef = elmRef;
|
|
1480
|
-
this.pickerIntl = pickerIntl;
|
|
1481
|
-
this.ngZone = ngZone;
|
|
1482
|
-
this.cdRef = cdRef;
|
|
1483
|
-
this.dateTimeAdapter = dateTimeAdapter;
|
|
1484
|
-
this.dateTimeFormats = dateTimeFormats;
|
|
1485
|
-
/**
|
|
1486
|
-
* Set the first day of week
|
|
1487
|
-
*/
|
|
1488
|
-
this.firstDayOfWeek = 0;
|
|
1489
|
-
this._selecteds = [];
|
|
1490
|
-
/**
|
|
1491
|
-
* The view that the calendar should start in.
|
|
1492
|
-
*/
|
|
1493
|
-
this.startView = 'month';
|
|
1494
|
-
/** Emits when the currently picker moment changes. */
|
|
1495
|
-
this.pickerMomentChange = new EventEmitter();
|
|
1496
|
-
/** Emits when the currently selected date changes. */
|
|
1497
|
-
this.selectedChange = new EventEmitter();
|
|
1498
|
-
/** Emits when any date is selected. */
|
|
1499
|
-
this.userSelection = new EventEmitter();
|
|
1500
|
-
/**
|
|
1501
|
-
* Emits the selected year. This doesn't imply a change on the selected date
|
|
1502
|
-
* */
|
|
1503
|
-
this.yearSelected = new EventEmitter();
|
|
1504
|
-
/**
|
|
1505
|
-
* Emits the selected month. This doesn't imply a change on the selected date
|
|
1506
|
-
* */
|
|
1507
|
-
this.monthSelected = new EventEmitter();
|
|
1508
|
-
/**
|
|
1509
|
-
* Date filter for the month and year view
|
|
1510
|
-
*/
|
|
1511
|
-
this.dateFilterForViews = (date) => (!!date &&
|
|
1512
|
-
(!this.dateFilter || this.dateFilter(date, 'date')) &&
|
|
1513
|
-
(!this.minDate ||
|
|
1514
|
-
this.dateTimeAdapter.compare(date, this.minDate) >= 0) &&
|
|
1515
|
-
(!this.maxDate ||
|
|
1516
|
-
this.dateTimeAdapter.compare(date, this.maxDate) <= 0));
|
|
1517
|
-
this.intlChangesSub = Subscription.EMPTY;
|
|
1518
|
-
/**
|
|
1519
|
-
* Used for scheduling that focus should be moved to the active cell on the next tick.
|
|
1520
|
-
* We need to schedule it, rather than do it immediately, because we have to wait
|
|
1521
|
-
* for Angular to re-evaluate the view children.
|
|
1522
|
-
*/
|
|
1523
|
-
this.moveFocusOnNextTick = false;
|
|
1524
|
-
this.intlChangesSub = this.pickerIntl.changes.subscribe(() => {
|
|
1525
|
-
this.cdRef.markForCheck();
|
|
1526
|
-
});
|
|
1527
|
-
}
|
|
1528
|
-
get minDate() {
|
|
1464
|
+
class CalendarComponent {
|
|
1465
|
+
get min() {
|
|
1529
1466
|
return this._minDate;
|
|
1530
1467
|
}
|
|
1531
|
-
set
|
|
1468
|
+
set min(value) {
|
|
1532
1469
|
value = this.dateTimeAdapter.deserialize(value);
|
|
1533
1470
|
value = this.getValidDate(value);
|
|
1534
1471
|
this._minDate = value
|
|
1535
1472
|
? this.dateTimeAdapter.createDate(this.dateTimeAdapter.getYear(value), this.dateTimeAdapter.getMonth(value), this.dateTimeAdapter.getDate(value))
|
|
1536
|
-
:
|
|
1473
|
+
: undefined;
|
|
1537
1474
|
}
|
|
1538
|
-
get
|
|
1475
|
+
get max() {
|
|
1539
1476
|
return this._maxDate;
|
|
1540
1477
|
}
|
|
1541
|
-
set
|
|
1478
|
+
set max(value) {
|
|
1542
1479
|
value = this.dateTimeAdapter.deserialize(value);
|
|
1543
1480
|
value = this.getValidDate(value);
|
|
1544
1481
|
this._maxDate = value
|
|
1545
1482
|
? this.dateTimeAdapter.createDate(this.dateTimeAdapter.getYear(value), this.dateTimeAdapter.getMonth(value), this.dateTimeAdapter.getDate(value))
|
|
1546
|
-
:
|
|
1483
|
+
: undefined;
|
|
1547
1484
|
}
|
|
1548
1485
|
get pickerMoment() {
|
|
1549
1486
|
return this._pickerMoment;
|
|
@@ -1586,9 +1523,7 @@ class OwlCalendarComponent {
|
|
|
1586
1523
|
else if (this._currentView === 'year') {
|
|
1587
1524
|
return this.pickerIntl.prevYearLabel;
|
|
1588
1525
|
}
|
|
1589
|
-
|
|
1590
|
-
return null;
|
|
1591
|
-
}
|
|
1526
|
+
return;
|
|
1592
1527
|
}
|
|
1593
1528
|
get nextButtonLabel() {
|
|
1594
1529
|
if (this._currentView === 'month') {
|
|
@@ -1597,9 +1532,7 @@ class OwlCalendarComponent {
|
|
|
1597
1532
|
else if (this._currentView === 'year') {
|
|
1598
1533
|
return this.pickerIntl.nextYearLabel;
|
|
1599
1534
|
}
|
|
1600
|
-
|
|
1601
|
-
return null;
|
|
1602
|
-
}
|
|
1535
|
+
return;
|
|
1603
1536
|
}
|
|
1604
1537
|
get currentView() {
|
|
1605
1538
|
return this._currentView;
|
|
@@ -1623,11 +1556,64 @@ class OwlCalendarComponent {
|
|
|
1623
1556
|
return this._currentView === 'month';
|
|
1624
1557
|
}
|
|
1625
1558
|
/**
|
|
1626
|
-
* Bind class '
|
|
1559
|
+
* Bind class 'nxt-dt-calendar' to host
|
|
1627
1560
|
* */
|
|
1628
|
-
get
|
|
1561
|
+
get calendarClass() {
|
|
1629
1562
|
return true;
|
|
1630
1563
|
}
|
|
1564
|
+
constructor(elmRef, pickerIntl, ngZone, cdRef, dateTimeAdapter, dateTimeFormats) {
|
|
1565
|
+
this.elmRef = elmRef;
|
|
1566
|
+
this.pickerIntl = pickerIntl;
|
|
1567
|
+
this.ngZone = ngZone;
|
|
1568
|
+
this.cdRef = cdRef;
|
|
1569
|
+
this.dateTimeAdapter = dateTimeAdapter;
|
|
1570
|
+
this.dateTimeFormats = dateTimeFormats;
|
|
1571
|
+
/**
|
|
1572
|
+
* Set the first day of week
|
|
1573
|
+
*/
|
|
1574
|
+
this.firstDayOfWeek = 0;
|
|
1575
|
+
this._selecteds = new Array();
|
|
1576
|
+
/**
|
|
1577
|
+
* The view that the calendar should start in.
|
|
1578
|
+
*/
|
|
1579
|
+
this.startView = 'month';
|
|
1580
|
+
/**
|
|
1581
|
+
* Whether to hide dates in other months at the start or end of the current month.
|
|
1582
|
+
* */
|
|
1583
|
+
this.hideOtherMonths = false;
|
|
1584
|
+
/** Emits when the currently picker moment changes. */
|
|
1585
|
+
this.pickerMomentChange = new EventEmitter();
|
|
1586
|
+
/** Emits when the currently selected date changes. */
|
|
1587
|
+
this.selectedChange = new EventEmitter();
|
|
1588
|
+
/** Emits when any date is selected. */
|
|
1589
|
+
this.userSelection = new EventEmitter();
|
|
1590
|
+
/**
|
|
1591
|
+
* Emits the selected year. This doesn't imply a change on the selected date
|
|
1592
|
+
* */
|
|
1593
|
+
this.yearSelected = new EventEmitter();
|
|
1594
|
+
/**
|
|
1595
|
+
* Emits the selected month. This doesn't imply a change on the selected date
|
|
1596
|
+
* */
|
|
1597
|
+
this.monthSelected = new EventEmitter();
|
|
1598
|
+
/**
|
|
1599
|
+
* Date filter for the month and year view
|
|
1600
|
+
*/
|
|
1601
|
+
this.dateFilterForViews = (date) => (!!date &&
|
|
1602
|
+
(!this.dateFilter || this.dateFilter(date, 'date')) &&
|
|
1603
|
+
(!this.min ||
|
|
1604
|
+
this.dateTimeAdapter.compare(date, this.min) >= 0) &&
|
|
1605
|
+
(!this.max ||
|
|
1606
|
+
this.dateTimeAdapter.compare(date, this.max) <= 0));
|
|
1607
|
+
/**
|
|
1608
|
+
* Used for scheduling that focus should be moved to the active cell on the next tick.
|
|
1609
|
+
* We need to schedule it, rather than do it immediately, because we have to wait
|
|
1610
|
+
* for Angular to re-evaluate the view children.
|
|
1611
|
+
*/
|
|
1612
|
+
this.moveFocusOnNextTick = false;
|
|
1613
|
+
this.intlChangesSub = this.pickerIntl.changes.subscribe(() => {
|
|
1614
|
+
this.cdRef.markForCheck();
|
|
1615
|
+
});
|
|
1616
|
+
}
|
|
1631
1617
|
ngOnInit() { }
|
|
1632
1618
|
ngAfterContentInit() {
|
|
1633
1619
|
this._currentView = this.startView;
|
|
@@ -1639,7 +1625,9 @@ class OwlCalendarComponent {
|
|
|
1639
1625
|
}
|
|
1640
1626
|
}
|
|
1641
1627
|
ngOnDestroy() {
|
|
1642
|
-
|
|
1628
|
+
var _a;
|
|
1629
|
+
(_a = this.intlChangesSub) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
|
1630
|
+
this.intlChangesSub = undefined;
|
|
1643
1631
|
}
|
|
1644
1632
|
/**
|
|
1645
1633
|
* Toggle between month view and year view
|
|
@@ -1688,7 +1676,7 @@ class OwlCalendarComponent {
|
|
|
1688
1676
|
* Change the pickerMoment value
|
|
1689
1677
|
*/
|
|
1690
1678
|
handlePickerMomentChange(date) {
|
|
1691
|
-
this.pickerMoment = this.dateTimeAdapter.clampDate(date, this.
|
|
1679
|
+
this.pickerMoment = this.dateTimeAdapter.clampDate(date, this.min, this.max);
|
|
1692
1680
|
this.pickerMomentChange.emit(this.pickerMoment);
|
|
1693
1681
|
return;
|
|
1694
1682
|
}
|
|
@@ -1699,13 +1687,13 @@ class OwlCalendarComponent {
|
|
|
1699
1687
|
* Whether the previous period button is enabled.
|
|
1700
1688
|
*/
|
|
1701
1689
|
prevButtonEnabled() {
|
|
1702
|
-
return (!this.
|
|
1690
|
+
return (!this.min || !this.isSameView(this.pickerMoment, this.min));
|
|
1703
1691
|
}
|
|
1704
1692
|
/**
|
|
1705
1693
|
* Whether the next period button is enabled.
|
|
1706
1694
|
*/
|
|
1707
1695
|
nextButtonEnabled() {
|
|
1708
|
-
return (!this.
|
|
1696
|
+
return (!this.max || !this.isSameView(this.pickerMoment, this.max));
|
|
1709
1697
|
}
|
|
1710
1698
|
/**
|
|
1711
1699
|
* Focus to the host element
|
|
@@ -1716,9 +1704,8 @@ class OwlCalendarComponent {
|
|
|
1716
1704
|
.asObservable()
|
|
1717
1705
|
.pipe(take(1))
|
|
1718
1706
|
.subscribe(() => {
|
|
1719
|
-
|
|
1720
|
-
|
|
1721
|
-
.focus();
|
|
1707
|
+
var _a, _b;
|
|
1708
|
+
(_b = (_a = this.elmRef.nativeElement) === null || _a === void 0 ? void 0 : _a.querySelector('.nxt-dt-calendar-cell-active')) === null || _b === void 0 ? void 0 : _b.focus();
|
|
1722
1709
|
});
|
|
1723
1710
|
});
|
|
1724
1711
|
}
|
|
@@ -1757,30 +1744,26 @@ class OwlCalendarComponent {
|
|
|
1757
1744
|
return this.dateTimeAdapter.isDateInstance(obj) &&
|
|
1758
1745
|
this.dateTimeAdapter.isValid(obj)
|
|
1759
1746
|
? obj
|
|
1760
|
-
:
|
|
1747
|
+
: undefined;
|
|
1761
1748
|
}
|
|
1762
1749
|
}
|
|
1763
|
-
|
|
1764
|
-
|
|
1765
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1750
|
+
CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: CalendarComponent, deps: [{ token: i0.ElementRef }, { token: DateTimeIntl }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: DateTimeAdapter }, { token: NXT_DATE_TIME_FORMATS }], target: i0.ɵɵFactoryTarget.Component });
|
|
1751
|
+
CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: CalendarComponent, selector: "nxt-date-time-calendar", inputs: { dateFilter: "dateFilter", firstDayOfWeek: "firstDayOfWeek", min: "min", max: "max", pickerMoment: "pickerMoment", selectMode: "selectMode", selected: "selected", selecteds: "selecteds", startView: "startView", hideOtherMonths: "hideOtherMonths" }, outputs: { pickerMomentChange: "pickerMomentChange", selectedChange: "selectedChange", userSelection: "userSelection", yearSelected: "yearSelected", monthSelected: "monthSelected" }, host: { properties: { "class.nxt-dt-calendar": "this.calendarClass" } }, ngImport: i0, template: "<div class=\"nxt-dt-calendar-control\">\n <!-- focus when keyboard tab (http://kizu.ru/en/blog/keyboard-only-focus/#x) -->\n <button class=\"nxt-dt-control nxt-dt-control-button nxt-dt-control-arrow-button\"\n type=\"button\"\n tabindex=\"0\"\n [style.visibility]=\"showControlArrows? 'visible': 'hidden'\"\n [disabled]=\"!prevButtonEnabled()\"\n [attr.aria-label]=\"prevButtonLabel\"\n (click)=\"previousClicked()\">\n <span class=\"nxt-dt-control-content nxt-dt-control-button-content\"\n tabindex=\"-1\">\n <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n version=\"1.1\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 250.738 250.738\"\n style=\"enable-background:new 0 0 250.738 250.738;\"\n xml:space=\"preserve\"\n width=\"100%\"\n height=\"100%\">\n <path style=\"fill-rule: evenodd; clip-rule: evenodd;\"\n d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546 c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681 l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\" />\n </svg>\n <!-- </editor-fold> -->\n </span>\n </button>\n <div class=\"nxt-dt-calendar-control-content\">\n <button class=\"nxt-dt-control nxt-dt-control-button nxt-dt-control-period-button\"\n type=\"button\"\n tabindex=\"0\"\n [attr.aria-label]=\"periodButtonLabel\"\n (click)=\"toggleViews()\">\n <span class=\"nxt-dt-control-content nxt-dt-control-button-content\"\n tabindex=\"-1\">\n {{periodButtonText}}\n\n <span class=\"nxt-dt-control-button-arrow\"\n [style.transform]=\"'rotate(' + (isMonthView? 0 : 180) +'deg)'\">\n <!-- <editor-fold desc=\"SVG Arrow\"> -->\n <svg version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n x=\"0px\"\n y=\"0px\"\n width=\"50%\"\n height=\"50%\"\n viewBox=\"0 0 292.362 292.362\"\n style=\"enable-background:new 0 0 292.362 292.362;\"\n xml:space=\"preserve\">\n <g>\n <path d=\"M286.935,69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952,0-9.233,1.807-12.85,5.424\n C1.807,72.998,0,77.279,0,82.228c0,4.948,1.807,9.229,5.424,12.847l127.907,127.907c3.621,3.617,7.902,5.428,12.85,5.428\n s9.233-1.811,12.847-5.428L286.935,95.074c3.613-3.617,5.427-7.898,5.427-12.847C292.362,77.279,290.548,72.998,286.935,69.377z\" />\n </g>\n </svg>\n <!-- </editor-fold> -->\n </span>\n </span>\n </button>\n </div>\n <button class=\"nxt-dt-control nxt-dt-control-button nxt-dt-control-arrow-button\"\n type=\"button\"\n tabindex=\"0\"\n [style.visibility]=\"showControlArrows? 'visible': 'hidden'\"\n [disabled]=\"!nextButtonEnabled()\"\n [attr.aria-label]=\"nextButtonLabel\"\n (click)=\"nextClicked()\">\n <span class=\"nxt-dt-control-content nxt-dt-control-button-content\"\n tabindex=\"-1\">\n <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\n <svg version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 250.738 250.738\"\n style=\"enable-background:new 0 0 250.738 250.738;\"\n xml:space=\"preserve\">\n <path style=\"fill-rule:evenodd;clip-rule:evenodd;\"\n d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\n c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\n c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\n C197.237,120.447,195.534,115.448,191.75,111.689z\" />\n </svg>\n <!-- </editor-fold> -->\n </span>\n </button>\n</div>\n<div class=\"nxt-dt-calendar-main\"\n cdkMonitorSubtreeFocus\n [ngSwitch]=\"currentView\"\n tabindex=\"-1\">\n <nxt-date-time-month-view *ngSwitchCase=\"'month'\"\n [pickerMoment]=\"pickerMoment\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n [selected]=\"selected\"\n [selecteds]=\"selecteds\"\n [selectMode]=\"selectMode ?? 'single'\"\n [min]=\"min\"\n [max]=\"max\"\n [dateFilter]=\"dateFilter\"\n [hideOtherMonths]=\"hideOtherMonths\"\n (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n (selectedChange)=\"dateSelected($event)\"\n (userSelection)=\"userSelected()\"></nxt-date-time-month-view>\n\n <nxt-date-time-year-view *ngSwitchCase=\"'year'\"\n [pickerMoment]=\"pickerMoment\"\n [selected]=\"selected\"\n [selecteds]=\"selecteds\"\n [selectMode]=\"selectMode ?? 'single'\"\n [min]=\"min\"\n [max]=\"max\"\n [dateFilter]=\"dateFilter\"\n (keyboardEnter)=\"focusActiveCell()\"\n (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n (monthSelected)=\"selectMonthInYearView($event)\"\n (change)=\"goToDateInView($event, 'month')\"></nxt-date-time-year-view>\n\n <nxt-date-time-multi-year-view *ngSwitchCase=\"'multi-years'\"\n [pickerMoment]=\"pickerMoment\"\n [selected]=\"selected\"\n [selecteds]=\"selecteds\"\n [selectMode]=\"selectMode ?? 'single'\"\n [min]=\"min\"\n [max]=\"max\"\n [dateFilter]=\"dateFilter\"\n (keyboardEnter)=\"focusActiveCell()\"\n (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n (yearSelected)=\"selectYearInMultiYearView($event)\"\n (change)=\"goToDateInView($event, 'year')\"></nxt-date-time-multi-year-view>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: MultiYearViewComponent, selector: "nxt-date-time-multi-year-view", inputs: ["selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "min", "max"], outputs: ["change", "yearSelected", "pickerMomentChange", "keyboardEnter"] }, { kind: "component", type: YearViewComponent, selector: "nxt-date-time-year-view", inputs: ["selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "min", "max"], outputs: ["change", "monthSelected", "pickerMomentChange", "keyboardEnter"] }, { kind: "component", type: MonthViewComponent, selector: "nxt-date-time-month-view", inputs: ["hideOtherMonths", "firstDayOfWeek", "selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "min", "max"], outputs: ["selectedChange", "userSelection", "pickerMomentChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1752
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
1766
1753
|
type: Component,
|
|
1767
|
-
args: [{ selector: '
|
|
1754
|
+
args: [{ selector: 'nxt-date-time-calendar', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"nxt-dt-calendar-control\">\n <!-- focus when keyboard tab (http://kizu.ru/en/blog/keyboard-only-focus/#x) -->\n <button class=\"nxt-dt-control nxt-dt-control-button nxt-dt-control-arrow-button\"\n type=\"button\"\n tabindex=\"0\"\n [style.visibility]=\"showControlArrows? 'visible': 'hidden'\"\n [disabled]=\"!prevButtonEnabled()\"\n [attr.aria-label]=\"prevButtonLabel\"\n (click)=\"previousClicked()\">\n <span class=\"nxt-dt-control-content nxt-dt-control-button-content\"\n tabindex=\"-1\">\n <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n version=\"1.1\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 250.738 250.738\"\n style=\"enable-background:new 0 0 250.738 250.738;\"\n xml:space=\"preserve\"\n width=\"100%\"\n height=\"100%\">\n <path style=\"fill-rule: evenodd; clip-rule: evenodd;\"\n d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546 c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681 l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\" />\n </svg>\n <!-- </editor-fold> -->\n </span>\n </button>\n <div class=\"nxt-dt-calendar-control-content\">\n <button class=\"nxt-dt-control nxt-dt-control-button nxt-dt-control-period-button\"\n type=\"button\"\n tabindex=\"0\"\n [attr.aria-label]=\"periodButtonLabel\"\n (click)=\"toggleViews()\">\n <span class=\"nxt-dt-control-content nxt-dt-control-button-content\"\n tabindex=\"-1\">\n {{periodButtonText}}\n\n <span class=\"nxt-dt-control-button-arrow\"\n [style.transform]=\"'rotate(' + (isMonthView? 0 : 180) +'deg)'\">\n <!-- <editor-fold desc=\"SVG Arrow\"> -->\n <svg version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n x=\"0px\"\n y=\"0px\"\n width=\"50%\"\n height=\"50%\"\n viewBox=\"0 0 292.362 292.362\"\n style=\"enable-background:new 0 0 292.362 292.362;\"\n xml:space=\"preserve\">\n <g>\n <path d=\"M286.935,69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952,0-9.233,1.807-12.85,5.424\n C1.807,72.998,0,77.279,0,82.228c0,4.948,1.807,9.229,5.424,12.847l127.907,127.907c3.621,3.617,7.902,5.428,12.85,5.428\n s9.233-1.811,12.847-5.428L286.935,95.074c3.613-3.617,5.427-7.898,5.427-12.847C292.362,77.279,290.548,72.998,286.935,69.377z\" />\n </g>\n </svg>\n <!-- </editor-fold> -->\n </span>\n </span>\n </button>\n </div>\n <button class=\"nxt-dt-control nxt-dt-control-button nxt-dt-control-arrow-button\"\n type=\"button\"\n tabindex=\"0\"\n [style.visibility]=\"showControlArrows? 'visible': 'hidden'\"\n [disabled]=\"!nextButtonEnabled()\"\n [attr.aria-label]=\"nextButtonLabel\"\n (click)=\"nextClicked()\">\n <span class=\"nxt-dt-control-content nxt-dt-control-button-content\"\n tabindex=\"-1\">\n <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\n <svg version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 250.738 250.738\"\n style=\"enable-background:new 0 0 250.738 250.738;\"\n xml:space=\"preserve\">\n <path style=\"fill-rule:evenodd;clip-rule:evenodd;\"\n d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\n c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\n c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\n C197.237,120.447,195.534,115.448,191.75,111.689z\" />\n </svg>\n <!-- </editor-fold> -->\n </span>\n </button>\n</div>\n<div class=\"nxt-dt-calendar-main\"\n cdkMonitorSubtreeFocus\n [ngSwitch]=\"currentView\"\n tabindex=\"-1\">\n <nxt-date-time-month-view *ngSwitchCase=\"'month'\"\n [pickerMoment]=\"pickerMoment\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n [selected]=\"selected\"\n [selecteds]=\"selecteds\"\n [selectMode]=\"selectMode ?? 'single'\"\n [min]=\"min\"\n [max]=\"max\"\n [dateFilter]=\"dateFilter\"\n [hideOtherMonths]=\"hideOtherMonths\"\n (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n (selectedChange)=\"dateSelected($event)\"\n (userSelection)=\"userSelected()\"></nxt-date-time-month-view>\n\n <nxt-date-time-year-view *ngSwitchCase=\"'year'\"\n [pickerMoment]=\"pickerMoment\"\n [selected]=\"selected\"\n [selecteds]=\"selecteds\"\n [selectMode]=\"selectMode ?? 'single'\"\n [min]=\"min\"\n [max]=\"max\"\n [dateFilter]=\"dateFilter\"\n (keyboardEnter)=\"focusActiveCell()\"\n (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n (monthSelected)=\"selectMonthInYearView($event)\"\n (change)=\"goToDateInView($event, 'month')\"></nxt-date-time-year-view>\n\n <nxt-date-time-multi-year-view *ngSwitchCase=\"'multi-years'\"\n [pickerMoment]=\"pickerMoment\"\n [selected]=\"selected\"\n [selecteds]=\"selecteds\"\n [selectMode]=\"selectMode ?? 'single'\"\n [min]=\"min\"\n [max]=\"max\"\n [dateFilter]=\"dateFilter\"\n (keyboardEnter)=\"focusActiveCell()\"\n (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n (yearSelected)=\"selectYearInMultiYearView($event)\"\n (change)=\"goToDateInView($event, 'year')\"></nxt-date-time-multi-year-view>\n</div>\n" }]
|
|
1768
1755
|
}], ctorParameters: function () {
|
|
1769
|
-
return [{ type: i0.ElementRef }, { type:
|
|
1770
|
-
type: Optional
|
|
1771
|
-
}] }, { type: undefined, decorators: [{
|
|
1772
|
-
type: Optional
|
|
1773
|
-
}, {
|
|
1756
|
+
return [{ type: i0.ElementRef }, { type: DateTimeIntl }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: DateTimeAdapter }, { type: undefined, decorators: [{
|
|
1774
1757
|
type: Inject,
|
|
1775
|
-
args: [
|
|
1758
|
+
args: [NXT_DATE_TIME_FORMATS]
|
|
1776
1759
|
}] }];
|
|
1777
1760
|
}, propDecorators: { dateFilter: [{
|
|
1778
1761
|
type: Input
|
|
1779
1762
|
}], firstDayOfWeek: [{
|
|
1780
1763
|
type: Input
|
|
1781
|
-
}],
|
|
1764
|
+
}], min: [{
|
|
1782
1765
|
type: Input
|
|
1783
|
-
}],
|
|
1766
|
+
}], max: [{
|
|
1784
1767
|
type: Input
|
|
1785
1768
|
}], pickerMoment: [{
|
|
1786
1769
|
type: Input
|
|
@@ -1804,70 +1787,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
1804
1787
|
type: Output
|
|
1805
1788
|
}], monthSelected: [{
|
|
1806
1789
|
type: Output
|
|
1807
|
-
}],
|
|
1790
|
+
}], calendarClass: [{
|
|
1808
1791
|
type: HostBinding,
|
|
1809
|
-
args: ['class.
|
|
1792
|
+
args: ['class.nxt-dt-calendar']
|
|
1810
1793
|
}] } });
|
|
1811
1794
|
|
|
1812
1795
|
let nextUniqueId = 0;
|
|
1813
|
-
class
|
|
1814
|
-
constructor(dateTimeAdapter, dateTimeFormats) {
|
|
1815
|
-
this.dateTimeAdapter = dateTimeAdapter;
|
|
1816
|
-
this.dateTimeFormats = dateTimeFormats;
|
|
1817
|
-
/**
|
|
1818
|
-
* Whether to show the second's timer
|
|
1819
|
-
*/
|
|
1820
|
-
this._showSecondsTimer = false;
|
|
1821
|
-
/**
|
|
1822
|
-
* Whether the timer is in hour12 format
|
|
1823
|
-
*/
|
|
1824
|
-
this._hour12Timer = false;
|
|
1825
|
-
/**
|
|
1826
|
-
* The view that the calendar should start in.
|
|
1827
|
-
*/
|
|
1828
|
-
this.startView = 'month';
|
|
1829
|
-
/**
|
|
1830
|
-
* Hours to change per step
|
|
1831
|
-
*/
|
|
1832
|
-
this._stepHour = 1;
|
|
1833
|
-
/**
|
|
1834
|
-
* Minutes to change per step
|
|
1835
|
-
*/
|
|
1836
|
-
this._stepMinute = 1;
|
|
1837
|
-
/**
|
|
1838
|
-
* Seconds to change per step
|
|
1839
|
-
*/
|
|
1840
|
-
this._stepSecond = 1;
|
|
1841
|
-
/**
|
|
1842
|
-
* Set the first day of week
|
|
1843
|
-
*/
|
|
1844
|
-
this._firstDayOfWeek = 0;
|
|
1845
|
-
/**
|
|
1846
|
-
* Whether to hide dates in other months at the start or end of the current month.
|
|
1847
|
-
*/
|
|
1848
|
-
this._hideOtherMonths = false;
|
|
1849
|
-
/**
|
|
1850
|
-
* Date Time Checker to check if the give dateTime is selectable
|
|
1851
|
-
*/
|
|
1852
|
-
this.dateTimeChecker = (dateTime) => (!!dateTime &&
|
|
1853
|
-
(!this.dateTimeFilter || this.dateTimeFilter(dateTime)) &&
|
|
1854
|
-
(!this.minDateTime ||
|
|
1855
|
-
this.dateTimeAdapter.compare(dateTime, this.minDateTime) >=
|
|
1856
|
-
0) &&
|
|
1857
|
-
(!this.maxDateTime ||
|
|
1858
|
-
this.dateTimeAdapter.compare(dateTime, this.maxDateTime) <= 0));
|
|
1859
|
-
if (!this.dateTimeAdapter) {
|
|
1860
|
-
throw Error('OwlDateTimePicker: No provider found for DateTimeAdapter. You must import one of the following ' +
|
|
1861
|
-
'modules at your application root: OwlNativeDateTimeModule, OwlMomentDateTimeModule, or provide a ' +
|
|
1862
|
-
'custom implementation.');
|
|
1863
|
-
}
|
|
1864
|
-
if (!this.dateTimeFormats) {
|
|
1865
|
-
throw Error('OwlDateTimePicker: No provider found for OWL_DATE_TIME_FORMATS. You must import one of the following ' +
|
|
1866
|
-
'modules at your application root: OwlNativeDateTimeModule, OwlMomentDateTimeModule, or provide a ' +
|
|
1867
|
-
'custom implementation.');
|
|
1868
|
-
}
|
|
1869
|
-
this._id = `owl-dt-picker-${nextUniqueId++}`;
|
|
1870
|
-
}
|
|
1796
|
+
class DateTimeDirective {
|
|
1871
1797
|
get showSecondsTimer() {
|
|
1872
1798
|
return this._showSecondsTimer;
|
|
1873
1799
|
}
|
|
@@ -1929,25 +1855,65 @@ class OwlDateTimeDirective {
|
|
|
1929
1855
|
get disabled() {
|
|
1930
1856
|
return false;
|
|
1931
1857
|
}
|
|
1858
|
+
constructor(dateTimeAdapter, dateTimeFormats) {
|
|
1859
|
+
this.dateTimeAdapter = dateTimeAdapter;
|
|
1860
|
+
this.dateTimeFormats = dateTimeFormats;
|
|
1861
|
+
/**
|
|
1862
|
+
* Whether to show the second's timer
|
|
1863
|
+
*/
|
|
1864
|
+
this._showSecondsTimer = false;
|
|
1865
|
+
/**
|
|
1866
|
+
* Whether the timer is in hour12 format
|
|
1867
|
+
*/
|
|
1868
|
+
this._hour12Timer = false;
|
|
1869
|
+
/**
|
|
1870
|
+
* The view that the calendar should start in.
|
|
1871
|
+
*/
|
|
1872
|
+
this.startView = 'month';
|
|
1873
|
+
/**
|
|
1874
|
+
* Hours to change per step
|
|
1875
|
+
*/
|
|
1876
|
+
this._stepHour = 1;
|
|
1877
|
+
/**
|
|
1878
|
+
* Minutes to change per step
|
|
1879
|
+
*/
|
|
1880
|
+
this._stepMinute = 1;
|
|
1881
|
+
/**
|
|
1882
|
+
* Seconds to change per step
|
|
1883
|
+
*/
|
|
1884
|
+
this._stepSecond = 1;
|
|
1885
|
+
/**
|
|
1886
|
+
* Set the first day of week
|
|
1887
|
+
*/
|
|
1888
|
+
this._firstDayOfWeek = 0;
|
|
1889
|
+
/**
|
|
1890
|
+
* Whether to hide dates in other months at the start or end of the current month.
|
|
1891
|
+
*/
|
|
1892
|
+
this._hideOtherMonths = false;
|
|
1893
|
+
/**
|
|
1894
|
+
* Date Time Checker to check if the give dateTime is selectable
|
|
1895
|
+
*/
|
|
1896
|
+
this.dateTimeChecker = (dateTime) => (!!dateTime &&
|
|
1897
|
+
(!this.dateTimeFilter || this.dateTimeFilter(dateTime)) &&
|
|
1898
|
+
(!this.min || this.dateTimeAdapter.compare(dateTime, this.min) >= 0) &&
|
|
1899
|
+
(!this.max || this.dateTimeAdapter.compare(dateTime, this.max) <= 0));
|
|
1900
|
+
this._id = `nxt-dt-picker-${nextUniqueId++}`;
|
|
1901
|
+
}
|
|
1932
1902
|
getValidDate(obj) {
|
|
1933
1903
|
return this.dateTimeAdapter.isDateInstance(obj) &&
|
|
1934
1904
|
this.dateTimeAdapter.isValid(obj)
|
|
1935
1905
|
? obj
|
|
1936
|
-
:
|
|
1906
|
+
: undefined;
|
|
1937
1907
|
}
|
|
1938
1908
|
}
|
|
1939
|
-
|
|
1940
|
-
|
|
1941
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1909
|
+
DateTimeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: DateTimeDirective, deps: [{ token: DateTimeAdapter }, { token: NXT_DATE_TIME_FORMATS }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1910
|
+
DateTimeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: DateTimeDirective, inputs: { showSecondsTimer: "showSecondsTimer", hour12Timer: "hour12Timer", startView: "startView", stepHour: "stepHour", stepMinute: "stepMinute", stepSecond: "stepSecond", firstDayOfWeek: "firstDayOfWeek", hideOtherMonths: "hideOtherMonths" }, ngImport: i0 });
|
|
1911
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: DateTimeDirective, decorators: [{
|
|
1942
1912
|
type: Directive
|
|
1943
1913
|
}], ctorParameters: function () {
|
|
1944
|
-
return [{ type: DateTimeAdapter, decorators: [{
|
|
1945
|
-
type: Optional
|
|
1946
|
-
}] }, { type: undefined, decorators: [{
|
|
1947
|
-
type: Optional
|
|
1948
|
-
}, {
|
|
1914
|
+
return [{ type: DateTimeAdapter }, { type: undefined, decorators: [{
|
|
1949
1915
|
type: Inject,
|
|
1950
|
-
args: [
|
|
1916
|
+
args: [NXT_DATE_TIME_FORMATS]
|
|
1951
1917
|
}] }];
|
|
1952
1918
|
}, propDecorators: { showSecondsTimer: [{
|
|
1953
1919
|
type: Input
|
|
@@ -1969,41 +1935,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
1969
1935
|
|
|
1970
1936
|
class NumberFixedLenPipe {
|
|
1971
1937
|
transform(num, len) {
|
|
1938
|
+
if (num == undefined || !Number.isFinite(num))
|
|
1939
|
+
return undefined;
|
|
1972
1940
|
const number = Math.floor(num);
|
|
1973
|
-
|
|
1974
|
-
|
|
1975
|
-
|
|
1976
|
-
}
|
|
1977
|
-
let numString = number.toString();
|
|
1978
|
-
while (numString.length < length) {
|
|
1979
|
-
numString = '0' + numString;
|
|
1980
|
-
}
|
|
1981
|
-
return numString;
|
|
1941
|
+
if (len == undefined || !Number.isFinite(len))
|
|
1942
|
+
return number;
|
|
1943
|
+
return number.toFixed(0).padStart(Math.floor(len), '0');
|
|
1982
1944
|
}
|
|
1983
1945
|
}
|
|
1984
|
-
NumberFixedLenPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1985
|
-
NumberFixedLenPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
1986
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1946
|
+
NumberFixedLenPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NumberFixedLenPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
1947
|
+
NumberFixedLenPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: NumberFixedLenPipe, name: "numberFixedLen" });
|
|
1948
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: NumberFixedLenPipe, decorators: [{
|
|
1987
1949
|
type: Pipe,
|
|
1988
1950
|
args: [{
|
|
1989
1951
|
name: 'numberFixedLen'
|
|
1990
1952
|
}]
|
|
1991
1953
|
}] });
|
|
1992
1954
|
|
|
1993
|
-
class
|
|
1955
|
+
class TimerBoxComponent {
|
|
1956
|
+
get displayValue() {
|
|
1957
|
+
return this.boxValue || this.value;
|
|
1958
|
+
}
|
|
1959
|
+
get timerBoxClass() {
|
|
1960
|
+
return true;
|
|
1961
|
+
}
|
|
1994
1962
|
constructor() {
|
|
1995
1963
|
this.showDivider = false;
|
|
1964
|
+
this.upBtnDisabled = false;
|
|
1965
|
+
this.downBtnDisabled = false;
|
|
1966
|
+
this.value = 0;
|
|
1967
|
+
this.min = 0;
|
|
1968
|
+
this.max = 0;
|
|
1996
1969
|
this.step = 1;
|
|
1997
1970
|
this.valueChange = new EventEmitter();
|
|
1998
1971
|
this.inputChange = new EventEmitter();
|
|
1999
1972
|
this.inputStream = new Subject();
|
|
2000
|
-
this.inputStreamSub = Subscription.EMPTY;
|
|
2001
|
-
}
|
|
2002
|
-
get displayValue() {
|
|
2003
|
-
return this.boxValue || this.value;
|
|
2004
|
-
}
|
|
2005
|
-
get owlDTTimerBoxClass() {
|
|
2006
|
-
return true;
|
|
2007
1973
|
}
|
|
2008
1974
|
ngOnInit() {
|
|
2009
1975
|
this.inputStreamSub = this.inputStream.pipe(debounceTime(500), distinctUntilChanged()).subscribe((val) => {
|
|
@@ -2014,7 +1980,9 @@ class OwlTimerBoxComponent {
|
|
|
2014
1980
|
});
|
|
2015
1981
|
}
|
|
2016
1982
|
ngOnDestroy() {
|
|
2017
|
-
|
|
1983
|
+
var _a;
|
|
1984
|
+
(_a = this.inputStreamSub) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
|
1985
|
+
this.inputStreamSub = undefined;
|
|
2018
1986
|
}
|
|
2019
1987
|
upBtnClicked() {
|
|
2020
1988
|
this.updateValue(this.value + this.step);
|
|
@@ -2035,11 +2003,11 @@ class OwlTimerBoxComponent {
|
|
|
2035
2003
|
this.inputChange.emit(value);
|
|
2036
2004
|
}
|
|
2037
2005
|
}
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2006
|
+
TimerBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: TimerBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2007
|
+
TimerBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: TimerBoxComponent, selector: "nxt-date-time-timer-box", inputs: { showDivider: "showDivider", upBtnAriaLabel: "upBtnAriaLabel", upBtnDisabled: "upBtnDisabled", downBtnAriaLabel: "downBtnAriaLabel", downBtnDisabled: "downBtnDisabled", boxValue: "boxValue", value: "value", min: "min", max: "max", step: "step", inputLabel: "inputLabel" }, outputs: { valueChange: "valueChange", inputChange: "inputChange" }, host: { properties: { "class.nxt-dt-timer-box": "this.timerBoxClass" } }, ngImport: i0, template: "<div *ngIf=\"showDivider\"\n class=\"nxt-dt-timer-divider\"\n aria-hidden=\"true\"></div>\n<button class=\"nxt-dt-control-button nxt-dt-control-arrow-button\"\n type=\"button\"\n tabindex=\"-1\"\n [disabled]=\"upBtnDisabled\"\n [attr.aria-label]=\"upBtnAriaLabel\"\n (click)=\"upBtnClicked()\">\n <span class=\"nxt-dt-control-button-content\"\n tabindex=\"-1\">\n <!-- <editor-fold desc=\"SVG Arrow Up\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n version=\"1.1\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 451.847 451.846\"\n style=\"enable-background:new 0 0 451.847 451.846;\"\n xml:space=\"preserve\"\n width=\"100%\"\n height=\"100%\">\n <path d=\"M248.292,106.406l194.281,194.29c12.365,12.359,12.365,32.391,0,44.744c-12.354,12.354-32.391,12.354-44.744,0\n L225.923,173.529L54.018,345.44c-12.36,12.354-32.395,12.354-44.748,0c-12.359-12.354-12.359-32.391,0-44.75L203.554,106.4\n c6.18-6.174,14.271-9.259,22.369-9.259C234.018,97.141,242.115,100.232,248.292,106.406z\" />\n </svg>\n <!-- </editor-fold> -->\n </span>\n</button>\n<label class=\"nxt-dt-timer-content\">\n <input class=\"nxt-dt-timer-input\"\n maxlength=\"2\"\n [value]=\"displayValue | numberFixedLen : 2\"\n (input)=\"handleInputChange(valueInput.value)\"\n #valueInput>\n <span class=\"nxt-hidden-accessible\">{{inputLabel}}</span>\n</label>\n<button class=\"nxt-dt-control-button nxt-dt-control-arrow-button\"\n type=\"button\"\n tabindex=\"-1\"\n [disabled]=\"downBtnDisabled\"\n [attr.aria-label]=\"downBtnAriaLabel\"\n (click)=\"downBtnClicked()\">\n <span class=\"nxt-dt-control-button-content\"\n tabindex=\"-1\">\n <!-- <editor-fold desc=\"SVG Arrow Down\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n version=\"1.1\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 451.847 451.846\"\n style=\"enable-background:new 0 0 451.847 451.846;\"\n xml:space=\"preserve\"\n width=\"100%\"\n height=\"100%\">\n <path d=\"M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751\n c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0\n c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z\" />\n </svg>\n <!-- </editor-fold> -->\n </span>\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: NumberFixedLenPipe, name: "numberFixedLen" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2008
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: TimerBoxComponent, decorators: [{
|
|
2041
2009
|
type: Component,
|
|
2042
|
-
args: [{
|
|
2010
|
+
args: [{ selector: 'nxt-date-time-timer-box', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"showDivider\"\n class=\"nxt-dt-timer-divider\"\n aria-hidden=\"true\"></div>\n<button class=\"nxt-dt-control-button nxt-dt-control-arrow-button\"\n type=\"button\"\n tabindex=\"-1\"\n [disabled]=\"upBtnDisabled\"\n [attr.aria-label]=\"upBtnAriaLabel\"\n (click)=\"upBtnClicked()\">\n <span class=\"nxt-dt-control-button-content\"\n tabindex=\"-1\">\n <!-- <editor-fold desc=\"SVG Arrow Up\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n version=\"1.1\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 451.847 451.846\"\n style=\"enable-background:new 0 0 451.847 451.846;\"\n xml:space=\"preserve\"\n width=\"100%\"\n height=\"100%\">\n <path d=\"M248.292,106.406l194.281,194.29c12.365,12.359,12.365,32.391,0,44.744c-12.354,12.354-32.391,12.354-44.744,0\n L225.923,173.529L54.018,345.44c-12.36,12.354-32.395,12.354-44.748,0c-12.359-12.354-12.359-32.391,0-44.75L203.554,106.4\n c6.18-6.174,14.271-9.259,22.369-9.259C234.018,97.141,242.115,100.232,248.292,106.406z\" />\n </svg>\n <!-- </editor-fold> -->\n </span>\n</button>\n<label class=\"nxt-dt-timer-content\">\n <input class=\"nxt-dt-timer-input\"\n maxlength=\"2\"\n [value]=\"displayValue | numberFixedLen : 2\"\n (input)=\"handleInputChange(valueInput.value)\"\n #valueInput>\n <span class=\"nxt-hidden-accessible\">{{inputLabel}}</span>\n</label>\n<button class=\"nxt-dt-control-button nxt-dt-control-arrow-button\"\n type=\"button\"\n tabindex=\"-1\"\n [disabled]=\"downBtnDisabled\"\n [attr.aria-label]=\"downBtnAriaLabel\"\n (click)=\"downBtnClicked()\">\n <span class=\"nxt-dt-control-button-content\"\n tabindex=\"-1\">\n <!-- <editor-fold desc=\"SVG Arrow Down\"> -->\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n version=\"1.1\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 451.847 451.846\"\n style=\"enable-background:new 0 0 451.847 451.846;\"\n xml:space=\"preserve\"\n width=\"100%\"\n height=\"100%\">\n <path d=\"M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751\n c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0\n c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z\" />\n </svg>\n <!-- </editor-fold> -->\n </span>\n</button>\n" }]
|
|
2043
2011
|
}], ctorParameters: function () { return []; }, propDecorators: { showDivider: [{
|
|
2044
2012
|
type: Input
|
|
2045
2013
|
}], upBtnAriaLabel: [{
|
|
@@ -2066,52 +2034,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
2066
2034
|
type: Output
|
|
2067
2035
|
}], inputChange: [{
|
|
2068
2036
|
type: Output
|
|
2069
|
-
}],
|
|
2037
|
+
}], timerBoxClass: [{
|
|
2070
2038
|
type: HostBinding,
|
|
2071
|
-
args: ['class.
|
|
2039
|
+
args: ['class.nxt-dt-timer-box']
|
|
2072
2040
|
}] } });
|
|
2073
2041
|
|
|
2074
|
-
class
|
|
2075
|
-
constructor(ngZone, elmRef, pickerIntl, cdRef, dateTimeAdapter) {
|
|
2076
|
-
this.ngZone = ngZone;
|
|
2077
|
-
this.elmRef = elmRef;
|
|
2078
|
-
this.pickerIntl = pickerIntl;
|
|
2079
|
-
this.cdRef = cdRef;
|
|
2080
|
-
this.dateTimeAdapter = dateTimeAdapter;
|
|
2081
|
-
this.isPM = false; // a flag indicates the current timer moment is in PM or AM
|
|
2082
|
-
/**
|
|
2083
|
-
* Hours to change per step
|
|
2084
|
-
*/
|
|
2085
|
-
this.stepHour = 1;
|
|
2086
|
-
/**
|
|
2087
|
-
* Minutes to change per step
|
|
2088
|
-
*/
|
|
2089
|
-
this.stepMinute = 1;
|
|
2090
|
-
/**
|
|
2091
|
-
* Seconds to change per step
|
|
2092
|
-
*/
|
|
2093
|
-
this.stepSecond = 1;
|
|
2094
|
-
this.selectedChange = new EventEmitter();
|
|
2095
|
-
}
|
|
2042
|
+
class TimerComponent {
|
|
2096
2043
|
get pickerMoment() {
|
|
2097
2044
|
return this._pickerMoment;
|
|
2098
2045
|
}
|
|
2099
2046
|
set pickerMoment(value) {
|
|
2100
2047
|
value = this.dateTimeAdapter.deserialize(value);
|
|
2101
|
-
this._pickerMoment =
|
|
2102
|
-
this.getValidDate(value) || this.dateTimeAdapter.now();
|
|
2048
|
+
this._pickerMoment = this.getValidDate(value) || this.dateTimeAdapter.now();
|
|
2103
2049
|
}
|
|
2104
|
-
get
|
|
2050
|
+
get min() {
|
|
2105
2051
|
return this._minDateTime;
|
|
2106
2052
|
}
|
|
2107
|
-
set
|
|
2053
|
+
set min(value) {
|
|
2108
2054
|
value = this.dateTimeAdapter.deserialize(value);
|
|
2109
2055
|
this._minDateTime = this.getValidDate(value);
|
|
2110
2056
|
}
|
|
2111
|
-
get
|
|
2057
|
+
get max() {
|
|
2112
2058
|
return this._maxDateTime;
|
|
2113
2059
|
}
|
|
2114
|
-
set
|
|
2060
|
+
set max(value) {
|
|
2115
2061
|
value = this.dateTimeAdapter.deserialize(value);
|
|
2116
2062
|
this._maxDateTime = this.getValidDate(value);
|
|
2117
2063
|
}
|
|
@@ -2175,12 +2121,41 @@ class OwlTimerComponent {
|
|
|
2175
2121
|
? this.pickerIntl.hour12PMLabel
|
|
2176
2122
|
: this.pickerIntl.hour12AMLabel;
|
|
2177
2123
|
}
|
|
2178
|
-
get
|
|
2124
|
+
get timerClass() {
|
|
2179
2125
|
return true;
|
|
2180
2126
|
}
|
|
2181
|
-
get
|
|
2127
|
+
get timeTabIndex() {
|
|
2182
2128
|
return -1;
|
|
2183
2129
|
}
|
|
2130
|
+
constructor(ngZone, elmRef, pickerIntl, cdRef, dateTimeAdapter) {
|
|
2131
|
+
this.ngZone = ngZone;
|
|
2132
|
+
this.elmRef = elmRef;
|
|
2133
|
+
this.pickerIntl = pickerIntl;
|
|
2134
|
+
this.cdRef = cdRef;
|
|
2135
|
+
this.dateTimeAdapter = dateTimeAdapter;
|
|
2136
|
+
this.isPM = false; // a flag indicates the current timer moment is in PM or AM
|
|
2137
|
+
/**
|
|
2138
|
+
* Whether to show the second's timer
|
|
2139
|
+
*/
|
|
2140
|
+
this.showSecondsTimer = false;
|
|
2141
|
+
/**
|
|
2142
|
+
* Whether the timer is in hour12 format
|
|
2143
|
+
*/
|
|
2144
|
+
this.hour12Timer = false;
|
|
2145
|
+
/**
|
|
2146
|
+
* Hours to change per step
|
|
2147
|
+
*/
|
|
2148
|
+
this.stepHour = 1;
|
|
2149
|
+
/**
|
|
2150
|
+
* Minutes to change per step
|
|
2151
|
+
*/
|
|
2152
|
+
this.stepMinute = 1;
|
|
2153
|
+
/**
|
|
2154
|
+
* Seconds to change per step
|
|
2155
|
+
*/
|
|
2156
|
+
this.stepSecond = 1;
|
|
2157
|
+
this.selectedChange = new EventEmitter();
|
|
2158
|
+
}
|
|
2184
2159
|
ngOnInit() { }
|
|
2185
2160
|
/**
|
|
2186
2161
|
* Focus to the host element
|
|
@@ -2242,43 +2217,43 @@ class OwlTimerComponent {
|
|
|
2242
2217
|
* Check if the up hour button is enabled
|
|
2243
2218
|
*/
|
|
2244
2219
|
upHourEnabled() {
|
|
2245
|
-
return (!this.
|
|
2246
|
-
this.compareHours(this.stepHour, this.
|
|
2220
|
+
return (!this.max ||
|
|
2221
|
+
this.compareHours(this.stepHour, this.max) < 1);
|
|
2247
2222
|
}
|
|
2248
2223
|
/**
|
|
2249
2224
|
* Check if the down hour button is enabled
|
|
2250
2225
|
*/
|
|
2251
2226
|
downHourEnabled() {
|
|
2252
|
-
return (!this.
|
|
2253
|
-
this.compareHours(-this.stepHour, this.
|
|
2227
|
+
return (!this.min ||
|
|
2228
|
+
this.compareHours(-this.stepHour, this.min) > -1);
|
|
2254
2229
|
}
|
|
2255
2230
|
/**
|
|
2256
2231
|
* Check if the up minute button is enabled
|
|
2257
2232
|
*/
|
|
2258
2233
|
upMinuteEnabled() {
|
|
2259
|
-
return (!this.
|
|
2260
|
-
this.compareMinutes(this.stepMinute, this.
|
|
2234
|
+
return (!this.max ||
|
|
2235
|
+
this.compareMinutes(this.stepMinute, this.max) < 1);
|
|
2261
2236
|
}
|
|
2262
2237
|
/**
|
|
2263
2238
|
* Check if the down minute button is enabled
|
|
2264
2239
|
*/
|
|
2265
2240
|
downMinuteEnabled() {
|
|
2266
|
-
return (!this.
|
|
2267
|
-
this.compareMinutes(-this.stepMinute, this.
|
|
2241
|
+
return (!this.min ||
|
|
2242
|
+
this.compareMinutes(-this.stepMinute, this.min) > -1);
|
|
2268
2243
|
}
|
|
2269
2244
|
/**
|
|
2270
2245
|
* Check if the up second button is enabled
|
|
2271
2246
|
*/
|
|
2272
2247
|
upSecondEnabled() {
|
|
2273
|
-
return (!this.
|
|
2274
|
-
this.compareSeconds(this.stepSecond, this.
|
|
2248
|
+
return (!this.max ||
|
|
2249
|
+
this.compareSeconds(this.stepSecond, this.max) < 1);
|
|
2275
2250
|
}
|
|
2276
2251
|
/**
|
|
2277
2252
|
* Check if the down second button is enabled
|
|
2278
2253
|
*/
|
|
2279
2254
|
downSecondEnabled() {
|
|
2280
|
-
return (!this.
|
|
2281
|
-
this.compareSeconds(-this.stepSecond, this.
|
|
2255
|
+
return (!this.min ||
|
|
2256
|
+
this.compareSeconds(-this.stepSecond, this.min) > -1);
|
|
2282
2257
|
}
|
|
2283
2258
|
/**
|
|
2284
2259
|
* PickerMoment's hour value +/- certain amount and compare it to the give date
|
|
@@ -2320,23 +2295,19 @@ class OwlTimerComponent {
|
|
|
2320
2295
|
return this.dateTimeAdapter.isDateInstance(obj) &&
|
|
2321
2296
|
this.dateTimeAdapter.isValid(obj)
|
|
2322
2297
|
? obj
|
|
2323
|
-
:
|
|
2298
|
+
: undefined;
|
|
2324
2299
|
}
|
|
2325
2300
|
}
|
|
2326
|
-
|
|
2327
|
-
|
|
2328
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2301
|
+
TimerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: TimerComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: DateTimeIntl }, { token: i0.ChangeDetectorRef }, { token: DateTimeAdapter }], target: i0.ɵɵFactoryTarget.Component });
|
|
2302
|
+
TimerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: TimerComponent, selector: "nxt-date-time-timer", inputs: { pickerMoment: "pickerMoment", min: "min", max: "max", showSecondsTimer: "showSecondsTimer", hour12Timer: "hour12Timer", stepHour: "stepHour", stepMinute: "stepMinute", stepSecond: "stepSecond" }, outputs: { selectedChange: "selectedChange" }, host: { properties: { "class.nxt-dt-timer": "this.timerClass", "attr.tabindex": "this.timeTabIndex" } }, ngImport: i0, template: "<nxt-date-time-timer-box [upBtnAriaLabel]=\"upHourButtonLabel\"\n [downBtnAriaLabel]=\"downHourButtonLabel\"\n [upBtnDisabled]=\"!upHourEnabled()\"\n [downBtnDisabled]=\"!downHourEnabled()\"\n [boxValue]=\"hourBoxValue\"\n [value]=\"hourValue\"\n [min]=\"0\"\n [max]=\"23\"\n [step]=\"stepHour\"\n inputLabel=\"Hour\"\n (inputChange)=\"setHourValueViaInput($event)\"\n (valueChange)=\"setHourValue($event)\"></nxt-date-time-timer-box>\n<nxt-date-time-timer-box [showDivider]=\"true\"\n [upBtnAriaLabel]=\"upMinuteButtonLabel\"\n [downBtnAriaLabel]=\"downMinuteButtonLabel\"\n [upBtnDisabled]=\"!upMinuteEnabled()\"\n [downBtnDisabled]=\"!downMinuteEnabled()\"\n [value]=\"minuteValue\"\n [min]=\"0\"\n [max]=\"59\"\n [step]=\"stepMinute\"\n inputLabel=\"Minute\"\n (inputChange)=\"setMinuteValue($event)\"\n (valueChange)=\"setMinuteValue($event)\"></nxt-date-time-timer-box>\n<nxt-date-time-timer-box *ngIf=\"showSecondsTimer\"\n [showDivider]=\"true\"\n [upBtnAriaLabel]=\"upSecondButtonLabel\"\n [downBtnAriaLabel]=\"downSecondButtonLabel\"\n [upBtnDisabled]=\"!upSecondEnabled()\"\n [downBtnDisabled]=\"!downSecondEnabled()\"\n [value]=\"secondValue\"\n [min]=\"0\"\n [max]=\"59\"\n [step]=\"stepSecond\"\n inputLabel=\"Second\"\n (inputChange)=\"setSecondValue($event)\"\n (valueChange)=\"setSecondValue($event)\"></nxt-date-time-timer-box>\n\n<div *ngIf=\"hour12Timer\"\n class=\"nxt-dt-timer-hour12\">\n <button class=\"nxt-dt-control-button nxt-dt-timer-hour12-box\"\n type=\"button\"\n tabindex=\"0\"\n (click)=\"setMeridiem($event)\">\n <span class=\"nxt-dt-control-button-content\"\n tabindex=\"-1\">\n {{hour12ButtonLabel}}\n </span>\n </button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TimerBoxComponent, selector: "nxt-date-time-timer-box", inputs: ["showDivider", "upBtnAriaLabel", "upBtnDisabled", "downBtnAriaLabel", "downBtnDisabled", "boxValue", "value", "min", "max", "step", "inputLabel"], outputs: ["valueChange", "inputChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2303
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: TimerComponent, decorators: [{
|
|
2329
2304
|
type: Component,
|
|
2330
|
-
args: [{
|
|
2331
|
-
}], ctorParameters: function () {
|
|
2332
|
-
return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: OwlDateTimeIntl }, { type: i0.ChangeDetectorRef }, { type: DateTimeAdapter, decorators: [{
|
|
2333
|
-
type: Optional
|
|
2334
|
-
}] }];
|
|
2335
|
-
}, propDecorators: { pickerMoment: [{
|
|
2305
|
+
args: [{ selector: 'nxt-date-time-timer', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nxt-date-time-timer-box [upBtnAriaLabel]=\"upHourButtonLabel\"\n [downBtnAriaLabel]=\"downHourButtonLabel\"\n [upBtnDisabled]=\"!upHourEnabled()\"\n [downBtnDisabled]=\"!downHourEnabled()\"\n [boxValue]=\"hourBoxValue\"\n [value]=\"hourValue\"\n [min]=\"0\"\n [max]=\"23\"\n [step]=\"stepHour\"\n inputLabel=\"Hour\"\n (inputChange)=\"setHourValueViaInput($event)\"\n (valueChange)=\"setHourValue($event)\"></nxt-date-time-timer-box>\n<nxt-date-time-timer-box [showDivider]=\"true\"\n [upBtnAriaLabel]=\"upMinuteButtonLabel\"\n [downBtnAriaLabel]=\"downMinuteButtonLabel\"\n [upBtnDisabled]=\"!upMinuteEnabled()\"\n [downBtnDisabled]=\"!downMinuteEnabled()\"\n [value]=\"minuteValue\"\n [min]=\"0\"\n [max]=\"59\"\n [step]=\"stepMinute\"\n inputLabel=\"Minute\"\n (inputChange)=\"setMinuteValue($event)\"\n (valueChange)=\"setMinuteValue($event)\"></nxt-date-time-timer-box>\n<nxt-date-time-timer-box *ngIf=\"showSecondsTimer\"\n [showDivider]=\"true\"\n [upBtnAriaLabel]=\"upSecondButtonLabel\"\n [downBtnAriaLabel]=\"downSecondButtonLabel\"\n [upBtnDisabled]=\"!upSecondEnabled()\"\n [downBtnDisabled]=\"!downSecondEnabled()\"\n [value]=\"secondValue\"\n [min]=\"0\"\n [max]=\"59\"\n [step]=\"stepSecond\"\n inputLabel=\"Second\"\n (inputChange)=\"setSecondValue($event)\"\n (valueChange)=\"setSecondValue($event)\"></nxt-date-time-timer-box>\n\n<div *ngIf=\"hour12Timer\"\n class=\"nxt-dt-timer-hour12\">\n <button class=\"nxt-dt-control-button nxt-dt-timer-hour12-box\"\n type=\"button\"\n tabindex=\"0\"\n (click)=\"setMeridiem($event)\">\n <span class=\"nxt-dt-control-button-content\"\n tabindex=\"-1\">\n {{hour12ButtonLabel}}\n </span>\n </button>\n</div>\n" }]
|
|
2306
|
+
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: DateTimeIntl }, { type: i0.ChangeDetectorRef }, { type: DateTimeAdapter }]; }, propDecorators: { pickerMoment: [{
|
|
2336
2307
|
type: Input
|
|
2337
|
-
}],
|
|
2308
|
+
}], min: [{
|
|
2338
2309
|
type: Input
|
|
2339
|
-
}],
|
|
2310
|
+
}], max: [{
|
|
2340
2311
|
type: Input
|
|
2341
2312
|
}], showSecondsTimer: [{
|
|
2342
2313
|
type: Input
|
|
@@ -2350,15 +2321,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
2350
2321
|
type: Input
|
|
2351
2322
|
}], selectedChange: [{
|
|
2352
2323
|
type: Output
|
|
2353
|
-
}],
|
|
2324
|
+
}], timerClass: [{
|
|
2354
2325
|
type: HostBinding,
|
|
2355
|
-
args: ['class.
|
|
2356
|
-
}],
|
|
2326
|
+
args: ['class.nxt-dt-timer']
|
|
2327
|
+
}], timeTabIndex: [{
|
|
2357
2328
|
type: HostBinding,
|
|
2358
2329
|
args: ['attr.tabindex']
|
|
2359
2330
|
}] } });
|
|
2360
2331
|
|
|
2361
|
-
const
|
|
2332
|
+
const dateTimePickerAnimations = {
|
|
2362
2333
|
transformPicker: trigger('transformPicker', [
|
|
2363
2334
|
state('void', style({ opacity: 0, transform: 'scale(1, 0)' })),
|
|
2364
2335
|
state('enter', style({ opacity: 1, transform: 'scale(1, 1)' })),
|
|
@@ -2375,43 +2346,20 @@ const owlDateTimePickerAnimations = {
|
|
|
2375
2346
|
])
|
|
2376
2347
|
};
|
|
2377
2348
|
|
|
2378
|
-
class
|
|
2379
|
-
constructor(cdRef, elmRef, pickerIntl, dateTimeAdapter) {
|
|
2380
|
-
this.cdRef = cdRef;
|
|
2381
|
-
this.elmRef = elmRef;
|
|
2382
|
-
this.pickerIntl = pickerIntl;
|
|
2383
|
-
this.dateTimeAdapter = dateTimeAdapter;
|
|
2384
|
-
this.activeSelectedIndex = 0; // The current active SelectedIndex in range select mode (0: 'from', 1: 'to')
|
|
2385
|
-
/**
|
|
2386
|
-
* Stream emits when try to hide picker
|
|
2387
|
-
* */
|
|
2388
|
-
this.hidePicker$ = new Subject();
|
|
2389
|
-
/**
|
|
2390
|
-
* Stream emits when try to confirm the selected value
|
|
2391
|
-
* */
|
|
2392
|
-
this.confirmSelected$ = new Subject();
|
|
2393
|
-
this.pickerOpened$ = new Subject();
|
|
2394
|
-
}
|
|
2395
|
-
get hidePickerStream() {
|
|
2396
|
-
return this.hidePicker$.asObservable();
|
|
2397
|
-
}
|
|
2398
|
-
get confirmSelectedStream() {
|
|
2399
|
-
return this.confirmSelected$.asObservable();
|
|
2400
|
-
}
|
|
2401
|
-
get pickerOpenedStream() {
|
|
2402
|
-
return this.pickerOpened$.asObservable();
|
|
2403
|
-
}
|
|
2349
|
+
class DateTimeContainerComponent {
|
|
2404
2350
|
get pickerMoment() {
|
|
2405
2351
|
return this._clamPickerMoment;
|
|
2406
2352
|
}
|
|
2407
2353
|
set pickerMoment(value) {
|
|
2354
|
+
var _a, _b;
|
|
2408
2355
|
if (value) {
|
|
2409
|
-
this._clamPickerMoment = this.dateTimeAdapter.clampDate(value, this.picker.
|
|
2356
|
+
this._clamPickerMoment = this.dateTimeAdapter.clampDate(value, (_a = this.picker) === null || _a === void 0 ? void 0 : _a.min, (_b = this.picker) === null || _b === void 0 ? void 0 : _b.max);
|
|
2410
2357
|
}
|
|
2411
2358
|
this.cdRef.markForCheck();
|
|
2412
2359
|
}
|
|
2413
2360
|
get pickerType() {
|
|
2414
|
-
|
|
2361
|
+
var _a;
|
|
2362
|
+
return (_a = this.picker) === null || _a === void 0 ? void 0 : _a.pickerType;
|
|
2415
2363
|
}
|
|
2416
2364
|
get cancelLabel() {
|
|
2417
2365
|
return this.pickerIntl.cancelBtnLabel;
|
|
@@ -2435,18 +2383,20 @@ class OwlDateTimeContainerComponent {
|
|
|
2435
2383
|
* The range 'from' formatted value
|
|
2436
2384
|
* */
|
|
2437
2385
|
get fromFormattedValue() {
|
|
2438
|
-
|
|
2386
|
+
var _a, _b;
|
|
2387
|
+
const value = (_a = this.picker) === null || _a === void 0 ? void 0 : _a.selecteds[0];
|
|
2439
2388
|
return value
|
|
2440
|
-
? this.dateTimeAdapter.format(value, this.picker.formatString)
|
|
2389
|
+
? this.dateTimeAdapter.format(value, (_b = this.picker) === null || _b === void 0 ? void 0 : _b.formatString)
|
|
2441
2390
|
: '';
|
|
2442
2391
|
}
|
|
2443
2392
|
/**
|
|
2444
2393
|
* The range 'to' formatted value
|
|
2445
2394
|
* */
|
|
2446
2395
|
get toFormattedValue() {
|
|
2447
|
-
|
|
2396
|
+
var _a, _b;
|
|
2397
|
+
const value = (_a = this.picker) === null || _a === void 0 ? void 0 : _a.selecteds[1];
|
|
2448
2398
|
return value
|
|
2449
|
-
? this.dateTimeAdapter.format(value, this.picker.formatString)
|
|
2399
|
+
? this.dateTimeAdapter.format(value, (_b = this.picker) === null || _b === void 0 ? void 0 : _b.formatString)
|
|
2450
2400
|
: '';
|
|
2451
2401
|
}
|
|
2452
2402
|
/**
|
|
@@ -2455,33 +2405,59 @@ class OwlDateTimeContainerComponent {
|
|
|
2455
2405
|
* 2) picker type is NOT 'calendar' and the picker mode is NOT 'inline'
|
|
2456
2406
|
* */
|
|
2457
2407
|
get showControlButtons() {
|
|
2458
|
-
|
|
2459
|
-
|
|
2460
|
-
|
|
2408
|
+
var _a, _b, _c;
|
|
2409
|
+
return (((_a = this.picker) === null || _a === void 0 ? void 0 : _a.pickerMode) === 'dialog' ||
|
|
2410
|
+
(((_b = this.picker) === null || _b === void 0 ? void 0 : _b.pickerType) !== 'calendar' &&
|
|
2411
|
+
((_c = this.picker) === null || _c === void 0 ? void 0 : _c.pickerMode) !== 'inline'));
|
|
2461
2412
|
}
|
|
2462
2413
|
get containerElm() {
|
|
2463
2414
|
return this.elmRef.nativeElement;
|
|
2464
2415
|
}
|
|
2465
|
-
get
|
|
2416
|
+
get containerClass() {
|
|
2466
2417
|
return true;
|
|
2467
2418
|
}
|
|
2468
|
-
get
|
|
2469
|
-
|
|
2419
|
+
get popupContainerClass() {
|
|
2420
|
+
var _a;
|
|
2421
|
+
return ((_a = this.picker) === null || _a === void 0 ? void 0 : _a.pickerMode) === 'popup';
|
|
2470
2422
|
}
|
|
2471
|
-
get
|
|
2472
|
-
|
|
2423
|
+
get dialogContainerClass() {
|
|
2424
|
+
var _a;
|
|
2425
|
+
return ((_a = this.picker) === null || _a === void 0 ? void 0 : _a.pickerMode) === 'dialog';
|
|
2473
2426
|
}
|
|
2474
|
-
get
|
|
2475
|
-
|
|
2427
|
+
get inlineContainerClass() {
|
|
2428
|
+
var _a;
|
|
2429
|
+
return ((_a = this.picker) === null || _a === void 0 ? void 0 : _a.pickerMode) === 'inline';
|
|
2476
2430
|
}
|
|
2477
|
-
get
|
|
2478
|
-
|
|
2431
|
+
get containerDisabledClass() {
|
|
2432
|
+
var _a;
|
|
2433
|
+
return !!((_a = this.picker) === null || _a === void 0 ? void 0 : _a.disabled);
|
|
2479
2434
|
}
|
|
2480
|
-
get
|
|
2481
|
-
|
|
2435
|
+
get containerId() {
|
|
2436
|
+
var _a;
|
|
2437
|
+
return (_a = this.picker) === null || _a === void 0 ? void 0 : _a.id;
|
|
2482
2438
|
}
|
|
2483
|
-
get
|
|
2484
|
-
|
|
2439
|
+
get containerAnimation() {
|
|
2440
|
+
var _a;
|
|
2441
|
+
return ((_a = this.picker) === null || _a === void 0 ? void 0 : _a.pickerMode) === 'inline' ? '' : 'enter';
|
|
2442
|
+
}
|
|
2443
|
+
constructor(cdRef, elmRef, pickerIntl, dateTimeAdapter) {
|
|
2444
|
+
this.cdRef = cdRef;
|
|
2445
|
+
this.elmRef = elmRef;
|
|
2446
|
+
this.pickerIntl = pickerIntl;
|
|
2447
|
+
this.dateTimeAdapter = dateTimeAdapter;
|
|
2448
|
+
this.activeSelectedIndex = 0; // The current active SelectedIndex in range select mode (0: 'from', 1: 'to')
|
|
2449
|
+
/**
|
|
2450
|
+
* Stream emits when try to hide picker
|
|
2451
|
+
* */
|
|
2452
|
+
this.hidePicker$ = new Subject();
|
|
2453
|
+
this.hidePickerStream = this.hidePicker$.asObservable();
|
|
2454
|
+
/**
|
|
2455
|
+
* Stream emits when try to confirm the selected value
|
|
2456
|
+
* */
|
|
2457
|
+
this.confirmSelected$ = new Subject();
|
|
2458
|
+
this.confirmSelectedStream = this.confirmSelected$.asObservable();
|
|
2459
|
+
this.pickerOpened$ = new Subject();
|
|
2460
|
+
this.pickerOpenedStream = this.pickerOpened$.asObservable();
|
|
2485
2461
|
}
|
|
2486
2462
|
ngOnInit() { }
|
|
2487
2463
|
ngAfterContentInit() {
|
|
@@ -2493,26 +2469,27 @@ class OwlDateTimeContainerComponent {
|
|
|
2493
2469
|
handleContainerAnimationDone(event) {
|
|
2494
2470
|
const toState = event.toState;
|
|
2495
2471
|
if (toState === 'enter') {
|
|
2496
|
-
this.pickerOpened$.next(
|
|
2472
|
+
this.pickerOpened$.next();
|
|
2497
2473
|
}
|
|
2498
2474
|
}
|
|
2499
2475
|
dateSelected(date) {
|
|
2476
|
+
var _a, _b;
|
|
2500
2477
|
let result;
|
|
2501
|
-
if (this.picker.isInSingleMode) {
|
|
2478
|
+
if ((_a = this.picker) === null || _a === void 0 ? void 0 : _a.isInSingleMode) {
|
|
2502
2479
|
result = this.dateSelectedInSingleMode(date);
|
|
2503
2480
|
if (result) {
|
|
2504
2481
|
this.pickerMoment = result;
|
|
2505
2482
|
this.picker.select(result);
|
|
2506
2483
|
}
|
|
2507
2484
|
else {
|
|
2508
|
-
// we close the picker when result is
|
|
2485
|
+
// we close the picker when result is undefined and pickerType is calendar.
|
|
2509
2486
|
if (this.pickerType === 'calendar') {
|
|
2510
|
-
this.hidePicker$.next(
|
|
2487
|
+
this.hidePicker$.next();
|
|
2511
2488
|
}
|
|
2512
2489
|
}
|
|
2513
2490
|
return;
|
|
2514
2491
|
}
|
|
2515
|
-
if (this.picker.isInRangeMode) {
|
|
2492
|
+
if ((_b = this.picker) === null || _b === void 0 ? void 0 : _b.isInRangeMode) {
|
|
2516
2493
|
result = this.dateSelectedInRangeMode(date);
|
|
2517
2494
|
if (result) {
|
|
2518
2495
|
this.pickerMoment = result[this.activeSelectedIndex];
|
|
@@ -2521,8 +2498,9 @@ class OwlDateTimeContainerComponent {
|
|
|
2521
2498
|
}
|
|
2522
2499
|
}
|
|
2523
2500
|
timeSelected(time) {
|
|
2501
|
+
var _a, _b;
|
|
2524
2502
|
this.pickerMoment = this.dateTimeAdapter.clone(time);
|
|
2525
|
-
if (!this.picker.dateTimeChecker(this.pickerMoment)) {
|
|
2503
|
+
if (!((_a = this.picker) === null || _a === void 0 ? void 0 : _a.dateTimeChecker(this.pickerMoment))) {
|
|
2526
2504
|
return;
|
|
2527
2505
|
}
|
|
2528
2506
|
if (this.picker.isInSingleMode) {
|
|
@@ -2530,7 +2508,7 @@ class OwlDateTimeContainerComponent {
|
|
|
2530
2508
|
return;
|
|
2531
2509
|
}
|
|
2532
2510
|
if (this.picker.isInRangeMode) {
|
|
2533
|
-
const selecteds = [...this.picker.selecteds];
|
|
2511
|
+
const selecteds = [...((_b = this.picker) === null || _b === void 0 ? void 0 : _b.selecteds) || []];
|
|
2534
2512
|
// check if the 'from' is after 'to' or 'to'is before 'from'
|
|
2535
2513
|
// In this case, we set both the 'from' and 'to' the same value
|
|
2536
2514
|
if ((this.activeSelectedIndex === 0 &&
|
|
@@ -2552,7 +2530,7 @@ class OwlDateTimeContainerComponent {
|
|
|
2552
2530
|
* Handle click on cancel button
|
|
2553
2531
|
*/
|
|
2554
2532
|
onCancelClicked(event) {
|
|
2555
|
-
this.hidePicker$.next(
|
|
2533
|
+
this.hidePicker$.next();
|
|
2556
2534
|
event.preventDefault();
|
|
2557
2535
|
return;
|
|
2558
2536
|
}
|
|
@@ -2560,8 +2538,9 @@ class OwlDateTimeContainerComponent {
|
|
|
2560
2538
|
* Handle click on set button
|
|
2561
2539
|
*/
|
|
2562
2540
|
onSetClicked(event) {
|
|
2563
|
-
|
|
2564
|
-
|
|
2541
|
+
var _a, _b;
|
|
2542
|
+
if (!((_b = (_a = this.picker) === null || _a === void 0 ? void 0 : _a.dateTimeChecker) === null || _b === void 0 ? void 0 : _b.call(_a, this.pickerMoment))) {
|
|
2543
|
+
this.hidePicker$.next();
|
|
2565
2544
|
event.preventDefault();
|
|
2566
2545
|
return;
|
|
2567
2546
|
}
|
|
@@ -2604,10 +2583,11 @@ class OwlDateTimeContainerComponent {
|
|
|
2604
2583
|
* Set the value of activeSelectedIndex
|
|
2605
2584
|
*/
|
|
2606
2585
|
setActiveSelectedIndex(index) {
|
|
2607
|
-
|
|
2586
|
+
var _a, _b;
|
|
2587
|
+
if (((_a = this.picker) === null || _a === void 0 ? void 0 : _a.selectMode) === 'range' &&
|
|
2608
2588
|
this.activeSelectedIndex !== index) {
|
|
2609
2589
|
this.activeSelectedIndex = index;
|
|
2610
|
-
const selected = this.picker.selecteds[this.activeSelectedIndex];
|
|
2590
|
+
const selected = (_b = this.picker) === null || _b === void 0 ? void 0 : _b.selecteds[this.activeSelectedIndex];
|
|
2611
2591
|
if (this.picker.selecteds && selected) {
|
|
2612
2592
|
this.pickerMoment = this.dateTimeAdapter.clone(selected);
|
|
2613
2593
|
}
|
|
@@ -2615,16 +2595,18 @@ class OwlDateTimeContainerComponent {
|
|
|
2615
2595
|
return;
|
|
2616
2596
|
}
|
|
2617
2597
|
initPicker() {
|
|
2618
|
-
|
|
2619
|
-
this.
|
|
2598
|
+
var _a, _b;
|
|
2599
|
+
this.pickerMoment = ((_a = this.picker) === null || _a === void 0 ? void 0 : _a.startAt) || this.dateTimeAdapter.now();
|
|
2600
|
+
this.activeSelectedIndex = ((_b = this.picker) === null || _b === void 0 ? void 0 : _b.selectMode) === 'rangeTo' ? 1 : 0;
|
|
2620
2601
|
}
|
|
2621
2602
|
/**
|
|
2622
2603
|
* Select calendar date in single mode,
|
|
2623
|
-
* it returns
|
|
2604
|
+
* it returns undefined when date is not selected.
|
|
2624
2605
|
*/
|
|
2625
2606
|
dateSelectedInSingleMode(date) {
|
|
2626
|
-
|
|
2627
|
-
|
|
2607
|
+
var _a;
|
|
2608
|
+
if (this.dateTimeAdapter.isSameDay(date, (_a = this.picker) === null || _a === void 0 ? void 0 : _a.selected)) {
|
|
2609
|
+
return undefined;
|
|
2628
2610
|
}
|
|
2629
2611
|
return this.updateAndCheckCalendarDate(date);
|
|
2630
2612
|
}
|
|
@@ -2632,42 +2614,43 @@ class OwlDateTimeContainerComponent {
|
|
|
2632
2614
|
* Select dates in range Mode
|
|
2633
2615
|
*/
|
|
2634
2616
|
dateSelectedInRangeMode(date) {
|
|
2635
|
-
|
|
2636
|
-
let
|
|
2617
|
+
var _a, _b, _c, _d, _e, _f;
|
|
2618
|
+
let from = (_a = this.picker) === null || _a === void 0 ? void 0 : _a.selecteds[0];
|
|
2619
|
+
let to = (_b = this.picker) === null || _b === void 0 ? void 0 : _b.selecteds[1];
|
|
2637
2620
|
const result = this.updateAndCheckCalendarDate(date);
|
|
2638
2621
|
if (!result) {
|
|
2639
|
-
return
|
|
2622
|
+
return;
|
|
2640
2623
|
}
|
|
2641
2624
|
// if the given calendar day is after or equal to 'from',
|
|
2642
2625
|
// set ths given date as 'to'
|
|
2643
|
-
// otherwise, set it as 'from' and set 'to' to
|
|
2644
|
-
if (this.picker.selectMode === 'range') {
|
|
2626
|
+
// otherwise, set it as 'from' and set 'to' to undefined
|
|
2627
|
+
if (((_c = this.picker) === null || _c === void 0 ? void 0 : _c.selectMode) === 'range') {
|
|
2645
2628
|
if (this.picker.selecteds &&
|
|
2646
2629
|
this.picker.selecteds.length &&
|
|
2647
2630
|
!to &&
|
|
2648
2631
|
from &&
|
|
2649
|
-
this.dateTimeAdapter.differenceInCalendarDays(result, from) >= 0) {
|
|
2632
|
+
((_d = this.dateTimeAdapter.differenceInCalendarDays(result, from)) !== null && _d !== void 0 ? _d : 0) >= 0) {
|
|
2650
2633
|
to = result;
|
|
2651
2634
|
this.activeSelectedIndex = 1;
|
|
2652
2635
|
}
|
|
2653
2636
|
else {
|
|
2654
2637
|
from = result;
|
|
2655
|
-
to =
|
|
2638
|
+
to = undefined;
|
|
2656
2639
|
this.activeSelectedIndex = 0;
|
|
2657
2640
|
}
|
|
2658
2641
|
}
|
|
2659
|
-
else if (this.picker.selectMode === 'rangeFrom') {
|
|
2642
|
+
else if (((_e = this.picker) === null || _e === void 0 ? void 0 : _e.selectMode) === 'rangeFrom') {
|
|
2660
2643
|
from = result;
|
|
2661
|
-
// if the from value is after the to value, set the to value as
|
|
2644
|
+
// if the from value is after the to value, set the to value as undefined
|
|
2662
2645
|
if (to && this.dateTimeAdapter.compare(from, to) > 0) {
|
|
2663
|
-
to =
|
|
2646
|
+
to = undefined;
|
|
2664
2647
|
}
|
|
2665
2648
|
}
|
|
2666
|
-
else if (this.picker.selectMode === 'rangeTo') {
|
|
2649
|
+
else if (((_f = this.picker) === null || _f === void 0 ? void 0 : _f.selectMode) === 'rangeTo') {
|
|
2667
2650
|
to = result;
|
|
2668
|
-
// if the from value is after the to value, set the from value as
|
|
2651
|
+
// if the from value is after the to value, set the from value as undefined
|
|
2669
2652
|
if (from && this.dateTimeAdapter.compare(from, to) > 0) {
|
|
2670
|
-
from =
|
|
2653
|
+
from = undefined;
|
|
2671
2654
|
}
|
|
2672
2655
|
}
|
|
2673
2656
|
return [from, to];
|
|
@@ -2677,26 +2660,28 @@ class OwlDateTimeContainerComponent {
|
|
|
2677
2660
|
* Because the calendar date has 00:00:00 as default time, if the picker type is 'both',
|
|
2678
2661
|
* we need to update the given calendar date's time before selecting it.
|
|
2679
2662
|
* if it is valid, return the updated dateTime
|
|
2680
|
-
* if it is not valid, return
|
|
2663
|
+
* if it is not valid, return undefined
|
|
2681
2664
|
*/
|
|
2682
2665
|
updateAndCheckCalendarDate(date) {
|
|
2666
|
+
var _a, _b;
|
|
2683
2667
|
let result;
|
|
2684
2668
|
// if the picker is 'both', update the calendar date's time value
|
|
2685
|
-
if (this.picker.pickerType === 'both') {
|
|
2669
|
+
if (((_a = this.picker) === null || _a === void 0 ? void 0 : _a.pickerType) === 'both') {
|
|
2686
2670
|
result = this.dateTimeAdapter.createDate(this.dateTimeAdapter.getYear(date), this.dateTimeAdapter.getMonth(date), this.dateTimeAdapter.getDate(date), this.dateTimeAdapter.getHours(this.pickerMoment), this.dateTimeAdapter.getMinutes(this.pickerMoment), this.dateTimeAdapter.getSeconds(this.pickerMoment));
|
|
2687
|
-
result = this.dateTimeAdapter.clampDate(result, this.picker.
|
|
2671
|
+
result = this.dateTimeAdapter.clampDate(result, this.picker.min, this.picker.max);
|
|
2688
2672
|
}
|
|
2689
2673
|
else {
|
|
2690
2674
|
result = this.dateTimeAdapter.clone(date);
|
|
2691
2675
|
}
|
|
2692
2676
|
// check the updated dateTime
|
|
2693
|
-
return this.picker.dateTimeChecker(result) ? result :
|
|
2677
|
+
return ((_b = this.picker) === null || _b === void 0 ? void 0 : _b.dateTimeChecker(result)) ? result : undefined;
|
|
2694
2678
|
}
|
|
2695
2679
|
/**
|
|
2696
2680
|
* Focus to the picker
|
|
2697
2681
|
* */
|
|
2698
2682
|
focusPicker() {
|
|
2699
|
-
|
|
2683
|
+
var _a;
|
|
2684
|
+
if (((_a = this.picker) === null || _a === void 0 ? void 0 : _a.pickerMode) === 'inline') {
|
|
2700
2685
|
return;
|
|
2701
2686
|
}
|
|
2702
2687
|
if (this.calendar) {
|
|
@@ -2707,46 +2692,42 @@ class OwlDateTimeContainerComponent {
|
|
|
2707
2692
|
}
|
|
2708
2693
|
}
|
|
2709
2694
|
}
|
|
2710
|
-
|
|
2711
|
-
|
|
2712
|
-
|
|
2713
|
-
|
|
2695
|
+
DateTimeContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: DateTimeContainerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: DateTimeIntl }, { token: DateTimeAdapter }], target: i0.ɵɵFactoryTarget.Component });
|
|
2696
|
+
DateTimeContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: DateTimeContainerComponent, selector: "nxt-date-time-container", host: { listeners: { "@transformPicker.done": "handleContainerAnimationDone($event)" }, properties: { "class.nxt-dt-container": "this.containerClass", "class.nxt-dt-popup-container": "this.popupContainerClass", "class.nxt-dt-dialog-container": "this.dialogContainerClass", "class.nxt-dt-inline-container": "this.inlineContainerClass", "class.nxt-dt-container-disabled": "this.containerDisabledClass", "attr.id": "this.containerId", "@transformPicker": "this.containerAnimation" } }, viewQueries: [{ propertyName: "calendar", first: true, predicate: CalendarComponent, descendants: true }, { propertyName: "timer", first: true, predicate: TimerComponent, descendants: true }], ngImport: i0, template: "<div [cdkTrapFocus]=\"picker?.pickerMode !== 'inline'\"\n [@fadeInPicker]=\"picker?.pickerMode === 'inline'? '' : 'enter'\"\n class=\"nxt-dt-container-inner\">\n\n <nxt-date-time-calendar *ngIf=\"pickerType === 'both' || pickerType === 'calendar'\"\n class=\"nxt-dt-container-row\"\n [firstDayOfWeek]=\"picker?.firstDayOfWeek ?? 0\"\n [(pickerMoment)]=\"pickerMoment\"\n [selected]=\"picker?.selected\"\n [selecteds]=\"picker?.selecteds ?? []\"\n [selectMode]=\"picker?.selectMode\"\n [min]=\"picker?.min\"\n [max]=\"picker?.max\"\n [dateFilter]=\"picker?.dateTimeFilter\"\n [startView]=\"picker?.startView ?? 'month'\"\n [hideOtherMonths]=\"!!picker?.hideOtherMonths\"\n (yearSelected)=\"picker?.selectYear($event)\"\n (monthSelected)=\"picker?.selectMonth($event)\"\n (selectedChange)=\"dateSelected($event)\"></nxt-date-time-calendar>\n\n <nxt-date-time-timer *ngIf=\"pickerType === 'both' || pickerType === 'timer'\"\n class=\"nxt-dt-container-row\"\n [pickerMoment]=\"pickerMoment\"\n [min]=\"picker?.min\"\n [max]=\"picker?.max\"\n [showSecondsTimer]=\"!!picker?.showSecondsTimer\"\n [hour12Timer]=\"!!picker?.hour12Timer\"\n [stepHour]=\"picker?.stepHour ?? 1\"\n [stepMinute]=\"picker?.stepMinute ?? 1\"\n [stepSecond]=\"picker?.stepSecond ?? 1\"\n (selectedChange)=\"timeSelected($event)\"></nxt-date-time-timer>\n\n <div *ngIf=\"picker?.isInRangeMode\"\n role=\"radiogroup\"\n class=\"nxt-dt-container-info nxt-dt-container-row\">\n <div role=\"radio\"\n [tabindex]=\"activeSelectedIndex === 0 ? 0 : -1\"\n [attr.aria-checked]=\"activeSelectedIndex === 0\"\n class=\"nxt-dt-control nxt-dt-container-range nxt-dt-container-from\"\n [ngClass]=\"{'nxt-dt-container-info-active': activeSelectedIndex === 0}\"\n (click)=\"handleClickOnInfoGroup($event, 0)\"\n (keydown)=\"handleKeydownOnInfoGroup($event, to, 0)\"\n #from>\n <span class=\"nxt-dt-control-content nxt-dt-container-range-content\"\n tabindex=\"-1\">\n <span class=\"nxt-dt-container-info-label\">{{fromLabel}}:</span>\n <span class=\"nxt-dt-container-info-value\">{{fromFormattedValue}}</span>\n </span>\n </div>\n <div role=\"radio\"\n [tabindex]=\"activeSelectedIndex === 1 ? 0 : -1\"\n [attr.aria-checked]=\"activeSelectedIndex === 1\"\n class=\"nxt-dt-control nxt-dt-container-range nxt-dt-container-to\"\n [ngClass]=\"{'nxt-dt-container-info-active': activeSelectedIndex === 1}\"\n (click)=\"handleClickOnInfoGroup($event, 1)\"\n (keydown)=\"handleKeydownOnInfoGroup($event, from, 1)\"\n #to>\n <span class=\"nxt-dt-control-content nxt-dt-container-range-content\"\n tabindex=\"-1\">\n <span class=\"nxt-dt-container-info-label\">{{toLabel}}:</span>\n <span class=\"nxt-dt-container-info-value\">{{toFormattedValue}}</span>\n </span>\n </div>\n </div>\n\n <div *ngIf=\"showControlButtons\"\n class=\"nxt-dt-container-buttons nxt-dt-container-row\">\n <button class=\"nxt-dt-control nxt-dt-control-button nxt-dt-container-control-button\"\n type=\"button\"\n tabindex=\"0\"\n (click)=\"onCancelClicked($event)\">\n <span class=\"nxt-dt-control-content nxt-dt-control-button-content\"\n tabindex=\"-1\">\n {{cancelLabel}}\n </span>\n </button>\n <button class=\"nxt-dt-control nxt-dt-control-button nxt-dt-container-control-button\"\n type=\"button\"\n tabindex=\"0\"\n (click)=\"onSetClicked($event)\">\n <span class=\"nxt-dt-control-content nxt-dt-control-button-content\"\n tabindex=\"-1\">\n {{setLabel}}\n </span>\n </button>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: TimerComponent, selector: "nxt-date-time-timer", inputs: ["pickerMoment", "min", "max", "showSecondsTimer", "hour12Timer", "stepHour", "stepMinute", "stepSecond"], outputs: ["selectedChange"] }, { kind: "component", type: CalendarComponent, selector: "nxt-date-time-calendar", inputs: ["dateFilter", "firstDayOfWeek", "min", "max", "pickerMoment", "selectMode", "selected", "selecteds", "startView", "hideOtherMonths"], outputs: ["pickerMomentChange", "selectedChange", "userSelection", "yearSelected", "monthSelected"] }], animations: [
|
|
2697
|
+
dateTimePickerAnimations.transformPicker,
|
|
2698
|
+
dateTimePickerAnimations.fadeInPicker
|
|
2714
2699
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2715
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2700
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: DateTimeContainerComponent, decorators: [{
|
|
2716
2701
|
type: Component,
|
|
2717
|
-
args: [{
|
|
2718
|
-
|
|
2719
|
-
|
|
2720
|
-
], template: "<div [cdkTrapFocus]=\"picker?.pickerMode !== 'inline'\"\n [@fadeInPicker]=\"picker?.pickerMode === 'inline'? '' : 'enter'\"\n class=\"
|
|
2721
|
-
}], ctorParameters: function () {
|
|
2722
|
-
return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: OwlDateTimeIntl }, { type: DateTimeAdapter, decorators: [{
|
|
2723
|
-
type: Optional
|
|
2724
|
-
}] }];
|
|
2725
|
-
}, propDecorators: { calendar: [{
|
|
2702
|
+
args: [{ selector: 'nxt-date-time-container', changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, animations: [
|
|
2703
|
+
dateTimePickerAnimations.transformPicker,
|
|
2704
|
+
dateTimePickerAnimations.fadeInPicker
|
|
2705
|
+
], template: "<div [cdkTrapFocus]=\"picker?.pickerMode !== 'inline'\"\n [@fadeInPicker]=\"picker?.pickerMode === 'inline'? '' : 'enter'\"\n class=\"nxt-dt-container-inner\">\n\n <nxt-date-time-calendar *ngIf=\"pickerType === 'both' || pickerType === 'calendar'\"\n class=\"nxt-dt-container-row\"\n [firstDayOfWeek]=\"picker?.firstDayOfWeek ?? 0\"\n [(pickerMoment)]=\"pickerMoment\"\n [selected]=\"picker?.selected\"\n [selecteds]=\"picker?.selecteds ?? []\"\n [selectMode]=\"picker?.selectMode\"\n [min]=\"picker?.min\"\n [max]=\"picker?.max\"\n [dateFilter]=\"picker?.dateTimeFilter\"\n [startView]=\"picker?.startView ?? 'month'\"\n [hideOtherMonths]=\"!!picker?.hideOtherMonths\"\n (yearSelected)=\"picker?.selectYear($event)\"\n (monthSelected)=\"picker?.selectMonth($event)\"\n (selectedChange)=\"dateSelected($event)\"></nxt-date-time-calendar>\n\n <nxt-date-time-timer *ngIf=\"pickerType === 'both' || pickerType === 'timer'\"\n class=\"nxt-dt-container-row\"\n [pickerMoment]=\"pickerMoment\"\n [min]=\"picker?.min\"\n [max]=\"picker?.max\"\n [showSecondsTimer]=\"!!picker?.showSecondsTimer\"\n [hour12Timer]=\"!!picker?.hour12Timer\"\n [stepHour]=\"picker?.stepHour ?? 1\"\n [stepMinute]=\"picker?.stepMinute ?? 1\"\n [stepSecond]=\"picker?.stepSecond ?? 1\"\n (selectedChange)=\"timeSelected($event)\"></nxt-date-time-timer>\n\n <div *ngIf=\"picker?.isInRangeMode\"\n role=\"radiogroup\"\n class=\"nxt-dt-container-info nxt-dt-container-row\">\n <div role=\"radio\"\n [tabindex]=\"activeSelectedIndex === 0 ? 0 : -1\"\n [attr.aria-checked]=\"activeSelectedIndex === 0\"\n class=\"nxt-dt-control nxt-dt-container-range nxt-dt-container-from\"\n [ngClass]=\"{'nxt-dt-container-info-active': activeSelectedIndex === 0}\"\n (click)=\"handleClickOnInfoGroup($event, 0)\"\n (keydown)=\"handleKeydownOnInfoGroup($event, to, 0)\"\n #from>\n <span class=\"nxt-dt-control-content nxt-dt-container-range-content\"\n tabindex=\"-1\">\n <span class=\"nxt-dt-container-info-label\">{{fromLabel}}:</span>\n <span class=\"nxt-dt-container-info-value\">{{fromFormattedValue}}</span>\n </span>\n </div>\n <div role=\"radio\"\n [tabindex]=\"activeSelectedIndex === 1 ? 0 : -1\"\n [attr.aria-checked]=\"activeSelectedIndex === 1\"\n class=\"nxt-dt-control nxt-dt-container-range nxt-dt-container-to\"\n [ngClass]=\"{'nxt-dt-container-info-active': activeSelectedIndex === 1}\"\n (click)=\"handleClickOnInfoGroup($event, 1)\"\n (keydown)=\"handleKeydownOnInfoGroup($event, from, 1)\"\n #to>\n <span class=\"nxt-dt-control-content nxt-dt-container-range-content\"\n tabindex=\"-1\">\n <span class=\"nxt-dt-container-info-label\">{{toLabel}}:</span>\n <span class=\"nxt-dt-container-info-value\">{{toFormattedValue}}</span>\n </span>\n </div>\n </div>\n\n <div *ngIf=\"showControlButtons\"\n class=\"nxt-dt-container-buttons nxt-dt-container-row\">\n <button class=\"nxt-dt-control nxt-dt-control-button nxt-dt-container-control-button\"\n type=\"button\"\n tabindex=\"0\"\n (click)=\"onCancelClicked($event)\">\n <span class=\"nxt-dt-control-content nxt-dt-control-button-content\"\n tabindex=\"-1\">\n {{cancelLabel}}\n </span>\n </button>\n <button class=\"nxt-dt-control nxt-dt-control-button nxt-dt-container-control-button\"\n type=\"button\"\n tabindex=\"0\"\n (click)=\"onSetClicked($event)\">\n <span class=\"nxt-dt-control-content nxt-dt-control-button-content\"\n tabindex=\"-1\">\n {{setLabel}}\n </span>\n </button>\n </div>\n</div>\n" }]
|
|
2706
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: DateTimeIntl }, { type: DateTimeAdapter }]; }, propDecorators: { calendar: [{
|
|
2726
2707
|
type: ViewChild,
|
|
2727
|
-
args: [
|
|
2708
|
+
args: [CalendarComponent]
|
|
2728
2709
|
}], timer: [{
|
|
2729
2710
|
type: ViewChild,
|
|
2730
|
-
args: [
|
|
2731
|
-
}],
|
|
2711
|
+
args: [TimerComponent]
|
|
2712
|
+
}], containerClass: [{
|
|
2732
2713
|
type: HostBinding,
|
|
2733
|
-
args: ['class.
|
|
2734
|
-
}],
|
|
2714
|
+
args: ['class.nxt-dt-container']
|
|
2715
|
+
}], popupContainerClass: [{
|
|
2735
2716
|
type: HostBinding,
|
|
2736
|
-
args: ['class.
|
|
2737
|
-
}],
|
|
2717
|
+
args: ['class.nxt-dt-popup-container']
|
|
2718
|
+
}], dialogContainerClass: [{
|
|
2738
2719
|
type: HostBinding,
|
|
2739
|
-
args: ['class.
|
|
2740
|
-
}],
|
|
2720
|
+
args: ['class.nxt-dt-dialog-container']
|
|
2721
|
+
}], inlineContainerClass: [{
|
|
2741
2722
|
type: HostBinding,
|
|
2742
|
-
args: ['class.
|
|
2743
|
-
}],
|
|
2723
|
+
args: ['class.nxt-dt-inline-container']
|
|
2724
|
+
}], containerDisabledClass: [{
|
|
2744
2725
|
type: HostBinding,
|
|
2745
|
-
args: ['class.
|
|
2746
|
-
}],
|
|
2726
|
+
args: ['class.nxt-dt-container-disabled']
|
|
2727
|
+
}], containerId: [{
|
|
2747
2728
|
type: HostBinding,
|
|
2748
2729
|
args: ['attr.id']
|
|
2749
|
-
}],
|
|
2730
|
+
}], containerAnimation: [{
|
|
2750
2731
|
type: HostBinding,
|
|
2751
2732
|
args: ['@transformPicker']
|
|
2752
2733
|
}], handleContainerAnimationDone: [{
|
|
@@ -2754,41 +2735,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
2754
2735
|
args: ['@transformPicker.done', ['$event']]
|
|
2755
2736
|
}] } });
|
|
2756
2737
|
|
|
2757
|
-
const
|
|
2738
|
+
const NXT_DATETIME_VALUE_ACCESSOR$1 = {
|
|
2758
2739
|
provide: NG_VALUE_ACCESSOR,
|
|
2759
|
-
useExisting: forwardRef(() =>
|
|
2740
|
+
useExisting: forwardRef(() => DateTimeInlineComponent),
|
|
2760
2741
|
multi: true
|
|
2761
2742
|
};
|
|
2762
|
-
class
|
|
2763
|
-
constructor(changeDetector, dateTimeAdapter, dateTimeFormats) {
|
|
2764
|
-
super(dateTimeAdapter, dateTimeFormats);
|
|
2765
|
-
this.changeDetector = changeDetector;
|
|
2766
|
-
this.dateTimeAdapter = dateTimeAdapter;
|
|
2767
|
-
this.dateTimeFormats = dateTimeFormats;
|
|
2768
|
-
/**
|
|
2769
|
-
* Set the type of the dateTime picker
|
|
2770
|
-
* 'both' -- show both calendar and timer
|
|
2771
|
-
* 'calendar' -- show only calendar
|
|
2772
|
-
* 'timer' -- show only timer
|
|
2773
|
-
*/
|
|
2774
|
-
this._pickerType = 'both';
|
|
2775
|
-
this._disabled = false;
|
|
2776
|
-
this._selectMode = 'single';
|
|
2777
|
-
this._values = [];
|
|
2778
|
-
/**
|
|
2779
|
-
* Emits selected year in multi-year view
|
|
2780
|
-
* This doesn't imply a change on the selected date.
|
|
2781
|
-
* */
|
|
2782
|
-
this.yearSelected = new EventEmitter();
|
|
2783
|
-
/**
|
|
2784
|
-
* Emits selected month in year view
|
|
2785
|
-
* This doesn't imply a change on the selected date.
|
|
2786
|
-
* */
|
|
2787
|
-
this.monthSelected = new EventEmitter();
|
|
2788
|
-
this._selecteds = [];
|
|
2789
|
-
this.onModelChange = () => { };
|
|
2790
|
-
this.onModelTouched = () => { };
|
|
2791
|
-
}
|
|
2743
|
+
class DateTimeInlineComponent extends DateTimeDirective {
|
|
2792
2744
|
get pickerType() {
|
|
2793
2745
|
return this._pickerType;
|
|
2794
2746
|
}
|
|
@@ -2811,26 +2763,27 @@ class OwlDateTimeInlineComponent extends OwlDateTimeDirective {
|
|
|
2811
2763
|
mode !== 'range' &&
|
|
2812
2764
|
mode !== 'rangeFrom' &&
|
|
2813
2765
|
mode !== 'rangeTo') {
|
|
2814
|
-
throw Error('
|
|
2766
|
+
throw Error('DateTime Error: invalid selectMode value!');
|
|
2815
2767
|
}
|
|
2816
2768
|
this._selectMode = mode;
|
|
2817
2769
|
}
|
|
2818
2770
|
get startAt() {
|
|
2771
|
+
var _a, _b;
|
|
2819
2772
|
if (this._startAt) {
|
|
2820
2773
|
return this._startAt;
|
|
2821
2774
|
}
|
|
2822
2775
|
if (this.selectMode === 'single') {
|
|
2823
|
-
return this.value
|
|
2776
|
+
return this.value;
|
|
2824
2777
|
}
|
|
2825
2778
|
else if (this.selectMode === 'range' ||
|
|
2826
2779
|
this.selectMode === 'rangeFrom') {
|
|
2827
|
-
return this.values[0]
|
|
2780
|
+
return (_a = this.values) === null || _a === void 0 ? void 0 : _a[0];
|
|
2828
2781
|
}
|
|
2829
2782
|
else if (this.selectMode === 'rangeTo') {
|
|
2830
|
-
return this.values[1]
|
|
2783
|
+
return (_b = this.values) === null || _b === void 0 ? void 0 : _b[1];
|
|
2831
2784
|
}
|
|
2832
2785
|
else {
|
|
2833
|
-
return
|
|
2786
|
+
return;
|
|
2834
2787
|
}
|
|
2835
2788
|
}
|
|
2836
2789
|
set startAt(date) {
|
|
@@ -2842,19 +2795,17 @@ class OwlDateTimeInlineComponent extends OwlDateTimeDirective {
|
|
|
2842
2795
|
set dateTimeFilter(filter) {
|
|
2843
2796
|
this._dateTimeFilter = filter;
|
|
2844
2797
|
}
|
|
2845
|
-
get
|
|
2846
|
-
return this._min
|
|
2798
|
+
get min() {
|
|
2799
|
+
return this._min;
|
|
2847
2800
|
}
|
|
2848
|
-
|
|
2849
|
-
set minDateTime(value) {
|
|
2801
|
+
set min(value) {
|
|
2850
2802
|
this._min = this.getValidDate(this.dateTimeAdapter.deserialize(value));
|
|
2851
2803
|
this.changeDetector.markForCheck();
|
|
2852
2804
|
}
|
|
2853
|
-
get
|
|
2854
|
-
return this._max
|
|
2805
|
+
get max() {
|
|
2806
|
+
return this._max;
|
|
2855
2807
|
}
|
|
2856
|
-
|
|
2857
|
-
set maxDateTime(value) {
|
|
2808
|
+
set max(value) {
|
|
2858
2809
|
this._max = this.getValidDate(this.dateTimeAdapter.deserialize(value));
|
|
2859
2810
|
this.changeDetector.markForCheck();
|
|
2860
2811
|
}
|
|
@@ -2875,7 +2826,7 @@ class OwlDateTimeInlineComponent extends OwlDateTimeDirective {
|
|
|
2875
2826
|
values = values.map(v => {
|
|
2876
2827
|
v = this.dateTimeAdapter.deserialize(v);
|
|
2877
2828
|
v = this.getValidDate(v);
|
|
2878
|
-
return v
|
|
2829
|
+
return (v && this.dateTimeAdapter.clone(v));
|
|
2879
2830
|
});
|
|
2880
2831
|
this._values = [...values];
|
|
2881
2832
|
this.selecteds = [...values];
|
|
@@ -2913,20 +2864,49 @@ class OwlDateTimeInlineComponent extends OwlDateTimeDirective {
|
|
|
2913
2864
|
this._selectMode === 'rangeFrom' ||
|
|
2914
2865
|
this._selectMode === 'rangeTo');
|
|
2915
2866
|
}
|
|
2916
|
-
get
|
|
2867
|
+
get inlineClass() {
|
|
2917
2868
|
return true;
|
|
2918
2869
|
}
|
|
2870
|
+
constructor(changeDetector, dateTimeAdapter, dateTimeFormats) {
|
|
2871
|
+
super(dateTimeAdapter, dateTimeFormats);
|
|
2872
|
+
this.changeDetector = changeDetector;
|
|
2873
|
+
/**
|
|
2874
|
+
* Set the type of the dateTime picker
|
|
2875
|
+
* 'both' -- show both calendar and timer
|
|
2876
|
+
* 'calendar' -- show only calendar
|
|
2877
|
+
* 'timer' -- show only timer
|
|
2878
|
+
*/
|
|
2879
|
+
this._pickerType = 'both';
|
|
2880
|
+
this._disabled = false;
|
|
2881
|
+
this._selectMode = 'single';
|
|
2882
|
+
/**
|
|
2883
|
+
* Emits selected year in multi-year view
|
|
2884
|
+
* This doesn't imply a change on the selected date.
|
|
2885
|
+
* */
|
|
2886
|
+
this.yearSelected = new EventEmitter();
|
|
2887
|
+
/**
|
|
2888
|
+
* Emits selected month in year view
|
|
2889
|
+
* This doesn't imply a change on the selected date.
|
|
2890
|
+
* */
|
|
2891
|
+
this.monthSelected = new EventEmitter();
|
|
2892
|
+
this._selecteds = new Array();
|
|
2893
|
+
}
|
|
2919
2894
|
ngOnInit() {
|
|
2920
|
-
this.container
|
|
2895
|
+
if (this.container)
|
|
2896
|
+
this.container.picker = this;
|
|
2921
2897
|
}
|
|
2922
2898
|
writeValue(value) {
|
|
2899
|
+
var _a;
|
|
2900
|
+
value = value !== null && value !== void 0 ? value : undefined;
|
|
2923
2901
|
if (this.isInSingleMode) {
|
|
2924
2902
|
this.value = value;
|
|
2925
|
-
this.container
|
|
2903
|
+
if (this.container)
|
|
2904
|
+
this.container.pickerMoment = value;
|
|
2926
2905
|
}
|
|
2927
2906
|
else {
|
|
2928
2907
|
this.values = value;
|
|
2929
|
-
|
|
2908
|
+
if (this.container)
|
|
2909
|
+
this.container.pickerMoment = (_a = this._values) === null || _a === void 0 ? void 0 : _a[this.container.activeSelectedIndex];
|
|
2930
2910
|
}
|
|
2931
2911
|
}
|
|
2932
2912
|
registerOnChange(fn) {
|
|
@@ -2939,6 +2919,7 @@ class OwlDateTimeInlineComponent extends OwlDateTimeDirective {
|
|
|
2939
2919
|
this.disabled = isDisabled;
|
|
2940
2920
|
}
|
|
2941
2921
|
select(date) {
|
|
2922
|
+
var _a, _b;
|
|
2942
2923
|
if (this.disabled) {
|
|
2943
2924
|
return;
|
|
2944
2925
|
}
|
|
@@ -2948,8 +2929,8 @@ class OwlDateTimeInlineComponent extends OwlDateTimeDirective {
|
|
|
2948
2929
|
else {
|
|
2949
2930
|
this.value = date;
|
|
2950
2931
|
}
|
|
2951
|
-
this.onModelChange(date);
|
|
2952
|
-
this.onModelTouched();
|
|
2932
|
+
(_a = this.onModelChange) === null || _a === void 0 ? void 0 : _a.call(this, date);
|
|
2933
|
+
(_b = this.onModelTouched) === null || _b === void 0 ? void 0 : _b.call(this);
|
|
2953
2934
|
}
|
|
2954
2935
|
/**
|
|
2955
2936
|
* Emits the selected year in multi-year view
|
|
@@ -2964,23 +2945,19 @@ class OwlDateTimeInlineComponent extends OwlDateTimeDirective {
|
|
|
2964
2945
|
this.monthSelected.emit(normalizedMonth);
|
|
2965
2946
|
}
|
|
2966
2947
|
}
|
|
2967
|
-
|
|
2968
|
-
|
|
2969
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2948
|
+
DateTimeInlineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: DateTimeInlineComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DateTimeAdapter }, { token: NXT_DATE_TIME_FORMATS }], target: i0.ɵɵFactoryTarget.Component });
|
|
2949
|
+
DateTimeInlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: DateTimeInlineComponent, selector: "nxt-date-time-inline", inputs: { pickerType: "pickerType", disabled: "disabled", selectMode: "selectMode", startAt: "startAt", dateTimeFilter: "dateTimeFilter", min: "min", max: "max", value: "value", values: "values" }, outputs: { yearSelected: "yearSelected", monthSelected: "monthSelected" }, host: { properties: { "class.nxt-dt-inline": "this.inlineClass" } }, providers: [NXT_DATETIME_VALUE_ACCESSOR$1], viewQueries: [{ propertyName: "container", first: true, predicate: DateTimeContainerComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<nxt-date-time-container></nxt-date-time-container>\n", styles: [""], dependencies: [{ kind: "component", type: DateTimeContainerComponent, selector: "nxt-date-time-container" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2950
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: DateTimeInlineComponent, decorators: [{
|
|
2970
2951
|
type: Component,
|
|
2971
|
-
args: [{ selector: '
|
|
2952
|
+
args: [{ selector: 'nxt-date-time-inline', changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [NXT_DATETIME_VALUE_ACCESSOR$1], template: "<nxt-date-time-container></nxt-date-time-container>\n" }]
|
|
2972
2953
|
}], ctorParameters: function () {
|
|
2973
|
-
return [{ type: i0.ChangeDetectorRef }, { type: DateTimeAdapter, decorators: [{
|
|
2974
|
-
type: Optional
|
|
2975
|
-
}] }, { type: undefined, decorators: [{
|
|
2976
|
-
type: Optional
|
|
2977
|
-
}, {
|
|
2954
|
+
return [{ type: i0.ChangeDetectorRef }, { type: DateTimeAdapter }, { type: undefined, decorators: [{
|
|
2978
2955
|
type: Inject,
|
|
2979
|
-
args: [
|
|
2956
|
+
args: [NXT_DATE_TIME_FORMATS]
|
|
2980
2957
|
}] }];
|
|
2981
2958
|
}, propDecorators: { container: [{
|
|
2982
2959
|
type: ViewChild,
|
|
2983
|
-
args: [
|
|
2960
|
+
args: [DateTimeContainerComponent, { static: true }]
|
|
2984
2961
|
}], pickerType: [{
|
|
2985
2962
|
type: Input
|
|
2986
2963
|
}], disabled: [{
|
|
@@ -2990,14 +2967,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
2990
2967
|
}], startAt: [{
|
|
2991
2968
|
type: Input
|
|
2992
2969
|
}], dateTimeFilter: [{
|
|
2993
|
-
type: Input
|
|
2994
|
-
|
|
2995
|
-
|
|
2996
|
-
|
|
2997
|
-
|
|
2998
|
-
}], maxDateTime: [{
|
|
2999
|
-
type: Input,
|
|
3000
|
-
args: ['max']
|
|
2970
|
+
type: Input
|
|
2971
|
+
}], min: [{
|
|
2972
|
+
type: Input
|
|
2973
|
+
}], max: [{
|
|
2974
|
+
type: Input
|
|
3001
2975
|
}], value: [{
|
|
3002
2976
|
type: Input
|
|
3003
2977
|
}], values: [{
|
|
@@ -3006,204 +2980,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
3006
2980
|
type: Output
|
|
3007
2981
|
}], monthSelected: [{
|
|
3008
2982
|
type: Output
|
|
3009
|
-
}],
|
|
2983
|
+
}], inlineClass: [{
|
|
3010
2984
|
type: HostBinding,
|
|
3011
|
-
args: ['class.
|
|
2985
|
+
args: ['class.nxt-dt-inline']
|
|
3012
2986
|
}] } });
|
|
3013
2987
|
|
|
3014
|
-
const
|
|
2988
|
+
const NXT_DATETIME_VALUE_ACCESSOR = {
|
|
3015
2989
|
provide: NG_VALUE_ACCESSOR,
|
|
3016
|
-
useExisting: forwardRef(() =>
|
|
2990
|
+
useExisting: forwardRef(() => DateTimeInputDirective),
|
|
3017
2991
|
multi: true
|
|
3018
2992
|
};
|
|
3019
|
-
const
|
|
2993
|
+
const NXT_DATETIME_VALIDATORS = {
|
|
3020
2994
|
provide: NG_VALIDATORS,
|
|
3021
|
-
useExisting: forwardRef(() =>
|
|
2995
|
+
useExisting: forwardRef(() => DateTimeInputDirective),
|
|
3022
2996
|
multi: true
|
|
3023
2997
|
};
|
|
3024
|
-
class
|
|
3025
|
-
constructor(elmRef, renderer, dateTimeAdapter, dateTimeFormats) {
|
|
3026
|
-
this.elmRef = elmRef;
|
|
3027
|
-
this.renderer = renderer;
|
|
3028
|
-
this.dateTimeAdapter = dateTimeAdapter;
|
|
3029
|
-
this.dateTimeFormats = dateTimeFormats;
|
|
3030
|
-
/**
|
|
3031
|
-
* The picker's select mode
|
|
3032
|
-
*/
|
|
3033
|
-
this._selectMode = 'single';
|
|
3034
|
-
/**
|
|
3035
|
-
* The character to separate the 'from' and 'to' in input value
|
|
3036
|
-
*/
|
|
3037
|
-
this.rangeSeparator = '~';
|
|
3038
|
-
this._values = [];
|
|
3039
|
-
/**
|
|
3040
|
-
* Callback to invoke when `change` event is fired on this `<input>`
|
|
3041
|
-
* */
|
|
3042
|
-
this.dateTimeChange = new EventEmitter();
|
|
3043
|
-
/**
|
|
3044
|
-
* Callback to invoke when an `input` event is fired on this `<input>`.
|
|
3045
|
-
* */
|
|
3046
|
-
this.dateTimeInput = new EventEmitter();
|
|
3047
|
-
this.dtPickerSub = Subscription.EMPTY;
|
|
3048
|
-
this.localeSub = Subscription.EMPTY;
|
|
3049
|
-
this.lastValueValid = true;
|
|
3050
|
-
this.onModelChange = () => { };
|
|
3051
|
-
this.onModelTouched = () => { };
|
|
3052
|
-
this.validatorOnChange = () => { };
|
|
3053
|
-
/** The form control validator for whether the input parses. */
|
|
3054
|
-
this.parseValidator = () => this.lastValueValid
|
|
3055
|
-
? null
|
|
3056
|
-
: { owlDateTimeParse: { text: this.elmRef.nativeElement.value } };
|
|
3057
|
-
/** The form control validator for the min date. */
|
|
3058
|
-
this.minValidator = (control) => {
|
|
3059
|
-
if (this.isInSingleMode) {
|
|
3060
|
-
const controlValue = this.getValidDate(this.dateTimeAdapter.deserialize(control.value));
|
|
3061
|
-
return !this.min ||
|
|
3062
|
-
!controlValue ||
|
|
3063
|
-
this.dateTimeAdapter.compare(this.min, controlValue) <= 0
|
|
3064
|
-
? null
|
|
3065
|
-
: { owlDateTimeMin: { min: this.min, actual: controlValue } };
|
|
3066
|
-
}
|
|
3067
|
-
else if (this.isInRangeMode && control.value) {
|
|
3068
|
-
const controlValueFrom = this.getValidDate(this.dateTimeAdapter.deserialize(control.value[0]));
|
|
3069
|
-
const controlValueTo = this.getValidDate(this.dateTimeAdapter.deserialize(control.value[1]));
|
|
3070
|
-
return !this.min ||
|
|
3071
|
-
!controlValueFrom ||
|
|
3072
|
-
!controlValueTo ||
|
|
3073
|
-
this.dateTimeAdapter.compare(this.min, controlValueFrom) <= 0
|
|
3074
|
-
? null
|
|
3075
|
-
: {
|
|
3076
|
-
owlDateTimeMin: {
|
|
3077
|
-
min: this.min,
|
|
3078
|
-
actual: [controlValueFrom, controlValueTo]
|
|
3079
|
-
}
|
|
3080
|
-
};
|
|
3081
|
-
}
|
|
3082
|
-
};
|
|
3083
|
-
/** The form control validator for the max date. */
|
|
3084
|
-
this.maxValidator = (control) => {
|
|
3085
|
-
if (this.isInSingleMode) {
|
|
3086
|
-
const controlValue = this.getValidDate(this.dateTimeAdapter.deserialize(control.value));
|
|
3087
|
-
return !this.max ||
|
|
3088
|
-
!controlValue ||
|
|
3089
|
-
this.dateTimeAdapter.compare(this.max, controlValue) >= 0
|
|
3090
|
-
? null
|
|
3091
|
-
: { owlDateTimeMax: { max: this.max, actual: controlValue } };
|
|
3092
|
-
}
|
|
3093
|
-
else if (this.isInRangeMode && control.value) {
|
|
3094
|
-
const controlValueFrom = this.getValidDate(this.dateTimeAdapter.deserialize(control.value[0]));
|
|
3095
|
-
const controlValueTo = this.getValidDate(this.dateTimeAdapter.deserialize(control.value[1]));
|
|
3096
|
-
return !this.max ||
|
|
3097
|
-
!controlValueFrom ||
|
|
3098
|
-
!controlValueTo ||
|
|
3099
|
-
this.dateTimeAdapter.compare(this.max, controlValueTo) >= 0
|
|
3100
|
-
? null
|
|
3101
|
-
: {
|
|
3102
|
-
owlDateTimeMax: {
|
|
3103
|
-
max: this.max,
|
|
3104
|
-
actual: [controlValueFrom, controlValueTo]
|
|
3105
|
-
}
|
|
3106
|
-
};
|
|
3107
|
-
}
|
|
3108
|
-
};
|
|
3109
|
-
/** The form control validator for the date filter. */
|
|
3110
|
-
this.filterValidator = (control) => {
|
|
3111
|
-
const controlValue = this.getValidDate(this.dateTimeAdapter.deserialize(control.value));
|
|
3112
|
-
return !this._dateTimeFilter ||
|
|
3113
|
-
!controlValue ||
|
|
3114
|
-
this._dateTimeFilter(controlValue)
|
|
3115
|
-
? null
|
|
3116
|
-
: { owlDateTimeFilter: true };
|
|
3117
|
-
};
|
|
3118
|
-
/**
|
|
3119
|
-
* The form control validator for the range.
|
|
3120
|
-
* Check whether the 'before' value is before the 'to' value
|
|
3121
|
-
* */
|
|
3122
|
-
this.rangeValidator = (control) => {
|
|
3123
|
-
if (this.isInSingleMode || !control.value) {
|
|
3124
|
-
return null;
|
|
3125
|
-
}
|
|
3126
|
-
const controlValueFrom = this.getValidDate(this.dateTimeAdapter.deserialize(control.value[0]));
|
|
3127
|
-
const controlValueTo = this.getValidDate(this.dateTimeAdapter.deserialize(control.value[1]));
|
|
3128
|
-
return !controlValueFrom ||
|
|
3129
|
-
!controlValueTo ||
|
|
3130
|
-
this.dateTimeAdapter.compare(controlValueFrom, controlValueTo) <= 0
|
|
3131
|
-
? null
|
|
3132
|
-
: { owlDateTimeRange: true };
|
|
3133
|
-
};
|
|
3134
|
-
/** The combined form control validator for this input. */
|
|
3135
|
-
this.validator = Validators.compose([
|
|
3136
|
-
this.parseValidator,
|
|
3137
|
-
this.minValidator,
|
|
3138
|
-
this.maxValidator,
|
|
3139
|
-
this.filterValidator,
|
|
3140
|
-
this.rangeValidator
|
|
3141
|
-
]);
|
|
3142
|
-
/** Emits when the value changes (either due to user input or programmatic change). */
|
|
3143
|
-
this.valueChange = new EventEmitter();
|
|
3144
|
-
/** Emits when the disabled state has changed */
|
|
3145
|
-
this.disabledChange = new EventEmitter();
|
|
3146
|
-
if (!this.dateTimeAdapter) {
|
|
3147
|
-
throw Error('OwlDateTimePicker: No provider found for DateTimePicker. You must import one of the following ' +
|
|
3148
|
-
'modules at your application root: OwlNativeDateTimeModule, OwlMomentDateTimeModule, or provide a ' +
|
|
3149
|
-
'custom implementation.');
|
|
3150
|
-
}
|
|
3151
|
-
if (!this.dateTimeFormats) {
|
|
3152
|
-
throw Error('OwlDateTimePicker: No provider found for OWL_DATE_TIME_FORMATS. You must import one of the following ' +
|
|
3153
|
-
'modules at your application root: OwlNativeDateTimeModule, OwlMomentDateTimeModule, or provide a ' +
|
|
3154
|
-
'custom implementation.');
|
|
3155
|
-
}
|
|
3156
|
-
this.localeSub = this.dateTimeAdapter.localeChanges.subscribe(() => {
|
|
3157
|
-
this.value = this.value;
|
|
3158
|
-
});
|
|
3159
|
-
}
|
|
2998
|
+
class DateTimeInputDirective {
|
|
3160
2999
|
/**
|
|
3161
3000
|
* The date time picker that this input is associated with.
|
|
3162
3001
|
* */
|
|
3163
|
-
set
|
|
3002
|
+
set dateTime(value) {
|
|
3164
3003
|
this.registerDateTimePicker(value);
|
|
3165
3004
|
}
|
|
3166
3005
|
/**
|
|
3167
3006
|
* A function to filter date time
|
|
3168
3007
|
*/
|
|
3169
|
-
set
|
|
3008
|
+
set dateTimeFilter(filter) {
|
|
3009
|
+
var _a;
|
|
3170
3010
|
this._dateTimeFilter = filter;
|
|
3171
|
-
this.validatorOnChange();
|
|
3011
|
+
(_a = this.validatorOnChange) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
3172
3012
|
}
|
|
3173
3013
|
get dateTimeFilter() {
|
|
3174
3014
|
return this._dateTimeFilter;
|
|
3175
3015
|
}
|
|
3176
3016
|
get disabled() {
|
|
3177
|
-
return
|
|
3017
|
+
return this._disabled;
|
|
3178
3018
|
}
|
|
3179
3019
|
set disabled(value) {
|
|
3020
|
+
var _a;
|
|
3180
3021
|
const newValue = coerceBooleanProperty(value);
|
|
3181
3022
|
const element = this.elmRef.nativeElement;
|
|
3182
3023
|
if (this._disabled !== newValue) {
|
|
3183
3024
|
this._disabled = newValue;
|
|
3184
3025
|
this.disabledChange.emit(newValue);
|
|
3185
3026
|
}
|
|
3186
|
-
|
|
3187
|
-
|
|
3188
|
-
// Normally, native input elements automatically blur if they turn disabled. This behavior
|
|
3189
|
-
// is problematic, because it would mean that it triggers another change detection cycle,
|
|
3190
|
-
// which then causes a changed after checked error if the input element was focused before.
|
|
3191
|
-
element.blur();
|
|
3027
|
+
if (newValue) {
|
|
3028
|
+
(_a = element.blur) === null || _a === void 0 ? void 0 : _a.call(element);
|
|
3192
3029
|
}
|
|
3193
3030
|
}
|
|
3194
3031
|
get min() {
|
|
3195
3032
|
return this._min;
|
|
3196
3033
|
}
|
|
3197
3034
|
set min(value) {
|
|
3035
|
+
var _a;
|
|
3198
3036
|
this._min = this.getValidDate(this.dateTimeAdapter.deserialize(value));
|
|
3199
|
-
this.validatorOnChange();
|
|
3037
|
+
(_a = this.validatorOnChange) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
3200
3038
|
}
|
|
3201
3039
|
get max() {
|
|
3202
3040
|
return this._max;
|
|
3203
3041
|
}
|
|
3204
3042
|
set max(value) {
|
|
3043
|
+
var _a;
|
|
3205
3044
|
this._max = this.getValidDate(this.dateTimeAdapter.deserialize(value));
|
|
3206
|
-
this.validatorOnChange();
|
|
3045
|
+
(_a = this.validatorOnChange) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
3207
3046
|
}
|
|
3208
3047
|
get selectMode() {
|
|
3209
3048
|
return this._selectMode;
|
|
@@ -3213,7 +3052,7 @@ class OwlDateTimeInputDirective {
|
|
|
3213
3052
|
mode !== 'range' &&
|
|
3214
3053
|
mode !== 'rangeFrom' &&
|
|
3215
3054
|
mode !== 'rangeTo') {
|
|
3216
|
-
throw Error('
|
|
3055
|
+
throw Error('DateTime Error: invalid selectMode value!');
|
|
3217
3056
|
}
|
|
3218
3057
|
this._selectMode = mode;
|
|
3219
3058
|
}
|
|
@@ -3222,7 +3061,7 @@ class OwlDateTimeInputDirective {
|
|
|
3222
3061
|
}
|
|
3223
3062
|
set value(value) {
|
|
3224
3063
|
value = this.dateTimeAdapter.deserialize(value);
|
|
3225
|
-
this.lastValueValid = !value || this.dateTimeAdapter.isValid(value);
|
|
3064
|
+
this.lastValueValid = !value || !!this.dateTimeAdapter.isValid(value);
|
|
3226
3065
|
value = this.getValidDate(value);
|
|
3227
3066
|
const oldDate = this._value;
|
|
3228
3067
|
this._value = value;
|
|
@@ -3267,36 +3106,163 @@ class OwlDateTimeInputDirective {
|
|
|
3267
3106
|
this._selectMode === 'rangeFrom' ||
|
|
3268
3107
|
this._selectMode === 'rangeTo');
|
|
3269
3108
|
}
|
|
3270
|
-
get
|
|
3109
|
+
get inputAriaHaspopup() {
|
|
3271
3110
|
return true;
|
|
3272
3111
|
}
|
|
3273
|
-
get
|
|
3274
|
-
|
|
3112
|
+
get inputAriaOwns() {
|
|
3113
|
+
var _a;
|
|
3114
|
+
return (((_a = this.dtPicker) === null || _a === void 0 ? void 0 : _a.opened) && this.dtPicker.id) || undefined;
|
|
3275
3115
|
}
|
|
3276
3116
|
get minIso8601() {
|
|
3277
|
-
return this.min ? this.dateTimeAdapter.toIso8601(this.min) :
|
|
3117
|
+
return this.min ? this.dateTimeAdapter.toIso8601(this.min) : undefined;
|
|
3278
3118
|
}
|
|
3279
3119
|
get maxIso8601() {
|
|
3280
|
-
return this.max ? this.dateTimeAdapter.toIso8601(this.max) :
|
|
3120
|
+
return this.max ? this.dateTimeAdapter.toIso8601(this.max) : undefined;
|
|
3281
3121
|
}
|
|
3282
|
-
get
|
|
3122
|
+
get inputDisabled() {
|
|
3283
3123
|
return this.disabled;
|
|
3284
3124
|
}
|
|
3125
|
+
constructor(elmRef, renderer, dateTimeAdapter, dateTimeFormats) {
|
|
3126
|
+
this.elmRef = elmRef;
|
|
3127
|
+
this.renderer = renderer;
|
|
3128
|
+
this.dateTimeAdapter = dateTimeAdapter;
|
|
3129
|
+
this.dateTimeFormats = dateTimeFormats;
|
|
3130
|
+
/** Whether the date time picker's input is disabled. */
|
|
3131
|
+
this._disabled = false;
|
|
3132
|
+
/**
|
|
3133
|
+
* The picker's select mode
|
|
3134
|
+
*/
|
|
3135
|
+
this._selectMode = 'single';
|
|
3136
|
+
/**
|
|
3137
|
+
* The character to separate the 'from' and 'to' in input value
|
|
3138
|
+
*/
|
|
3139
|
+
this.rangeSeparator = '~';
|
|
3140
|
+
this._values = [];
|
|
3141
|
+
/**
|
|
3142
|
+
* Callback to invoke when `change` event is fired on this `<input>`
|
|
3143
|
+
* */
|
|
3144
|
+
this.dateTimeChange = new EventEmitter();
|
|
3145
|
+
/**
|
|
3146
|
+
* Callback to invoke when an `input` event is fired on this `<input>`.
|
|
3147
|
+
* */
|
|
3148
|
+
this.dateTimeInput = new EventEmitter();
|
|
3149
|
+
this.lastValueValid = true;
|
|
3150
|
+
/** The form control validator for whether the input parses. */
|
|
3151
|
+
this.parseValidator = () => this.lastValueValid
|
|
3152
|
+
? null
|
|
3153
|
+
: { dateTimeParse: { text: this.elmRef.nativeElement.value } };
|
|
3154
|
+
/** The form control validator for the min date. */
|
|
3155
|
+
this.minValidator = (control) => {
|
|
3156
|
+
if (this.isInSingleMode) {
|
|
3157
|
+
const controlValue = this.getValidDate(this.dateTimeAdapter.deserialize(control.value));
|
|
3158
|
+
return !this.min ||
|
|
3159
|
+
!controlValue ||
|
|
3160
|
+
this.dateTimeAdapter.compare(this.min, controlValue) <= 0
|
|
3161
|
+
? null
|
|
3162
|
+
: { dateTimeMin: { min: this.min, actual: controlValue } };
|
|
3163
|
+
}
|
|
3164
|
+
else if (this.isInRangeMode && control.value) {
|
|
3165
|
+
const controlValueFrom = this.getValidDate(this.dateTimeAdapter.deserialize(control.value[0]));
|
|
3166
|
+
const controlValueTo = this.getValidDate(this.dateTimeAdapter.deserialize(control.value[1]));
|
|
3167
|
+
return !this.min ||
|
|
3168
|
+
!controlValueFrom ||
|
|
3169
|
+
!controlValueTo ||
|
|
3170
|
+
this.dateTimeAdapter.compare(this.min, controlValueFrom) <= 0
|
|
3171
|
+
? null
|
|
3172
|
+
: {
|
|
3173
|
+
dateTimeMin: {
|
|
3174
|
+
min: this.min,
|
|
3175
|
+
actual: [controlValueFrom, controlValueTo]
|
|
3176
|
+
}
|
|
3177
|
+
};
|
|
3178
|
+
}
|
|
3179
|
+
return null;
|
|
3180
|
+
};
|
|
3181
|
+
/** The form control validator for the max date. */
|
|
3182
|
+
this.maxValidator = (control) => {
|
|
3183
|
+
if (this.isInSingleMode) {
|
|
3184
|
+
const controlValue = this.getValidDate(this.dateTimeAdapter.deserialize(control.value));
|
|
3185
|
+
return !this.max ||
|
|
3186
|
+
!controlValue ||
|
|
3187
|
+
this.dateTimeAdapter.compare(this.max, controlValue) >= 0
|
|
3188
|
+
? null
|
|
3189
|
+
: { dateTimeMax: { max: this.max, actual: controlValue } };
|
|
3190
|
+
}
|
|
3191
|
+
else if (this.isInRangeMode && control.value) {
|
|
3192
|
+
const controlValueFrom = this.getValidDate(this.dateTimeAdapter.deserialize(control.value[0]));
|
|
3193
|
+
const controlValueTo = this.getValidDate(this.dateTimeAdapter.deserialize(control.value[1]));
|
|
3194
|
+
return !this.max ||
|
|
3195
|
+
!controlValueFrom ||
|
|
3196
|
+
!controlValueTo ||
|
|
3197
|
+
this.dateTimeAdapter.compare(this.max, controlValueTo) >= 0
|
|
3198
|
+
? null
|
|
3199
|
+
: {
|
|
3200
|
+
dateTimeMax: {
|
|
3201
|
+
max: this.max,
|
|
3202
|
+
actual: [controlValueFrom, controlValueTo]
|
|
3203
|
+
}
|
|
3204
|
+
};
|
|
3205
|
+
}
|
|
3206
|
+
return null;
|
|
3207
|
+
};
|
|
3208
|
+
/** The form control validator for the date filter. */
|
|
3209
|
+
this.filterValidator = (control) => {
|
|
3210
|
+
const controlValue = this.getValidDate(this.dateTimeAdapter.deserialize(control.value));
|
|
3211
|
+
return !this._dateTimeFilter ||
|
|
3212
|
+
!controlValue ||
|
|
3213
|
+
this._dateTimeFilter(controlValue)
|
|
3214
|
+
? null
|
|
3215
|
+
: { dateTimeFilter: true };
|
|
3216
|
+
};
|
|
3217
|
+
/**
|
|
3218
|
+
* The form control validator for the range.
|
|
3219
|
+
* Check whether the 'before' value is before the 'to' value
|
|
3220
|
+
* */
|
|
3221
|
+
this.rangeValidator = (control) => {
|
|
3222
|
+
if (this.isInSingleMode || !control.value) {
|
|
3223
|
+
return null;
|
|
3224
|
+
}
|
|
3225
|
+
const controlValueFrom = this.getValidDate(this.dateTimeAdapter.deserialize(control.value[0]));
|
|
3226
|
+
const controlValueTo = this.getValidDate(this.dateTimeAdapter.deserialize(control.value[1]));
|
|
3227
|
+
return !controlValueFrom ||
|
|
3228
|
+
!controlValueTo ||
|
|
3229
|
+
this.dateTimeAdapter.compare(controlValueFrom, controlValueTo) <= 0
|
|
3230
|
+
? null
|
|
3231
|
+
: { dateTimeRange: true };
|
|
3232
|
+
};
|
|
3233
|
+
/** The combined form control validator for this input. */
|
|
3234
|
+
this.validator = Validators.compose([
|
|
3235
|
+
this.parseValidator,
|
|
3236
|
+
this.minValidator,
|
|
3237
|
+
this.maxValidator,
|
|
3238
|
+
this.filterValidator,
|
|
3239
|
+
this.rangeValidator
|
|
3240
|
+
]);
|
|
3241
|
+
/** Emits when the value changes (either due to user input or programmatic change). */
|
|
3242
|
+
this.valueChange = new EventEmitter();
|
|
3243
|
+
/** Emits when the disabled state has changed */
|
|
3244
|
+
this.disabledChange = new EventEmitter();
|
|
3245
|
+
this.localeSub = this.dateTimeAdapter.localeChanges.subscribe(() => {
|
|
3246
|
+
this.value = this.value;
|
|
3247
|
+
});
|
|
3248
|
+
}
|
|
3285
3249
|
ngOnInit() {
|
|
3286
3250
|
if (!this.dtPicker) {
|
|
3287
|
-
throw Error('
|
|
3251
|
+
throw Error('DateTimePicker: the picker input doesn\'t have any associated nxt-date-time component');
|
|
3288
3252
|
}
|
|
3289
3253
|
}
|
|
3290
3254
|
ngAfterContentInit() {
|
|
3291
|
-
|
|
3255
|
+
var _a;
|
|
3256
|
+
this.dtPickerSub = (_a = this.dtPicker) === null || _a === void 0 ? void 0 : _a.confirmSelectedChange.subscribe((selecteds) => {
|
|
3257
|
+
var _a, _b;
|
|
3292
3258
|
if (Array.isArray(selecteds)) {
|
|
3293
3259
|
this.values = selecteds;
|
|
3294
3260
|
}
|
|
3295
3261
|
else {
|
|
3296
3262
|
this.value = selecteds;
|
|
3297
3263
|
}
|
|
3298
|
-
this.onModelChange(selecteds);
|
|
3299
|
-
this.onModelTouched();
|
|
3264
|
+
(_a = this.onModelChange) === null || _a === void 0 ? void 0 : _a.call(this, selecteds);
|
|
3265
|
+
(_b = this.onModelTouched) === null || _b === void 0 ? void 0 : _b.call(this);
|
|
3300
3266
|
this.dateTimeChange.emit({
|
|
3301
3267
|
source: this,
|
|
3302
3268
|
value: selecteds,
|
|
@@ -3310,12 +3276,16 @@ class OwlDateTimeInputDirective {
|
|
|
3310
3276
|
});
|
|
3311
3277
|
}
|
|
3312
3278
|
ngOnDestroy() {
|
|
3313
|
-
|
|
3314
|
-
this.
|
|
3279
|
+
var _a, _b;
|
|
3280
|
+
(_a = this.dtPickerSub) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
|
3281
|
+
this.dtPickerSub = undefined;
|
|
3282
|
+
(_b = this.localeSub) === null || _b === void 0 ? void 0 : _b.unsubscribe();
|
|
3283
|
+
this.localeSub = undefined;
|
|
3315
3284
|
this.valueChange.complete();
|
|
3316
3285
|
this.disabledChange.complete();
|
|
3317
3286
|
}
|
|
3318
3287
|
writeValue(value) {
|
|
3288
|
+
value = value !== null && value !== void 0 ? value : undefined;
|
|
3319
3289
|
if (this.isInSingleMode) {
|
|
3320
3290
|
this.value = value;
|
|
3321
3291
|
}
|
|
@@ -3342,13 +3312,15 @@ class OwlDateTimeInputDirective {
|
|
|
3342
3312
|
* Open the picker when user hold alt + DOWN_ARROW
|
|
3343
3313
|
* */
|
|
3344
3314
|
handleKeydownOnHost(event) {
|
|
3315
|
+
var _a;
|
|
3345
3316
|
if (event.altKey && event.keyCode === DOWN_ARROW) {
|
|
3346
|
-
this.dtPicker.open();
|
|
3317
|
+
(_a = this.dtPicker) === null || _a === void 0 ? void 0 : _a.open();
|
|
3347
3318
|
event.preventDefault();
|
|
3348
3319
|
}
|
|
3349
3320
|
}
|
|
3350
3321
|
handleBlurOnHost(_event) {
|
|
3351
|
-
|
|
3322
|
+
var _a;
|
|
3323
|
+
(_a = this.onModelTouched) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
3352
3324
|
}
|
|
3353
3325
|
handleInputOnHost(event) {
|
|
3354
3326
|
const value = event.target.value;
|
|
@@ -3380,9 +3352,10 @@ class OwlDateTimeInputDirective {
|
|
|
3380
3352
|
* Set the native input property 'value'
|
|
3381
3353
|
*/
|
|
3382
3354
|
formatNativeInputValue() {
|
|
3355
|
+
var _a, _b, _c;
|
|
3383
3356
|
if (this.isInSingleMode) {
|
|
3384
3357
|
this.renderer.setProperty(this.elmRef.nativeElement, 'value', this._value
|
|
3385
|
-
? this.dateTimeAdapter.format(this._value, this.dtPicker.formatString)
|
|
3358
|
+
? this.dateTimeAdapter.format(this._value, (_a = this.dtPicker) === null || _a === void 0 ? void 0 : _a.formatString)
|
|
3386
3359
|
: '');
|
|
3387
3360
|
}
|
|
3388
3361
|
else if (this.isInRangeMode) {
|
|
@@ -3390,13 +3363,13 @@ class OwlDateTimeInputDirective {
|
|
|
3390
3363
|
const from = this._values[0];
|
|
3391
3364
|
const to = this._values[1];
|
|
3392
3365
|
const fromFormatted = from
|
|
3393
|
-
? this.dateTimeAdapter.format(from, this.dtPicker.formatString)
|
|
3366
|
+
? this.dateTimeAdapter.format(from, (_b = this.dtPicker) === null || _b === void 0 ? void 0 : _b.formatString)
|
|
3394
3367
|
: '';
|
|
3395
3368
|
const toFormatted = to
|
|
3396
|
-
? this.dateTimeAdapter.format(to, this.dtPicker.formatString)
|
|
3369
|
+
? this.dateTimeAdapter.format(to, (_c = this.dtPicker) === null || _c === void 0 ? void 0 : _c.formatString)
|
|
3397
3370
|
: '';
|
|
3398
3371
|
if (!fromFormatted && !toFormatted) {
|
|
3399
|
-
this.renderer.setProperty(this.elmRef.nativeElement, 'value',
|
|
3372
|
+
this.renderer.setProperty(this.elmRef.nativeElement, 'value', undefined);
|
|
3400
3373
|
}
|
|
3401
3374
|
else {
|
|
3402
3375
|
if (this._selectMode === 'range') {
|
|
@@ -3436,7 +3409,7 @@ class OwlDateTimeInputDirective {
|
|
|
3436
3409
|
return this.dateTimeAdapter.isDateInstance(obj) &&
|
|
3437
3410
|
this.dateTimeAdapter.isValid(obj)
|
|
3438
3411
|
? obj
|
|
3439
|
-
:
|
|
3412
|
+
: undefined;
|
|
3440
3413
|
}
|
|
3441
3414
|
/**
|
|
3442
3415
|
* Convert a time string to a date-time string
|
|
@@ -3450,27 +3423,26 @@ class OwlDateTimeInputDirective {
|
|
|
3450
3423
|
const dateString = this.dateTimeAdapter.format(v, this.dateTimeFormats.datePickerInput);
|
|
3451
3424
|
return dateString + ' ' + timeString;
|
|
3452
3425
|
}
|
|
3453
|
-
|
|
3454
|
-
return null;
|
|
3455
|
-
}
|
|
3426
|
+
return undefined;
|
|
3456
3427
|
}
|
|
3457
3428
|
/**
|
|
3458
3429
|
* Handle input change in single mode
|
|
3459
3430
|
*/
|
|
3460
3431
|
changeInputInSingleMode(inputValue) {
|
|
3432
|
+
var _a, _b;
|
|
3461
3433
|
let value = inputValue;
|
|
3462
|
-
if (this.dtPicker.pickerType === 'timer') {
|
|
3434
|
+
if (((_a = this.dtPicker) === null || _a === void 0 ? void 0 : _a.pickerType) === 'timer') {
|
|
3463
3435
|
value = this.convertTimeStringToDateTimeString(value, this.value);
|
|
3464
3436
|
}
|
|
3465
3437
|
let result = this.dateTimeAdapter.parse(value, this.dateTimeFormats.parseInput);
|
|
3466
3438
|
this.lastValueValid = !result || this.dateTimeAdapter.isValid(result);
|
|
3467
3439
|
result = this.getValidDate(result);
|
|
3468
3440
|
// if the newValue is the same as the oldValue, we intend to not fire the valueChange event
|
|
3469
|
-
// result equals to
|
|
3470
|
-
if (!this.isSameValue(result, this._value) || result ===
|
|
3441
|
+
// result equals to undefined means there is input event, but the input value is invalid
|
|
3442
|
+
if (!this.isSameValue(result, this._value) || result === undefined) {
|
|
3471
3443
|
this._value = result;
|
|
3472
3444
|
this.valueChange.emit(result);
|
|
3473
|
-
this.onModelChange(result);
|
|
3445
|
+
(_b = this.onModelChange) === null || _b === void 0 ? void 0 : _b.call(this, result);
|
|
3474
3446
|
this.dateTimeInput.emit({
|
|
3475
3447
|
source: this,
|
|
3476
3448
|
value: result,
|
|
@@ -3482,10 +3454,11 @@ class OwlDateTimeInputDirective {
|
|
|
3482
3454
|
* Handle input change in rangeFrom or rangeTo mode
|
|
3483
3455
|
*/
|
|
3484
3456
|
changeInputInRangeFromToMode(inputValue) {
|
|
3457
|
+
var _a, _b;
|
|
3485
3458
|
const originalValue = this._selectMode === 'rangeFrom'
|
|
3486
3459
|
? this._values[0]
|
|
3487
3460
|
: this._values[1];
|
|
3488
|
-
if (this.dtPicker.pickerType === 'timer') {
|
|
3461
|
+
if (((_a = this.dtPicker) === null || _a === void 0 ? void 0 : _a.pickerType) === 'timer') {
|
|
3489
3462
|
inputValue = this.convertTimeStringToDateTimeString(inputValue, originalValue);
|
|
3490
3463
|
}
|
|
3491
3464
|
let result = this.dateTimeAdapter.parse(inputValue, this.dateTimeFormats.parseInput);
|
|
@@ -3505,7 +3478,7 @@ class OwlDateTimeInputDirective {
|
|
|
3505
3478
|
? [result, this._values[1]]
|
|
3506
3479
|
: [this._values[0], result];
|
|
3507
3480
|
this.valueChange.emit(this._values);
|
|
3508
|
-
this.onModelChange(this._values);
|
|
3481
|
+
(_b = this.onModelChange) === null || _b === void 0 ? void 0 : _b.call(this, this._values);
|
|
3509
3482
|
this.dateTimeInput.emit({
|
|
3510
3483
|
source: this,
|
|
3511
3484
|
value: this._values,
|
|
@@ -3516,10 +3489,11 @@ class OwlDateTimeInputDirective {
|
|
|
3516
3489
|
* Handle input change in range mode
|
|
3517
3490
|
*/
|
|
3518
3491
|
changeInputInRangeMode(inputValue) {
|
|
3492
|
+
var _a, _b;
|
|
3519
3493
|
const selecteds = inputValue.split(this.rangeSeparator);
|
|
3520
3494
|
let fromString = selecteds[0];
|
|
3521
3495
|
let toString = selecteds[1];
|
|
3522
|
-
if (this.dtPicker.pickerType === 'timer') {
|
|
3496
|
+
if (((_a = this.dtPicker) === null || _a === void 0 ? void 0 : _a.pickerType) === 'timer') {
|
|
3523
3497
|
fromString = this.convertTimeStringToDateTimeString(fromString, this.values[0]);
|
|
3524
3498
|
toString = this.convertTimeStringToDateTimeString(toString, this.values[1]);
|
|
3525
3499
|
}
|
|
@@ -3533,10 +3507,10 @@ class OwlDateTimeInputDirective {
|
|
|
3533
3507
|
// if the newValue is the same as the oldValue, we intend to not fire the valueChange event
|
|
3534
3508
|
if (!this.isSameValue(from, this._values[0]) ||
|
|
3535
3509
|
!this.isSameValue(to, this._values[1]) ||
|
|
3536
|
-
(from
|
|
3510
|
+
(!from && !to)) {
|
|
3537
3511
|
this._values = [from, to];
|
|
3538
3512
|
this.valueChange.emit(this._values);
|
|
3539
|
-
this.onModelChange(this._values);
|
|
3513
|
+
(_b = this.onModelChange) === null || _b === void 0 ? void 0 : _b.call(this, this._values);
|
|
3540
3514
|
this.dateTimeInput.emit({
|
|
3541
3515
|
source: this,
|
|
3542
3516
|
value: this._values,
|
|
@@ -3554,33 +3528,30 @@ class OwlDateTimeInputDirective {
|
|
|
3554
3528
|
return first == second;
|
|
3555
3529
|
}
|
|
3556
3530
|
}
|
|
3557
|
-
|
|
3558
|
-
|
|
3559
|
-
|
|
3560
|
-
|
|
3561
|
-
], exportAs: ["
|
|
3562
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3531
|
+
DateTimeInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: DateTimeInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DateTimeAdapter }, { token: NXT_DATE_TIME_FORMATS }], target: i0.ɵɵFactoryTarget.Directive });
|
|
3532
|
+
DateTimeInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: DateTimeInputDirective, selector: "input[nxtDateTime]", inputs: { dateTime: ["nxtDateTime", "dateTime"], dateTimeFilter: "dateTimeFilter", _disabled: "_disabled", min: "min", max: "max", selectMode: "selectMode", rangeSeparator: "rangeSeparator", value: "value", values: "values" }, outputs: { dateTimeChange: "dateTimeChange", dateTimeInput: "dateTimeInput" }, host: { listeners: { "keydown": "handleKeydownOnHost($event)", "blur": "handleBlurOnHost($event)", "input": "handleInputOnHost($event)", "change": "handleChangeOnHost($event)" }, properties: { "attr.aria-haspopup": "this.inputAriaHaspopup", "attr.aria-owns": "this.inputAriaOwns", "attr.min": "this.minIso8601", "attr.max": "this.maxIso8601", "disabled": "this.inputDisabled" } }, providers: [
|
|
3533
|
+
NXT_DATETIME_VALUE_ACCESSOR,
|
|
3534
|
+
NXT_DATETIME_VALIDATORS
|
|
3535
|
+
], exportAs: ["nxtDateTimeInput"], ngImport: i0 });
|
|
3536
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: DateTimeInputDirective, decorators: [{
|
|
3563
3537
|
type: Directive,
|
|
3564
3538
|
args: [{
|
|
3565
|
-
selector: 'input[
|
|
3566
|
-
exportAs: '
|
|
3539
|
+
selector: 'input[nxtDateTime]',
|
|
3540
|
+
exportAs: 'nxtDateTimeInput',
|
|
3567
3541
|
providers: [
|
|
3568
|
-
|
|
3569
|
-
|
|
3542
|
+
NXT_DATETIME_VALUE_ACCESSOR,
|
|
3543
|
+
NXT_DATETIME_VALIDATORS
|
|
3570
3544
|
]
|
|
3571
3545
|
}]
|
|
3572
3546
|
}], ctorParameters: function () {
|
|
3573
|
-
return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DateTimeAdapter, decorators: [{
|
|
3574
|
-
type: Optional
|
|
3575
|
-
}] }, { type: undefined, decorators: [{
|
|
3576
|
-
type: Optional
|
|
3577
|
-
}, {
|
|
3547
|
+
return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DateTimeAdapter }, { type: undefined, decorators: [{
|
|
3578
3548
|
type: Inject,
|
|
3579
|
-
args: [
|
|
3549
|
+
args: [NXT_DATE_TIME_FORMATS]
|
|
3580
3550
|
}] }];
|
|
3581
|
-
}, propDecorators: {
|
|
3582
|
-
type: Input
|
|
3583
|
-
|
|
3551
|
+
}, propDecorators: { dateTime: [{
|
|
3552
|
+
type: Input,
|
|
3553
|
+
args: ['nxtDateTime']
|
|
3554
|
+
}], dateTimeFilter: [{
|
|
3584
3555
|
type: Input
|
|
3585
3556
|
}], _disabled: [{
|
|
3586
3557
|
type: Input
|
|
@@ -3600,10 +3571,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
3600
3571
|
type: Output
|
|
3601
3572
|
}], dateTimeInput: [{
|
|
3602
3573
|
type: Output
|
|
3603
|
-
}],
|
|
3574
|
+
}], inputAriaHaspopup: [{
|
|
3604
3575
|
type: HostBinding,
|
|
3605
3576
|
args: ['attr.aria-haspopup']
|
|
3606
|
-
}],
|
|
3577
|
+
}], inputAriaOwns: [{
|
|
3607
3578
|
type: HostBinding,
|
|
3608
3579
|
args: ['attr.aria-owns']
|
|
3609
3580
|
}], minIso8601: [{
|
|
@@ -3612,7 +3583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
3612
3583
|
}], maxIso8601: [{
|
|
3613
3584
|
type: HostBinding,
|
|
3614
3585
|
args: ['attr.max']
|
|
3615
|
-
}],
|
|
3586
|
+
}], inputDisabled: [{
|
|
3616
3587
|
type: HostBinding,
|
|
3617
3588
|
args: ['disabled']
|
|
3618
3589
|
}], handleKeydownOnHost: [{
|
|
@@ -3629,24 +3600,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
3629
3600
|
args: ['change', ['$event']]
|
|
3630
3601
|
}] } });
|
|
3631
3602
|
|
|
3632
|
-
class
|
|
3633
|
-
constructor(changeDetector) {
|
|
3634
|
-
this.changeDetector = changeDetector;
|
|
3635
|
-
this.stateChanges = Subscription.EMPTY;
|
|
3636
|
-
}
|
|
3603
|
+
class DateTimeTriggerDirective {
|
|
3637
3604
|
get disabled() {
|
|
3638
|
-
|
|
3605
|
+
var _a, _b;
|
|
3606
|
+
return (_a = this._disabled) !== null && _a !== void 0 ? _a : !!((_b = this.dtPicker) === null || _b === void 0 ? void 0 : _b.disabled);
|
|
3639
3607
|
}
|
|
3640
3608
|
set disabled(value) {
|
|
3641
3609
|
this._disabled = value;
|
|
3642
3610
|
}
|
|
3643
|
-
get
|
|
3611
|
+
get triggerDisabledClass() {
|
|
3644
3612
|
return this.disabled;
|
|
3645
3613
|
}
|
|
3614
|
+
constructor(changeDetector) {
|
|
3615
|
+
this.changeDetector = changeDetector;
|
|
3616
|
+
}
|
|
3646
3617
|
ngOnInit() {
|
|
3647
3618
|
}
|
|
3648
3619
|
ngOnChanges(changes) {
|
|
3649
|
-
if (changes
|
|
3620
|
+
if ('datepicker' in changes) {
|
|
3650
3621
|
this.watchStateChanges();
|
|
3651
3622
|
}
|
|
3652
3623
|
}
|
|
@@ -3654,7 +3625,9 @@ class OwlDateTimeTriggerDirective {
|
|
|
3654
3625
|
this.watchStateChanges();
|
|
3655
3626
|
}
|
|
3656
3627
|
ngOnDestroy() {
|
|
3657
|
-
|
|
3628
|
+
var _a;
|
|
3629
|
+
(_a = this.stateChanges) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
|
3630
|
+
this.stateChanges = undefined;
|
|
3658
3631
|
}
|
|
3659
3632
|
handleClickOnHost(event) {
|
|
3660
3633
|
if (this.dtPicker) {
|
|
@@ -3663,7 +3636,9 @@ class OwlDateTimeTriggerDirective {
|
|
|
3663
3636
|
}
|
|
3664
3637
|
}
|
|
3665
3638
|
watchStateChanges() {
|
|
3666
|
-
|
|
3639
|
+
var _a;
|
|
3640
|
+
(_a = this.stateChanges) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
|
3641
|
+
this.stateChanges = undefined;
|
|
3667
3642
|
const inputDisabled = this.dtPicker && this.dtPicker.dtInput ?
|
|
3668
3643
|
this.dtPicker.dtInput.disabledChange : of();
|
|
3669
3644
|
const pickerDisabled = this.dtPicker ?
|
|
@@ -3674,41 +3649,35 @@ class OwlDateTimeTriggerDirective {
|
|
|
3674
3649
|
});
|
|
3675
3650
|
}
|
|
3676
3651
|
}
|
|
3677
|
-
|
|
3678
|
-
|
|
3679
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3652
|
+
DateTimeTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: DateTimeTriggerDirective, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
3653
|
+
DateTimeTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: DateTimeTriggerDirective, selector: "[nxtDateTimeTrigger]", inputs: { dtPicker: ["nxtDateTimeTrigger", "dtPicker"], disabled: "disabled" }, host: { listeners: { "click": "handleClickOnHost($event)" }, properties: { "class.nxt-dt-trigger-disabled": "this.triggerDisabledClass" } }, usesOnChanges: true, ngImport: i0 });
|
|
3654
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: DateTimeTriggerDirective, decorators: [{
|
|
3680
3655
|
type: Directive,
|
|
3681
3656
|
args: [{
|
|
3682
|
-
selector: '[
|
|
3657
|
+
selector: '[nxtDateTimeTrigger]'
|
|
3683
3658
|
}]
|
|
3684
3659
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { dtPicker: [{
|
|
3685
3660
|
type: Input,
|
|
3686
|
-
args: ['
|
|
3661
|
+
args: ['nxtDateTimeTrigger']
|
|
3687
3662
|
}], disabled: [{
|
|
3688
3663
|
type: Input
|
|
3689
|
-
}],
|
|
3664
|
+
}], triggerDisabledClass: [{
|
|
3690
3665
|
type: HostBinding,
|
|
3691
|
-
args: ['class.
|
|
3666
|
+
args: ['class.nxt-dt-trigger-disabled']
|
|
3692
3667
|
}], handleClickOnHost: [{
|
|
3693
3668
|
type: HostListener,
|
|
3694
3669
|
args: ['click', ['$event']]
|
|
3695
3670
|
}] } });
|
|
3696
3671
|
|
|
3697
3672
|
let uniqueId = 0;
|
|
3698
|
-
class
|
|
3673
|
+
class DialogConfig {
|
|
3699
3674
|
constructor() {
|
|
3700
|
-
/**
|
|
3701
|
-
* ID of the element that describes the dialog.
|
|
3702
|
-
*/
|
|
3703
|
-
this.ariaDescribedBy = null;
|
|
3704
3675
|
/**
|
|
3705
3676
|
* Whether to focus the dialog when the dialog is opened
|
|
3706
3677
|
*/
|
|
3707
3678
|
this.autoFocus = true;
|
|
3708
3679
|
/** Whether the dialog has a backdrop. */
|
|
3709
3680
|
this.hasBackdrop = true;
|
|
3710
|
-
/** Data being injected into the child component. */
|
|
3711
|
-
this.data = null;
|
|
3712
3681
|
/** Whether the user can use escape or clicking outside to close a modal. */
|
|
3713
3682
|
this.disableClose = false;
|
|
3714
3683
|
/**
|
|
@@ -3719,10 +3688,6 @@ class OwlDialogConfig {
|
|
|
3719
3688
|
* Custom class for the pane
|
|
3720
3689
|
* */
|
|
3721
3690
|
this.paneClass = '';
|
|
3722
|
-
/**
|
|
3723
|
-
* Mouse Event
|
|
3724
|
-
* */
|
|
3725
|
-
this.event = null;
|
|
3726
3691
|
/**
|
|
3727
3692
|
* Custom class for the backdrop
|
|
3728
3693
|
* */
|
|
@@ -3745,22 +3710,21 @@ class OwlDialogConfig {
|
|
|
3745
3710
|
* Learn more this from https://material.angular.io/cdk/overlay/overview#scroll-strategies
|
|
3746
3711
|
* */
|
|
3747
3712
|
this.scrollStrategy = new NoopScrollStrategy();
|
|
3748
|
-
this.id = `
|
|
3713
|
+
this.id = `nxt-dialog-${uniqueId++}`;
|
|
3749
3714
|
}
|
|
3750
3715
|
}
|
|
3751
3716
|
|
|
3752
|
-
class
|
|
3717
|
+
class DialogRef {
|
|
3753
3718
|
constructor(overlayRef, container, id, location) {
|
|
3719
|
+
var _a;
|
|
3754
3720
|
this.overlayRef = overlayRef;
|
|
3755
3721
|
this.container = container;
|
|
3756
3722
|
this.id = id;
|
|
3757
3723
|
this._beforeClose$ = new Subject();
|
|
3758
3724
|
this._afterOpen$ = new Subject();
|
|
3759
3725
|
this._afterClosed$ = new Subject();
|
|
3760
|
-
/** Subscription to changes in the user's location. */
|
|
3761
|
-
this.locationChanged = Subscription.EMPTY;
|
|
3762
3726
|
/** Whether the user is allowed to close the dialog. */
|
|
3763
|
-
this.disableClose = this.container.config.disableClose;
|
|
3727
|
+
this.disableClose = !!((_a = this.container.config) === null || _a === void 0 ? void 0 : _a.disableClose);
|
|
3764
3728
|
this.container.animationStateChanged
|
|
3765
3729
|
.pipe(filter((event) => event.phaseName === 'done' && event.toState === 'enter'), take(1))
|
|
3766
3730
|
.subscribe(() => {
|
|
@@ -3770,18 +3734,21 @@ class OwlDialogRef {
|
|
|
3770
3734
|
this.container.animationStateChanged
|
|
3771
3735
|
.pipe(filter((event) => event.phaseName === 'done' && event.toState === 'exit'), take(1))
|
|
3772
3736
|
.subscribe(() => {
|
|
3737
|
+
var _a;
|
|
3773
3738
|
this.overlayRef.dispose();
|
|
3774
|
-
this.locationChanged.unsubscribe();
|
|
3739
|
+
(_a = this.locationChanged) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
|
3740
|
+
this.locationChanged = undefined;
|
|
3775
3741
|
this._afterClosed$.next(this.result);
|
|
3776
3742
|
this._afterClosed$.complete();
|
|
3777
|
-
this.componentInstance =
|
|
3743
|
+
this.componentInstance = undefined;
|
|
3778
3744
|
});
|
|
3779
3745
|
this.overlayRef.keydownEvents()
|
|
3780
3746
|
.pipe(filter(event => event.keyCode === ESCAPE && !this.disableClose))
|
|
3781
3747
|
.subscribe(() => this.close());
|
|
3782
3748
|
if (location) {
|
|
3783
3749
|
this.locationChanged = location.subscribe(() => {
|
|
3784
|
-
|
|
3750
|
+
var _a;
|
|
3751
|
+
if ((_a = this.container.config) === null || _a === void 0 ? void 0 : _a.closeOnNavigation) {
|
|
3785
3752
|
this.close();
|
|
3786
3753
|
}
|
|
3787
3754
|
});
|
|
@@ -3875,11 +3842,11 @@ class OwlDialogRef {
|
|
|
3875
3842
|
* @param sources The source objects from which properties will be copied.
|
|
3876
3843
|
*/
|
|
3877
3844
|
function extendObject(dest, ...sources) {
|
|
3878
|
-
if (dest == null) {
|
|
3845
|
+
if (dest == null || dest == undefined) {
|
|
3879
3846
|
throw TypeError('Cannot convert undefined or null to object');
|
|
3880
3847
|
}
|
|
3881
3848
|
for (const source of sources) {
|
|
3882
|
-
if (source != null) {
|
|
3849
|
+
if (source != null && source != undefined) {
|
|
3883
3850
|
for (const key in source) {
|
|
3884
3851
|
if (source.hasOwnProperty(key)) {
|
|
3885
3852
|
dest[key] = source[key];
|
|
@@ -3899,15 +3866,40 @@ const zoomFadeInFrom = {
|
|
|
3899
3866
|
transform: 'translateX({{ x }}) translateY({{ y }}) scale({{scale}})',
|
|
3900
3867
|
transformOrigin: '{{ ox }} {{ oy }}'
|
|
3901
3868
|
};
|
|
3902
|
-
class
|
|
3869
|
+
class DialogContainerComponent extends BasePortalOutlet {
|
|
3870
|
+
get config() {
|
|
3871
|
+
return this._config;
|
|
3872
|
+
}
|
|
3873
|
+
get dialogContainerClass() {
|
|
3874
|
+
return true;
|
|
3875
|
+
}
|
|
3876
|
+
get dialogContainerTabIndex() {
|
|
3877
|
+
return -1;
|
|
3878
|
+
}
|
|
3879
|
+
get dialogContainerId() {
|
|
3880
|
+
var _a;
|
|
3881
|
+
return (_a = this._config) === null || _a === void 0 ? void 0 : _a.id;
|
|
3882
|
+
}
|
|
3883
|
+
get dialogContainerRole() {
|
|
3884
|
+
var _a;
|
|
3885
|
+
return (_a = this._config) === null || _a === void 0 ? void 0 : _a.role;
|
|
3886
|
+
}
|
|
3887
|
+
get dialogContainerAriaLabelledby() {
|
|
3888
|
+
return this.ariaLabelledBy;
|
|
3889
|
+
}
|
|
3890
|
+
get dialogContainerAriaDescribedby() {
|
|
3891
|
+
var _a;
|
|
3892
|
+
return (_a = this._config) === null || _a === void 0 ? void 0 : _a.ariaDescribedBy;
|
|
3893
|
+
}
|
|
3894
|
+
get dialogContainerAnimation() {
|
|
3895
|
+
return { value: this.state, params: this.params };
|
|
3896
|
+
}
|
|
3903
3897
|
constructor(changeDetector, elementRef, focusTrapFactory, document) {
|
|
3904
3898
|
super();
|
|
3905
3899
|
this.changeDetector = changeDetector;
|
|
3906
3900
|
this.elementRef = elementRef;
|
|
3907
3901
|
this.focusTrapFactory = focusTrapFactory;
|
|
3908
3902
|
this.document = document;
|
|
3909
|
-
/** ID of the element that should be considered as the dialog's label. */
|
|
3910
|
-
this.ariaLabelledBy = null;
|
|
3911
3903
|
/** Emits when an animation state changes. */
|
|
3912
3904
|
this.animationStateChanged = new EventEmitter();
|
|
3913
3905
|
this.isAnimating = false;
|
|
@@ -3920,40 +3912,14 @@ class OwlDialogContainerComponent extends BasePortalOutlet {
|
|
|
3920
3912
|
oy: '50%',
|
|
3921
3913
|
scale: 0
|
|
3922
3914
|
};
|
|
3923
|
-
// A variable to hold the focused element before the dialog was open.
|
|
3924
|
-
// This would help us to refocus back to element when the dialog was closed.
|
|
3925
|
-
this.elementFocusedBeforeDialogWasOpened = null;
|
|
3926
|
-
}
|
|
3927
|
-
get config() {
|
|
3928
|
-
return this._config;
|
|
3929
|
-
}
|
|
3930
|
-
get owlDialogContainerClass() {
|
|
3931
|
-
return true;
|
|
3932
|
-
}
|
|
3933
|
-
get owlDialogContainerTabIndex() {
|
|
3934
|
-
return -1;
|
|
3935
|
-
}
|
|
3936
|
-
get owlDialogContainerId() {
|
|
3937
|
-
return this._config.id;
|
|
3938
|
-
}
|
|
3939
|
-
get owlDialogContainerRole() {
|
|
3940
|
-
return this._config.role || null;
|
|
3941
|
-
}
|
|
3942
|
-
get owlDialogContainerAriaLabelledby() {
|
|
3943
|
-
return this.ariaLabelledBy;
|
|
3944
|
-
}
|
|
3945
|
-
get owlDialogContainerAriaDescribedby() {
|
|
3946
|
-
return this._config.ariaDescribedBy || null;
|
|
3947
|
-
}
|
|
3948
|
-
get owlDialogContainerAnimation() {
|
|
3949
|
-
return { value: this.state, params: this.params };
|
|
3950
3915
|
}
|
|
3951
3916
|
ngOnInit() { }
|
|
3952
3917
|
/**
|
|
3953
3918
|
* Attach a ComponentPortal as content to this dialog container.
|
|
3954
3919
|
*/
|
|
3955
3920
|
attachComponentPortal(portal) {
|
|
3956
|
-
|
|
3921
|
+
var _a;
|
|
3922
|
+
if ((_a = this.portalOutlet) === null || _a === void 0 ? void 0 : _a.hasAttached()) {
|
|
3957
3923
|
throw Error('Attempting to attach dialog content after content is already attached');
|
|
3958
3924
|
}
|
|
3959
3925
|
this.savePreviouslyFocusedElement();
|
|
@@ -4016,30 +3982,31 @@ class OwlDialogContainerComponent extends BasePortalOutlet {
|
|
|
4016
3982
|
if (this.document) {
|
|
4017
3983
|
this.elementFocusedBeforeDialogWasOpened = this.document
|
|
4018
3984
|
.activeElement;
|
|
4019
|
-
Promise.resolve().then(() => this.elementRef.nativeElement.focus());
|
|
3985
|
+
Promise.resolve().then(() => this.elementRef.nativeElement.focus()).catch(() => { });
|
|
4020
3986
|
}
|
|
4021
3987
|
}
|
|
4022
3988
|
trapFocus() {
|
|
3989
|
+
var _a, _b;
|
|
4023
3990
|
if (!this.focusTrap) {
|
|
4024
3991
|
this.focusTrap = this.focusTrapFactory.create(this.elementRef.nativeElement);
|
|
4025
3992
|
}
|
|
4026
|
-
if (this._config.autoFocus) {
|
|
4027
|
-
this.focusTrap.focusInitialElementWhenReady();
|
|
3993
|
+
if ((_a = this._config) === null || _a === void 0 ? void 0 : _a.autoFocus) {
|
|
3994
|
+
(_b = this.focusTrap) === null || _b === void 0 ? void 0 : _b.focusInitialElementWhenReady().catch(() => { });
|
|
4028
3995
|
}
|
|
4029
3996
|
}
|
|
4030
3997
|
restoreFocus() {
|
|
4031
3998
|
const toFocus = this.elementFocusedBeforeDialogWasOpened;
|
|
4032
|
-
// We need the extra check, because IE can set the `activeElement` to null in some cases.
|
|
4033
3999
|
if (toFocus && typeof toFocus.focus === 'function') {
|
|
4034
4000
|
toFocus.focus();
|
|
4035
4001
|
}
|
|
4036
4002
|
if (this.focusTrap) {
|
|
4037
4003
|
this.focusTrap.destroy();
|
|
4004
|
+
this.focusTrap = undefined;
|
|
4038
4005
|
}
|
|
4039
4006
|
}
|
|
4040
4007
|
}
|
|
4041
|
-
|
|
4042
|
-
|
|
4008
|
+
DialogContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: DialogContainerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i4.ConfigurableFocusTrapFactory }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
4009
|
+
DialogContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: DialogContainerComponent, selector: "nxt-dialog-container", host: { listeners: { "@slideModal.start": "onAnimationStart($event)", "@slideModal.done": "onAnimationDone($event)" }, properties: { "class.nxt-dialog-container": "this.dialogContainerClass", "attr.tabindex": "this.dialogContainerTabIndex", "attr.id": "this.dialogContainerId", "attr.role": "this.dialogContainerRole", "attr.aria-labelledby": "this.dialogContainerAriaLabelledby", "attr.aria-describedby": "this.dialogContainerAriaDescribedby", "@slideModal": "this.dialogContainerAnimation" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>\n", dependencies: [{ kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [
|
|
4043
4010
|
trigger('slideModal', [
|
|
4044
4011
|
transition('void => enter', [
|
|
4045
4012
|
style(zoomFadeInFrom),
|
|
@@ -4063,9 +4030,9 @@ OwlDialogContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
|
|
|
4063
4030
|
transition('enter => exit', [animateChild(), animate(200, style(zoomFadeIn))], { params: { x: '0px', y: '0px', ox: '50%', oy: '50%' } })
|
|
4064
4031
|
])
|
|
4065
4032
|
] });
|
|
4066
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4033
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: DialogContainerComponent, decorators: [{
|
|
4067
4034
|
type: Component,
|
|
4068
|
-
args: [{ selector: '
|
|
4035
|
+
args: [{ selector: 'nxt-dialog-container', animations: [
|
|
4069
4036
|
trigger('slideModal', [
|
|
4070
4037
|
transition('void => enter', [
|
|
4071
4038
|
style(zoomFadeInFrom),
|
|
@@ -4090,7 +4057,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
4090
4057
|
])
|
|
4091
4058
|
], template: "<ng-template cdkPortalOutlet></ng-template>\n" }]
|
|
4092
4059
|
}], ctorParameters: function () {
|
|
4093
|
-
return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i4.ConfigurableFocusTrapFactory }, { type:
|
|
4060
|
+
return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i4.ConfigurableFocusTrapFactory }, { type: Document, decorators: [{
|
|
4094
4061
|
type: Optional
|
|
4095
4062
|
}, {
|
|
4096
4063
|
type: Inject,
|
|
@@ -4099,25 +4066,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
4099
4066
|
}, propDecorators: { portalOutlet: [{
|
|
4100
4067
|
type: ViewChild,
|
|
4101
4068
|
args: [CdkPortalOutlet, { static: true }]
|
|
4102
|
-
}],
|
|
4069
|
+
}], dialogContainerClass: [{
|
|
4103
4070
|
type: HostBinding,
|
|
4104
|
-
args: ['class.
|
|
4105
|
-
}],
|
|
4071
|
+
args: ['class.nxt-dialog-container']
|
|
4072
|
+
}], dialogContainerTabIndex: [{
|
|
4106
4073
|
type: HostBinding,
|
|
4107
4074
|
args: ['attr.tabindex']
|
|
4108
|
-
}],
|
|
4075
|
+
}], dialogContainerId: [{
|
|
4109
4076
|
type: HostBinding,
|
|
4110
4077
|
args: ['attr.id']
|
|
4111
|
-
}],
|
|
4078
|
+
}], dialogContainerRole: [{
|
|
4112
4079
|
type: HostBinding,
|
|
4113
4080
|
args: ['attr.role']
|
|
4114
|
-
}],
|
|
4081
|
+
}], dialogContainerAriaLabelledby: [{
|
|
4115
4082
|
type: HostBinding,
|
|
4116
4083
|
args: ['attr.aria-labelledby']
|
|
4117
|
-
}],
|
|
4084
|
+
}], dialogContainerAriaDescribedby: [{
|
|
4118
4085
|
type: HostBinding,
|
|
4119
4086
|
args: ['attr.aria-describedby']
|
|
4120
|
-
}],
|
|
4087
|
+
}], dialogContainerAnimation: [{
|
|
4121
4088
|
type: HostBinding,
|
|
4122
4089
|
args: ['@slideModal']
|
|
4123
4090
|
}], onAnimationStart: [{
|
|
@@ -4128,26 +4095,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
4128
4095
|
args: ['@slideModal.done', ['$event']]
|
|
4129
4096
|
}] } });
|
|
4130
4097
|
|
|
4131
|
-
const
|
|
4098
|
+
const NXT_DIALOG_DATA = new InjectionToken('NXT_DIALOG_DATA');
|
|
4132
4099
|
/**
|
|
4133
4100
|
* Injection token that determines the scroll handling while the dialog is open.
|
|
4134
4101
|
* */
|
|
4135
|
-
const
|
|
4136
|
-
function
|
|
4102
|
+
const NXT_DIALOG_SCROLL_STRATEGY = new InjectionToken('NXT_DIALOG_SCROLL_STRATEGY');
|
|
4103
|
+
function NXT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay) {
|
|
4137
4104
|
const fn = () => overlay.scrollStrategies.block();
|
|
4138
4105
|
return fn;
|
|
4139
4106
|
}
|
|
4140
4107
|
/** @docs-private */
|
|
4141
|
-
const
|
|
4142
|
-
provide:
|
|
4108
|
+
const NXT_DIALOG_SCROLL_STRATEGY_PROVIDER = {
|
|
4109
|
+
provide: NXT_DIALOG_SCROLL_STRATEGY,
|
|
4143
4110
|
deps: [Overlay],
|
|
4144
|
-
useFactory:
|
|
4111
|
+
useFactory: NXT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY
|
|
4145
4112
|
};
|
|
4146
4113
|
/** I
|
|
4147
4114
|
* njection token that can be used to specify default dialog options.
|
|
4148
4115
|
* */
|
|
4149
|
-
const
|
|
4150
|
-
class
|
|
4116
|
+
const NXT_DIALOG_DEFAULT_OPTIONS = new InjectionToken('NXT_DIALOG_DEFAULT_OPTIONS');
|
|
4117
|
+
class DialogService {
|
|
4118
|
+
/** Keeps track of the currently-open dialogs. */
|
|
4119
|
+
get openDialogs() {
|
|
4120
|
+
return this.parentDialog
|
|
4121
|
+
? this.parentDialog.openDialogs
|
|
4122
|
+
: this._openDialogsAtThisLevel;
|
|
4123
|
+
}
|
|
4124
|
+
/** Stream that emits when a dialog has been opened. */
|
|
4125
|
+
get afterOpen() {
|
|
4126
|
+
return this.parentDialog
|
|
4127
|
+
? this.parentDialog.afterOpen
|
|
4128
|
+
: this._afterOpenAtThisLevel;
|
|
4129
|
+
}
|
|
4130
|
+
get _afterAllClosed() {
|
|
4131
|
+
const parent = this.parentDialog;
|
|
4132
|
+
return parent
|
|
4133
|
+
? parent._afterAllClosed
|
|
4134
|
+
: this._afterAllClosedAtThisLevel;
|
|
4135
|
+
}
|
|
4151
4136
|
constructor(overlay, injector, location, scrollStrategy, defaultOptions, parentDialog, overlayContainer) {
|
|
4152
4137
|
this.overlay = overlay;
|
|
4153
4138
|
this.injector = injector;
|
|
@@ -4171,24 +4156,6 @@ class OwlDialogService {
|
|
|
4171
4156
|
location.subscribe(() => this.closeAll());
|
|
4172
4157
|
}
|
|
4173
4158
|
}
|
|
4174
|
-
/** Keeps track of the currently-open dialogs. */
|
|
4175
|
-
get openDialogs() {
|
|
4176
|
-
return this.parentDialog
|
|
4177
|
-
? this.parentDialog.openDialogs
|
|
4178
|
-
: this._openDialogsAtThisLevel;
|
|
4179
|
-
}
|
|
4180
|
-
/** Stream that emits when a dialog has been opened. */
|
|
4181
|
-
get afterOpen() {
|
|
4182
|
-
return this.parentDialog
|
|
4183
|
-
? this.parentDialog.afterOpen
|
|
4184
|
-
: this._afterOpenAtThisLevel;
|
|
4185
|
-
}
|
|
4186
|
-
get _afterAllClosed() {
|
|
4187
|
-
const parent = this.parentDialog;
|
|
4188
|
-
return parent
|
|
4189
|
-
? parent._afterAllClosed
|
|
4190
|
-
: this._afterAllClosedAtThisLevel;
|
|
4191
|
-
}
|
|
4192
4159
|
open(componentOrTemplateRef, config) {
|
|
4193
4160
|
config = applyConfigDefaults(config, this.defaultOptions);
|
|
4194
4161
|
if (config.id && this.getDialogById(config.id)) {
|
|
@@ -4225,7 +4192,7 @@ class OwlDialogService {
|
|
|
4225
4192
|
return this.openDialogs.find(dialog => dialog.id === id);
|
|
4226
4193
|
}
|
|
4227
4194
|
attachDialogContent(componentOrTemplateRef, dialogContainer, overlayRef, config) {
|
|
4228
|
-
const dialogRef = new
|
|
4195
|
+
const dialogRef = new DialogRef(overlayRef, dialogContainer, config.id, this.location);
|
|
4229
4196
|
if (config.hasBackdrop) {
|
|
4230
4197
|
overlayRef.backdropClick().subscribe(() => {
|
|
4231
4198
|
if (!dialogRef.disableClose) {
|
|
@@ -4233,9 +4200,7 @@ class OwlDialogService {
|
|
|
4233
4200
|
}
|
|
4234
4201
|
});
|
|
4235
4202
|
}
|
|
4236
|
-
if (componentOrTemplateRef instanceof TemplateRef) {
|
|
4237
|
-
}
|
|
4238
|
-
else {
|
|
4203
|
+
if (!(componentOrTemplateRef instanceof TemplateRef)) {
|
|
4239
4204
|
const injector = this.createInjector(config, dialogRef, dialogContainer);
|
|
4240
4205
|
const contentRef = dialogContainer.attachComponentPortal(new ComponentPortal(componentOrTemplateRef, undefined, injector));
|
|
4241
4206
|
dialogRef.componentInstance = contentRef.instance;
|
|
@@ -4251,9 +4216,9 @@ class OwlDialogService {
|
|
|
4251
4216
|
config.viewContainerRef.injector;
|
|
4252
4217
|
return Injector.create({
|
|
4253
4218
|
providers: [
|
|
4254
|
-
{ provide:
|
|
4255
|
-
{ provide:
|
|
4256
|
-
{ provide:
|
|
4219
|
+
{ provide: DialogRef, useValue: dialogRef },
|
|
4220
|
+
{ provide: DialogContainerComponent, useValue: dialogContainer },
|
|
4221
|
+
{ provide: NXT_DIALOG_DATA, useValue: config.data }
|
|
4257
4222
|
],
|
|
4258
4223
|
parent: userInjector || this.injector
|
|
4259
4224
|
});
|
|
@@ -4263,7 +4228,7 @@ class OwlDialogService {
|
|
|
4263
4228
|
return this.overlay.create(overlayConfig);
|
|
4264
4229
|
}
|
|
4265
4230
|
attachDialogContainer(overlayRef, config) {
|
|
4266
|
-
const containerPortal = new ComponentPortal(
|
|
4231
|
+
const containerPortal = new ComponentPortal(DialogContainerComponent, config.viewContainerRef);
|
|
4267
4232
|
const containerRef = overlayRef.attach(containerPortal);
|
|
4268
4233
|
containerRef.instance.setConfig(config);
|
|
4269
4234
|
return containerRef.instance;
|
|
@@ -4325,25 +4290,31 @@ class OwlDialogService {
|
|
|
4325
4290
|
}
|
|
4326
4291
|
}
|
|
4327
4292
|
}
|
|
4328
|
-
|
|
4329
|
-
|
|
4330
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4293
|
+
DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: DialogService, deps: [{ token: i1.Overlay }, { token: i0.Injector }, { token: Location, optional: true }, { token: NXT_DIALOG_SCROLL_STRATEGY }, { token: NXT_DIALOG_DEFAULT_OPTIONS, optional: true }, { token: DialogService, optional: true, skipSelf: true }, { token: i1.OverlayContainer }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
4294
|
+
DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: DialogService });
|
|
4295
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: DialogService, decorators: [{
|
|
4331
4296
|
type: Injectable
|
|
4332
4297
|
}], ctorParameters: function () {
|
|
4333
|
-
return [{ type: i1.Overlay }, { type: i0.Injector }, { type:
|
|
4298
|
+
return [{ type: i1.Overlay }, { type: i0.Injector }, { type: undefined, decorators: [{
|
|
4334
4299
|
type: Optional
|
|
4300
|
+
}, {
|
|
4301
|
+
type: Inject,
|
|
4302
|
+
args: [Location]
|
|
4335
4303
|
}] }, { type: undefined, decorators: [{
|
|
4336
4304
|
type: Inject,
|
|
4337
|
-
args: [
|
|
4338
|
-
}] }, { type:
|
|
4305
|
+
args: [NXT_DIALOG_SCROLL_STRATEGY]
|
|
4306
|
+
}] }, { type: undefined, decorators: [{
|
|
4339
4307
|
type: Optional
|
|
4340
4308
|
}, {
|
|
4341
4309
|
type: Inject,
|
|
4342
|
-
args: [
|
|
4343
|
-
}] }, { type:
|
|
4310
|
+
args: [NXT_DIALOG_DEFAULT_OPTIONS]
|
|
4311
|
+
}] }, { type: undefined, decorators: [{
|
|
4344
4312
|
type: Optional
|
|
4345
4313
|
}, {
|
|
4346
4314
|
type: SkipSelf
|
|
4315
|
+
}, {
|
|
4316
|
+
type: Inject,
|
|
4317
|
+
args: [DialogService]
|
|
4347
4318
|
}] }, { type: i1.OverlayContainer }];
|
|
4348
4319
|
} });
|
|
4349
4320
|
/**
|
|
@@ -4354,85 +4325,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
4354
4325
|
* @returns The new configuration object.
|
|
4355
4326
|
*/
|
|
4356
4327
|
function applyConfigDefaults(config, defaultOptions) {
|
|
4357
|
-
return extendObject(new
|
|
4328
|
+
return extendObject(new DialogConfig(), config, defaultOptions);
|
|
4358
4329
|
}
|
|
4359
4330
|
|
|
4360
4331
|
/** Injection token that determines the scroll handling while the dtPicker is open. */
|
|
4361
|
-
const
|
|
4332
|
+
const NXT_DTPICKER_SCROLL_STRATEGY = new InjectionToken('NXT_DTPICKER_SCROLL_STRATEGY');
|
|
4362
4333
|
/** @docs-private */
|
|
4363
|
-
function
|
|
4334
|
+
function NXT_DTPICKER_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay) {
|
|
4364
4335
|
const fn = () => overlay.scrollStrategies.block();
|
|
4365
4336
|
return fn;
|
|
4366
4337
|
}
|
|
4367
4338
|
/** @docs-private */
|
|
4368
|
-
const
|
|
4369
|
-
provide:
|
|
4339
|
+
const NXT_DTPICKER_SCROLL_STRATEGY_PROVIDER = {
|
|
4340
|
+
provide: NXT_DTPICKER_SCROLL_STRATEGY,
|
|
4370
4341
|
deps: [Overlay],
|
|
4371
|
-
useFactory:
|
|
4342
|
+
useFactory: NXT_DTPICKER_SCROLL_STRATEGY_PROVIDER_FACTORY
|
|
4372
4343
|
};
|
|
4373
|
-
class
|
|
4374
|
-
constructor(overlay, viewContainerRef, dialogService, ngZone, changeDetector, dateTimeAdapter, defaultScrollStrategy, dateTimeFormats, document) {
|
|
4375
|
-
super(dateTimeAdapter, dateTimeFormats);
|
|
4376
|
-
this.overlay = overlay;
|
|
4377
|
-
this.viewContainerRef = viewContainerRef;
|
|
4378
|
-
this.dialogService = dialogService;
|
|
4379
|
-
this.ngZone = ngZone;
|
|
4380
|
-
this.changeDetector = changeDetector;
|
|
4381
|
-
this.dateTimeAdapter = dateTimeAdapter;
|
|
4382
|
-
this.dateTimeFormats = dateTimeFormats;
|
|
4383
|
-
this.document = document;
|
|
4384
|
-
/** Custom class for the picker backdrop. */
|
|
4385
|
-
this.backdropClass = [];
|
|
4386
|
-
/** Custom class for the picker overlay pane. */
|
|
4387
|
-
this.panelClass = [];
|
|
4388
|
-
/**
|
|
4389
|
-
* Set the type of the dateTime picker
|
|
4390
|
-
* 'both' -- show both calendar and timer
|
|
4391
|
-
* 'calendar' -- show only calendar
|
|
4392
|
-
* 'timer' -- show only timer
|
|
4393
|
-
*/
|
|
4394
|
-
this._pickerType = 'both';
|
|
4395
|
-
/**
|
|
4396
|
-
* Whether the picker open as a dialog
|
|
4397
|
-
*/
|
|
4398
|
-
this._pickerMode = 'popup';
|
|
4399
|
-
/** Whether the calendar is open. */
|
|
4400
|
-
this._opened = false;
|
|
4401
|
-
/**
|
|
4402
|
-
* Callback when the picker is closed
|
|
4403
|
-
* */
|
|
4404
|
-
this.afterPickerClosed = new EventEmitter();
|
|
4405
|
-
/**
|
|
4406
|
-
* Callback when the picker is open
|
|
4407
|
-
* */
|
|
4408
|
-
this.afterPickerOpen = new EventEmitter();
|
|
4409
|
-
/**
|
|
4410
|
-
* Emits selected year in multi-year view
|
|
4411
|
-
* This doesn't imply a change on the selected date.
|
|
4412
|
-
* */
|
|
4413
|
-
this.yearSelected = new EventEmitter();
|
|
4414
|
-
/**
|
|
4415
|
-
* Emits selected month in year view
|
|
4416
|
-
* This doesn't imply a change on the selected date.
|
|
4417
|
-
* */
|
|
4418
|
-
this.monthSelected = new EventEmitter();
|
|
4419
|
-
/**
|
|
4420
|
-
* Emit when the selected value has been confirmed
|
|
4421
|
-
* */
|
|
4422
|
-
this.confirmSelectedChange = new EventEmitter();
|
|
4423
|
-
/**
|
|
4424
|
-
* Emits when the date time picker is disabled.
|
|
4425
|
-
* */
|
|
4426
|
-
this.disabledChange = new EventEmitter();
|
|
4427
|
-
this.dtInputSub = Subscription.EMPTY;
|
|
4428
|
-
this.hidePickerStreamSub = Subscription.EMPTY;
|
|
4429
|
-
this.confirmSelectedStreamSub = Subscription.EMPTY;
|
|
4430
|
-
this.pickerOpenedStreamSub = Subscription.EMPTY;
|
|
4431
|
-
/** The element that was focused before the date time picker was opened. */
|
|
4432
|
-
this.focusedElementBeforeOpen = null;
|
|
4433
|
-
this._selecteds = [];
|
|
4434
|
-
this.defaultScrollStrategy = defaultScrollStrategy;
|
|
4435
|
-
}
|
|
4344
|
+
class DateTimeComponent extends DateTimeDirective {
|
|
4436
4345
|
get startAt() {
|
|
4437
4346
|
// If an explicit startAt is set we start there, otherwise we start at whatever the currently
|
|
4438
4347
|
// selected value is.
|
|
@@ -4441,19 +4350,17 @@ class OwlDateTimeComponent extends OwlDateTimeDirective {
|
|
|
4441
4350
|
}
|
|
4442
4351
|
if (this._dtInput) {
|
|
4443
4352
|
if (this._dtInput.selectMode === 'single') {
|
|
4444
|
-
return this._dtInput.value
|
|
4353
|
+
return this._dtInput.value;
|
|
4445
4354
|
}
|
|
4446
4355
|
else if (this._dtInput.selectMode === 'range' ||
|
|
4447
4356
|
this._dtInput.selectMode === 'rangeFrom') {
|
|
4448
|
-
return this._dtInput.values[0]
|
|
4357
|
+
return this._dtInput.values[0];
|
|
4449
4358
|
}
|
|
4450
4359
|
else if (this._dtInput.selectMode === 'rangeTo') {
|
|
4451
|
-
return this._dtInput.values[1]
|
|
4360
|
+
return this._dtInput.values[1];
|
|
4452
4361
|
}
|
|
4453
4362
|
}
|
|
4454
|
-
|
|
4455
|
-
return null;
|
|
4456
|
-
}
|
|
4363
|
+
return;
|
|
4457
4364
|
}
|
|
4458
4365
|
set startAt(date) {
|
|
4459
4366
|
this._startAt = this.getValidDate(this.dateTimeAdapter.deserialize(date));
|
|
@@ -4481,9 +4388,8 @@ class OwlDateTimeComponent extends OwlDateTimeDirective {
|
|
|
4481
4388
|
}
|
|
4482
4389
|
}
|
|
4483
4390
|
get disabled() {
|
|
4484
|
-
|
|
4485
|
-
|
|
4486
|
-
: !!this._disabled;
|
|
4391
|
+
var _a, _b;
|
|
4392
|
+
return (_a = this._disabled) !== null && _a !== void 0 ? _a : !!((_b = this._dtInput) === null || _b === void 0 ? void 0 : _b.disabled);
|
|
4487
4393
|
}
|
|
4488
4394
|
set disabled(value) {
|
|
4489
4395
|
value = coerceBooleanProperty(value);
|
|
@@ -4512,36 +4418,96 @@ class OwlDateTimeComponent extends OwlDateTimeDirective {
|
|
|
4512
4418
|
this.changeDetector.markForCheck();
|
|
4513
4419
|
}
|
|
4514
4420
|
get selecteds() {
|
|
4515
|
-
return this._selecteds;
|
|
4421
|
+
return this._selecteds || [];
|
|
4516
4422
|
}
|
|
4517
4423
|
set selecteds(values) {
|
|
4518
4424
|
this._selecteds = values;
|
|
4519
4425
|
this.changeDetector.markForCheck();
|
|
4520
4426
|
}
|
|
4521
4427
|
/** The minimum selectable date. */
|
|
4522
|
-
get
|
|
4523
|
-
return this._dtInput && this._dtInput.min;
|
|
4428
|
+
get min() {
|
|
4429
|
+
return (this._dtInput && this._dtInput.min);
|
|
4524
4430
|
}
|
|
4525
4431
|
/** The maximum selectable date. */
|
|
4526
|
-
get
|
|
4527
|
-
return this._dtInput && this._dtInput.max;
|
|
4432
|
+
get max() {
|
|
4433
|
+
return (this._dtInput && this._dtInput.max);
|
|
4528
4434
|
}
|
|
4529
4435
|
get dateTimeFilter() {
|
|
4530
|
-
|
|
4436
|
+
var _a;
|
|
4437
|
+
return (_a = this._dtInput) === null || _a === void 0 ? void 0 : _a.dateTimeFilter;
|
|
4531
4438
|
}
|
|
4532
4439
|
get selectMode() {
|
|
4533
|
-
|
|
4440
|
+
var _a;
|
|
4441
|
+
return (_a = this._dtInput) === null || _a === void 0 ? void 0 : _a.selectMode;
|
|
4534
4442
|
}
|
|
4535
4443
|
get isInSingleMode() {
|
|
4536
|
-
|
|
4444
|
+
var _a;
|
|
4445
|
+
return !!((_a = this._dtInput) === null || _a === void 0 ? void 0 : _a.isInSingleMode);
|
|
4537
4446
|
}
|
|
4538
4447
|
get isInRangeMode() {
|
|
4539
|
-
|
|
4448
|
+
var _a;
|
|
4449
|
+
return !!((_a = this._dtInput) === null || _a === void 0 ? void 0 : _a.isInRangeMode);
|
|
4450
|
+
}
|
|
4451
|
+
constructor(overlay, viewContainerRef, dialogService, ngZone, changeDetector, dateTimeAdapter, defaultScrollStrategy, dateTimeFormats, document) {
|
|
4452
|
+
super(dateTimeAdapter, dateTimeFormats);
|
|
4453
|
+
this.overlay = overlay;
|
|
4454
|
+
this.viewContainerRef = viewContainerRef;
|
|
4455
|
+
this.dialogService = dialogService;
|
|
4456
|
+
this.ngZone = ngZone;
|
|
4457
|
+
this.changeDetector = changeDetector;
|
|
4458
|
+
this.defaultScrollStrategy = defaultScrollStrategy;
|
|
4459
|
+
this.document = document;
|
|
4460
|
+
/** Custom class for the picker backdrop. */
|
|
4461
|
+
this.backdropClass = [];
|
|
4462
|
+
/** Custom class for the picker overlay pane. */
|
|
4463
|
+
this.panelClass = [];
|
|
4464
|
+
/**
|
|
4465
|
+
* Set the type of the dateTime picker
|
|
4466
|
+
* 'both' -- show both calendar and timer
|
|
4467
|
+
* 'calendar' -- show only calendar
|
|
4468
|
+
* 'timer' -- show only timer
|
|
4469
|
+
*/
|
|
4470
|
+
this._pickerType = 'both';
|
|
4471
|
+
/**
|
|
4472
|
+
* Whether the picker open as a dialog
|
|
4473
|
+
*/
|
|
4474
|
+
this._pickerMode = 'popup';
|
|
4475
|
+
/** Whether the calendar is open. */
|
|
4476
|
+
this._opened = false;
|
|
4477
|
+
/**
|
|
4478
|
+
* Callback when the picker is closed
|
|
4479
|
+
* */
|
|
4480
|
+
this.afterPickerClosed = new EventEmitter();
|
|
4481
|
+
/**
|
|
4482
|
+
* Callback when the picker is open
|
|
4483
|
+
* */
|
|
4484
|
+
this.afterPickerOpen = new EventEmitter();
|
|
4485
|
+
/**
|
|
4486
|
+
* Emits selected year in multi-year view
|
|
4487
|
+
* This doesn't imply a change on the selected date.
|
|
4488
|
+
* */
|
|
4489
|
+
this.yearSelected = new EventEmitter();
|
|
4490
|
+
/**
|
|
4491
|
+
* Emits selected month in year view
|
|
4492
|
+
* This doesn't imply a change on the selected date.
|
|
4493
|
+
* */
|
|
4494
|
+
this.monthSelected = new EventEmitter();
|
|
4495
|
+
/**
|
|
4496
|
+
* Emit when the selected value has been confirmed
|
|
4497
|
+
* */
|
|
4498
|
+
this.confirmSelectedChange = new EventEmitter();
|
|
4499
|
+
/**
|
|
4500
|
+
* Emits when the date time picker is disabled.
|
|
4501
|
+
* */
|
|
4502
|
+
this.disabledChange = new EventEmitter();
|
|
4503
|
+
this._selecteds = new Array();
|
|
4540
4504
|
}
|
|
4541
4505
|
ngOnInit() { }
|
|
4542
4506
|
ngOnDestroy() {
|
|
4507
|
+
var _a;
|
|
4543
4508
|
this.close();
|
|
4544
|
-
this.dtInputSub.unsubscribe();
|
|
4509
|
+
(_a = this.dtInputSub) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
|
4510
|
+
this.dtInputSub = undefined;
|
|
4545
4511
|
this.disabledChange.complete();
|
|
4546
4512
|
if (this.popupRef) {
|
|
4547
4513
|
this.popupRef.dispose();
|
|
@@ -4549,7 +4515,7 @@ class OwlDateTimeComponent extends OwlDateTimeDirective {
|
|
|
4549
4515
|
}
|
|
4550
4516
|
registerInput(input) {
|
|
4551
4517
|
if (this._dtInput) {
|
|
4552
|
-
throw Error('A
|
|
4518
|
+
throw Error('A Nxt DateTimePicker can only be associated with a single input.');
|
|
4553
4519
|
}
|
|
4554
4520
|
this._dtInput = input;
|
|
4555
4521
|
this.dtInputSub = this._dtInput.valueChange.subscribe((value) => {
|
|
@@ -4562,6 +4528,7 @@ class OwlDateTimeComponent extends OwlDateTimeDirective {
|
|
|
4562
4528
|
});
|
|
4563
4529
|
}
|
|
4564
4530
|
open() {
|
|
4531
|
+
var _a, _b;
|
|
4565
4532
|
if (this._opened || this.disabled) {
|
|
4566
4533
|
return;
|
|
4567
4534
|
}
|
|
@@ -4587,13 +4554,14 @@ class OwlDateTimeComponent extends OwlDateTimeDirective {
|
|
|
4587
4554
|
this.openAsDialog();
|
|
4588
4555
|
else
|
|
4589
4556
|
this.openAsPopup();
|
|
4590
|
-
this.pickerContainer
|
|
4557
|
+
if (this.pickerContainer)
|
|
4558
|
+
this.pickerContainer.picker = this;
|
|
4591
4559
|
// Listen to picker container's hidePickerStream
|
|
4592
|
-
this.hidePickerStreamSub = this.pickerContainer.hidePickerStream.subscribe(() => {
|
|
4560
|
+
this.hidePickerStreamSub = (_a = this.pickerContainer) === null || _a === void 0 ? void 0 : _a.hidePickerStream.subscribe(() => {
|
|
4593
4561
|
this.close();
|
|
4594
4562
|
});
|
|
4595
4563
|
// Listen to picker container's confirmSelectedStream
|
|
4596
|
-
this.confirmSelectedStreamSub = this.pickerContainer.confirmSelectedStream.subscribe((event) => {
|
|
4564
|
+
this.confirmSelectedStreamSub = (_b = this.pickerContainer) === null || _b === void 0 ? void 0 : _b.confirmSelectedStream.subscribe((event) => {
|
|
4597
4565
|
this.confirmSelect(event);
|
|
4598
4566
|
});
|
|
4599
4567
|
}
|
|
@@ -4643,6 +4611,7 @@ class OwlDateTimeComponent extends OwlDateTimeDirective {
|
|
|
4643
4611
|
* Hide the picker
|
|
4644
4612
|
*/
|
|
4645
4613
|
close() {
|
|
4614
|
+
var _a, _b, _c;
|
|
4646
4615
|
if (!this._opened) {
|
|
4647
4616
|
return;
|
|
4648
4617
|
}
|
|
@@ -4653,27 +4622,21 @@ class OwlDateTimeComponent extends OwlDateTimeDirective {
|
|
|
4653
4622
|
this.pickerContainerPortal.isAttached) {
|
|
4654
4623
|
this.pickerContainerPortal.detach();
|
|
4655
4624
|
}
|
|
4656
|
-
|
|
4657
|
-
|
|
4658
|
-
|
|
4659
|
-
|
|
4660
|
-
|
|
4661
|
-
|
|
4662
|
-
this.confirmSelectedStreamSub = null;
|
|
4663
|
-
}
|
|
4664
|
-
if (this.pickerOpenedStreamSub) {
|
|
4665
|
-
this.pickerOpenedStreamSub.unsubscribe();
|
|
4666
|
-
this.pickerOpenedStreamSub = null;
|
|
4667
|
-
}
|
|
4625
|
+
(_a = this.hidePickerStreamSub) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
|
4626
|
+
this.hidePickerStreamSub = undefined;
|
|
4627
|
+
(_b = this.confirmSelectedStreamSub) === null || _b === void 0 ? void 0 : _b.unsubscribe();
|
|
4628
|
+
this.confirmSelectedStreamSub = undefined;
|
|
4629
|
+
(_c = this.pickerOpenedStreamSub) === null || _c === void 0 ? void 0 : _c.unsubscribe();
|
|
4630
|
+
this.pickerOpenedStreamSub = undefined;
|
|
4668
4631
|
if (this.dialogRef) {
|
|
4669
4632
|
this.dialogRef.close();
|
|
4670
|
-
this.dialogRef =
|
|
4633
|
+
this.dialogRef = undefined;
|
|
4671
4634
|
}
|
|
4672
4635
|
const completeClose = () => {
|
|
4673
4636
|
if (this._opened) {
|
|
4674
4637
|
this._opened = false;
|
|
4675
|
-
this.afterPickerClosed.emit(
|
|
4676
|
-
this.focusedElementBeforeOpen =
|
|
4638
|
+
this.afterPickerClosed.emit();
|
|
4639
|
+
this.focusedElementBeforeOpen = undefined;
|
|
4677
4640
|
}
|
|
4678
4641
|
};
|
|
4679
4642
|
if (this.focusedElementBeforeOpen &&
|
|
@@ -4708,19 +4671,19 @@ class OwlDateTimeComponent extends OwlDateTimeDirective {
|
|
|
4708
4671
|
* Open the picker as a dialog
|
|
4709
4672
|
*/
|
|
4710
4673
|
openAsDialog() {
|
|
4711
|
-
this.dialogRef = this.dialogService.open(
|
|
4674
|
+
this.dialogRef = this.dialogService.open(DateTimeContainerComponent, {
|
|
4712
4675
|
autoFocus: false,
|
|
4713
4676
|
backdropClass: [
|
|
4714
4677
|
'cdk-overlay-dark-backdrop',
|
|
4715
4678
|
...coerceArray(this.backdropClass)
|
|
4716
4679
|
],
|
|
4717
|
-
paneClass: ['
|
|
4680
|
+
paneClass: ['nxt-dt-dialog', ...coerceArray(this.panelClass)],
|
|
4718
4681
|
viewContainerRef: this.viewContainerRef,
|
|
4719
4682
|
scrollStrategy: this.scrollStrategy || this.defaultScrollStrategy()
|
|
4720
4683
|
});
|
|
4721
4684
|
this.pickerContainer = this.dialogRef.componentInstance;
|
|
4722
4685
|
this.dialogRef.afterOpen().subscribe(() => {
|
|
4723
|
-
this.afterPickerOpen.emit(
|
|
4686
|
+
this.afterPickerOpen.emit();
|
|
4724
4687
|
this._opened = true;
|
|
4725
4688
|
});
|
|
4726
4689
|
this.dialogRef.afterClosed().subscribe(() => this.close());
|
|
@@ -4729,27 +4692,27 @@ class OwlDateTimeComponent extends OwlDateTimeDirective {
|
|
|
4729
4692
|
* Open the picker as popup
|
|
4730
4693
|
*/
|
|
4731
4694
|
openAsPopup() {
|
|
4695
|
+
var _a, _b, _c;
|
|
4732
4696
|
if (!this.pickerContainerPortal) {
|
|
4733
|
-
this.pickerContainerPortal = new ComponentPortal(
|
|
4697
|
+
this.pickerContainerPortal = new ComponentPortal(DateTimeContainerComponent, this.viewContainerRef);
|
|
4734
4698
|
}
|
|
4735
4699
|
if (!this.popupRef) {
|
|
4736
4700
|
this.createPopup();
|
|
4737
4701
|
}
|
|
4738
|
-
if (!this.popupRef.hasAttached()) {
|
|
4739
|
-
const componentRef = this.popupRef.attach(this.pickerContainerPortal);
|
|
4740
|
-
this.pickerContainer = componentRef.instance;
|
|
4702
|
+
if (!((_a = this.popupRef) === null || _a === void 0 ? void 0 : _a.hasAttached())) {
|
|
4703
|
+
const componentRef = (_b = this.popupRef) === null || _b === void 0 ? void 0 : _b.attach(this.pickerContainerPortal);
|
|
4704
|
+
this.pickerContainer = componentRef === null || componentRef === void 0 ? void 0 : componentRef.instance;
|
|
4741
4705
|
// Update the position once the calendar has rendered.
|
|
4742
4706
|
this.ngZone.onStable
|
|
4743
4707
|
.asObservable()
|
|
4744
4708
|
.pipe(take(1))
|
|
4745
4709
|
.subscribe(() => {
|
|
4746
|
-
|
|
4710
|
+
var _a;
|
|
4711
|
+
(_a = this.popupRef) === null || _a === void 0 ? void 0 : _a.updatePosition();
|
|
4747
4712
|
});
|
|
4748
4713
|
// emit open stream
|
|
4749
|
-
this.pickerOpenedStreamSub = this.pickerContainer.pickerOpenedStream
|
|
4750
|
-
.
|
|
4751
|
-
.subscribe(() => {
|
|
4752
|
-
this.afterPickerOpen.emit(null);
|
|
4714
|
+
this.pickerOpenedStreamSub = (_c = this.pickerContainer) === null || _c === void 0 ? void 0 : _c.pickerOpenedStream.pipe(take(1)).subscribe(() => {
|
|
4715
|
+
this.afterPickerOpen.emit();
|
|
4753
4716
|
this._opened = true;
|
|
4754
4717
|
});
|
|
4755
4718
|
}
|
|
@@ -4763,85 +4726,83 @@ class OwlDateTimeComponent extends OwlDateTimeDirective {
|
|
|
4763
4726
|
...coerceArray(this.backdropClass)
|
|
4764
4727
|
],
|
|
4765
4728
|
scrollStrategy: this.scrollStrategy || this.defaultScrollStrategy(),
|
|
4766
|
-
panelClass: ['
|
|
4729
|
+
panelClass: ['nxt-dt-popup', ...coerceArray(this.panelClass)]
|
|
4767
4730
|
});
|
|
4768
4731
|
this.popupRef = this.overlay.create(overlayConfig);
|
|
4769
4732
|
merge(this.popupRef.backdropClick(), this.popupRef.detachments(), this.popupRef
|
|
4770
4733
|
.keydownEvents()
|
|
4771
|
-
.pipe(filter(event => event.keyCode === ESCAPE ||
|
|
4734
|
+
.pipe(filter(event => !!(event.keyCode === ESCAPE ||
|
|
4772
4735
|
(this._dtInput &&
|
|
4773
4736
|
event.altKey &&
|
|
4774
|
-
event.keyCode === UP_ARROW)))).subscribe(() => this.close());
|
|
4737
|
+
event.keyCode === UP_ARROW))))).subscribe(() => this.close());
|
|
4775
4738
|
}
|
|
4776
4739
|
/**
|
|
4777
4740
|
* Create the popup PositionStrategy.
|
|
4778
4741
|
* */
|
|
4779
4742
|
createPopupPositionStrategy() {
|
|
4780
|
-
|
|
4781
|
-
.
|
|
4782
|
-
|
|
4783
|
-
|
|
4784
|
-
|
|
4785
|
-
|
|
4786
|
-
|
|
4787
|
-
|
|
4788
|
-
|
|
4789
|
-
|
|
4790
|
-
|
|
4791
|
-
|
|
4792
|
-
|
|
4793
|
-
|
|
4794
|
-
|
|
4795
|
-
|
|
4796
|
-
|
|
4797
|
-
|
|
4798
|
-
|
|
4799
|
-
|
|
4800
|
-
|
|
4801
|
-
|
|
4802
|
-
|
|
4803
|
-
|
|
4804
|
-
|
|
4805
|
-
|
|
4806
|
-
|
|
4807
|
-
|
|
4808
|
-
|
|
4809
|
-
|
|
4810
|
-
|
|
4811
|
-
|
|
4812
|
-
|
|
4813
|
-
|
|
4814
|
-
|
|
4815
|
-
|
|
4816
|
-
|
|
4817
|
-
|
|
4818
|
-
|
|
4819
|
-
|
|
4820
|
-
|
|
4821
|
-
|
|
4822
|
-
|
|
4823
|
-
|
|
4824
|
-
|
|
4825
|
-
|
|
4743
|
+
if (this._dtInput)
|
|
4744
|
+
return this.overlay
|
|
4745
|
+
.position()
|
|
4746
|
+
.flexibleConnectedTo(this._dtInput.elementRef)
|
|
4747
|
+
.withTransformOriginOn('.nxt-dt-container')
|
|
4748
|
+
.withFlexibleDimensions(false)
|
|
4749
|
+
.withPush(false)
|
|
4750
|
+
.withPositions([
|
|
4751
|
+
{
|
|
4752
|
+
originX: 'start',
|
|
4753
|
+
originY: 'bottom',
|
|
4754
|
+
overlayX: 'start',
|
|
4755
|
+
overlayY: 'top'
|
|
4756
|
+
},
|
|
4757
|
+
{
|
|
4758
|
+
originX: 'start',
|
|
4759
|
+
originY: 'top',
|
|
4760
|
+
overlayX: 'start',
|
|
4761
|
+
overlayY: 'bottom'
|
|
4762
|
+
},
|
|
4763
|
+
{
|
|
4764
|
+
originX: 'end',
|
|
4765
|
+
originY: 'bottom',
|
|
4766
|
+
overlayX: 'end',
|
|
4767
|
+
overlayY: 'top'
|
|
4768
|
+
},
|
|
4769
|
+
{
|
|
4770
|
+
originX: 'end',
|
|
4771
|
+
originY: 'top',
|
|
4772
|
+
overlayX: 'end',
|
|
4773
|
+
overlayY: 'bottom'
|
|
4774
|
+
},
|
|
4775
|
+
{
|
|
4776
|
+
originX: 'start',
|
|
4777
|
+
originY: 'top',
|
|
4778
|
+
overlayX: 'start',
|
|
4779
|
+
overlayY: 'top',
|
|
4780
|
+
offsetY: -176
|
|
4781
|
+
},
|
|
4782
|
+
{
|
|
4783
|
+
originX: 'start',
|
|
4784
|
+
originY: 'top',
|
|
4785
|
+
overlayX: 'start',
|
|
4786
|
+
overlayY: 'top',
|
|
4787
|
+
offsetY: -352
|
|
4788
|
+
}
|
|
4789
|
+
]);
|
|
4790
|
+
return;
|
|
4826
4791
|
}
|
|
4827
4792
|
}
|
|
4828
|
-
|
|
4829
|
-
|
|
4830
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4793
|
+
DateTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: DateTimeComponent, deps: [{ token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: DialogService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: DateTimeAdapter }, { token: NXT_DTPICKER_SCROLL_STRATEGY }, { token: NXT_DATE_TIME_FORMATS }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
4794
|
+
DateTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: DateTimeComponent, selector: "nxt-date-time", inputs: { backdropClass: "backdropClass", panelClass: "panelClass", startAt: "startAt", pickerType: "pickerType", pickerMode: "pickerMode", disabled: "disabled", opened: "opened", scrollStrategy: "scrollStrategy" }, outputs: { afterPickerClosed: "afterPickerClosed", afterPickerOpen: "afterPickerOpen", yearSelected: "yearSelected", monthSelected: "monthSelected" }, usesInheritance: true, ngImport: i0, template: "<p>date-time-picker works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4795
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: DateTimeComponent, decorators: [{
|
|
4831
4796
|
type: Component,
|
|
4832
|
-
args: [{ selector: '
|
|
4797
|
+
args: [{ selector: 'nxt-date-time', changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, template: "<p>date-time-picker works!</p>\n" }]
|
|
4833
4798
|
}], ctorParameters: function () {
|
|
4834
|
-
return [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type:
|
|
4835
|
-
type: Optional
|
|
4836
|
-
}] }, { type: undefined, decorators: [{
|
|
4799
|
+
return [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: DialogService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: DateTimeAdapter }, { type: undefined, decorators: [{
|
|
4837
4800
|
type: Inject,
|
|
4838
|
-
args: [
|
|
4801
|
+
args: [NXT_DTPICKER_SCROLL_STRATEGY]
|
|
4839
4802
|
}] }, { type: undefined, decorators: [{
|
|
4840
|
-
type: Optional
|
|
4841
|
-
}, {
|
|
4842
4803
|
type: Inject,
|
|
4843
|
-
args: [
|
|
4844
|
-
}] }, { type:
|
|
4804
|
+
args: [NXT_DATE_TIME_FORMATS]
|
|
4805
|
+
}] }, { type: Document, decorators: [{
|
|
4845
4806
|
type: Optional
|
|
4846
4807
|
}, {
|
|
4847
4808
|
type: Inject,
|
|
@@ -4873,90 +4834,111 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
4873
4834
|
type: Output
|
|
4874
4835
|
}] } });
|
|
4875
4836
|
|
|
4876
|
-
class
|
|
4837
|
+
class DialogModule {
|
|
4877
4838
|
}
|
|
4878
|
-
|
|
4879
|
-
|
|
4880
|
-
|
|
4881
|
-
|
|
4882
|
-
|
|
4883
|
-
|
|
4884
|
-
|
|
4839
|
+
DialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
4840
|
+
DialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: DialogModule, declarations: [DialogContainerComponent], imports: [CommonModule,
|
|
4841
|
+
A11yModule,
|
|
4842
|
+
OverlayModule,
|
|
4843
|
+
PortalModule] });
|
|
4844
|
+
DialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: DialogModule, providers: [
|
|
4845
|
+
NXT_DIALOG_SCROLL_STRATEGY_PROVIDER,
|
|
4846
|
+
DialogService
|
|
4847
|
+
], imports: [CommonModule,
|
|
4848
|
+
A11yModule,
|
|
4849
|
+
OverlayModule,
|
|
4850
|
+
PortalModule] });
|
|
4851
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: DialogModule, decorators: [{
|
|
4885
4852
|
type: NgModule,
|
|
4886
4853
|
args: [{
|
|
4887
|
-
imports: [CommonModule, A11yModule, OverlayModule, PortalModule],
|
|
4888
|
-
exports: [],
|
|
4889
4854
|
declarations: [
|
|
4890
|
-
|
|
4855
|
+
DialogContainerComponent
|
|
4856
|
+
],
|
|
4857
|
+
imports: [
|
|
4858
|
+
CommonModule,
|
|
4859
|
+
A11yModule,
|
|
4860
|
+
OverlayModule,
|
|
4861
|
+
PortalModule
|
|
4891
4862
|
],
|
|
4892
4863
|
providers: [
|
|
4893
|
-
|
|
4894
|
-
|
|
4864
|
+
NXT_DIALOG_SCROLL_STRATEGY_PROVIDER,
|
|
4865
|
+
DialogService
|
|
4895
4866
|
]
|
|
4896
4867
|
}]
|
|
4897
4868
|
}] });
|
|
4898
4869
|
|
|
4899
|
-
class
|
|
4870
|
+
class DateTimeModule {
|
|
4900
4871
|
}
|
|
4901
|
-
|
|
4902
|
-
|
|
4903
|
-
|
|
4904
|
-
|
|
4905
|
-
|
|
4906
|
-
|
|
4907
|
-
|
|
4908
|
-
|
|
4909
|
-
|
|
4910
|
-
|
|
4911
|
-
|
|
4912
|
-
|
|
4872
|
+
DateTimeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: DateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
4873
|
+
DateTimeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: DateTimeModule, declarations: [DateTimeTriggerDirective,
|
|
4874
|
+
DateTimeInputDirective,
|
|
4875
|
+
DateTimeComponent,
|
|
4876
|
+
DateTimeContainerComponent,
|
|
4877
|
+
MultiYearViewComponent,
|
|
4878
|
+
YearViewComponent,
|
|
4879
|
+
MonthViewComponent,
|
|
4880
|
+
TimerComponent,
|
|
4881
|
+
TimerBoxComponent,
|
|
4882
|
+
CalendarComponent,
|
|
4883
|
+
CalendarBodyComponent,
|
|
4913
4884
|
NumberFixedLenPipe,
|
|
4914
|
-
|
|
4915
|
-
|
|
4916
|
-
|
|
4917
|
-
|
|
4918
|
-
|
|
4919
|
-
|
|
4920
|
-
|
|
4921
|
-
|
|
4922
|
-
|
|
4923
|
-
|
|
4924
|
-
|
|
4925
|
-
|
|
4926
|
-
|
|
4927
|
-
|
|
4885
|
+
DateTimeInlineComponent], imports: [CommonModule,
|
|
4886
|
+
OverlayModule,
|
|
4887
|
+
DialogModule,
|
|
4888
|
+
A11yModule], exports: [CalendarComponent,
|
|
4889
|
+
TimerComponent,
|
|
4890
|
+
DateTimeTriggerDirective,
|
|
4891
|
+
DateTimeInputDirective,
|
|
4892
|
+
DateTimeComponent,
|
|
4893
|
+
DateTimeInlineComponent,
|
|
4894
|
+
MultiYearViewComponent,
|
|
4895
|
+
YearViewComponent,
|
|
4896
|
+
MonthViewComponent] });
|
|
4897
|
+
DateTimeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: DateTimeModule, providers: [
|
|
4898
|
+
DateTimeIntl,
|
|
4899
|
+
NXT_DTPICKER_SCROLL_STRATEGY_PROVIDER
|
|
4900
|
+
], imports: [CommonModule,
|
|
4901
|
+
OverlayModule,
|
|
4902
|
+
DialogModule,
|
|
4903
|
+
A11yModule] });
|
|
4904
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: DateTimeModule, decorators: [{
|
|
4928
4905
|
type: NgModule,
|
|
4929
4906
|
args: [{
|
|
4930
|
-
imports: [CommonModule, OverlayModule, OwlDialogModule, A11yModule],
|
|
4931
|
-
exports: [
|
|
4932
|
-
OwlCalendarComponent,
|
|
4933
|
-
OwlTimerComponent,
|
|
4934
|
-
OwlDateTimeTriggerDirective,
|
|
4935
|
-
OwlDateTimeInputDirective,
|
|
4936
|
-
OwlDateTimeComponent,
|
|
4937
|
-
OwlDateTimeInlineComponent,
|
|
4938
|
-
OwlMultiYearViewComponent,
|
|
4939
|
-
OwlYearViewComponent,
|
|
4940
|
-
OwlMonthViewComponent
|
|
4941
|
-
],
|
|
4942
4907
|
declarations: [
|
|
4943
|
-
|
|
4944
|
-
|
|
4945
|
-
|
|
4946
|
-
|
|
4947
|
-
|
|
4948
|
-
|
|
4949
|
-
|
|
4950
|
-
|
|
4951
|
-
|
|
4952
|
-
|
|
4953
|
-
|
|
4908
|
+
DateTimeTriggerDirective,
|
|
4909
|
+
DateTimeInputDirective,
|
|
4910
|
+
DateTimeComponent,
|
|
4911
|
+
DateTimeContainerComponent,
|
|
4912
|
+
MultiYearViewComponent,
|
|
4913
|
+
YearViewComponent,
|
|
4914
|
+
MonthViewComponent,
|
|
4915
|
+
TimerComponent,
|
|
4916
|
+
TimerBoxComponent,
|
|
4917
|
+
CalendarComponent,
|
|
4918
|
+
CalendarBodyComponent,
|
|
4954
4919
|
NumberFixedLenPipe,
|
|
4955
|
-
|
|
4920
|
+
DateTimeInlineComponent
|
|
4921
|
+
],
|
|
4922
|
+
imports: [
|
|
4923
|
+
CommonModule,
|
|
4924
|
+
OverlayModule,
|
|
4925
|
+
DialogModule,
|
|
4926
|
+
A11yModule
|
|
4927
|
+
],
|
|
4928
|
+
exports: [
|
|
4929
|
+
CalendarComponent,
|
|
4930
|
+
TimerComponent,
|
|
4931
|
+
DateTimeTriggerDirective,
|
|
4932
|
+
DateTimeInputDirective,
|
|
4933
|
+
DateTimeComponent,
|
|
4934
|
+
DateTimeInlineComponent,
|
|
4935
|
+
MultiYearViewComponent,
|
|
4936
|
+
YearViewComponent,
|
|
4937
|
+
MonthViewComponent
|
|
4956
4938
|
],
|
|
4957
4939
|
providers: [
|
|
4958
|
-
|
|
4959
|
-
|
|
4940
|
+
DateTimeIntl,
|
|
4941
|
+
NXT_DTPICKER_SCROLL_STRATEGY_PROVIDER
|
|
4960
4942
|
]
|
|
4961
4943
|
}]
|
|
4962
4944
|
}] });
|
|
@@ -4965,5 +4947,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
4965
4947
|
* Generated bundle index. Do not edit.
|
|
4966
4948
|
*/
|
|
4967
4949
|
|
|
4968
|
-
export {
|
|
4950
|
+
export { CalendarComponent, DateTimeAdapter, DateTimeComponent, DateTimeInlineComponent, DateTimeInputDirective, DateTimeIntl, DateTimeModule, DateTimeTriggerDirective, MonthViewComponent, MultiYearViewComponent, NXT_DATE_TIME_FORMATS, NXT_DATE_TIME_LOCALE, NXT_DATE_TIME_LOCALE_PROVIDER, TimerComponent, YearViewComponent };
|
|
4969
4951
|
//# sourceMappingURL=nxt-pick-datetime.mjs.map
|