@dereekb/dbx-form 9.20.9 → 9.20.11
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/esm2020/lib/formly/field/value/date/datetime.field.component.mjs +25 -9
- package/esm2020/lib/formly/field/value/date/datetime.field.mjs +5 -2
- package/fesm2015/dereekb-dbx-form.mjs +32 -10
- package/fesm2015/dereekb-dbx-form.mjs.map +1 -1
- package/fesm2020/dereekb-dbx-form.mjs +28 -9
- package/fesm2020/dereekb-dbx-form.mjs.map +1 -1
- package/lib/formly/field/value/date/datetime.field.component.d.ts +16 -1
- package/mapbox/package.json +4 -4
- package/package.json +4 -4
|
@@ -3230,7 +3230,7 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
|
|
|
3230
3230
|
});
|
|
3231
3231
|
this._config = new BehaviorSubject(undefined);
|
|
3232
3232
|
this._syncConfigObs = new BehaviorSubject(undefined);
|
|
3233
|
-
this.fullDay$ = this.fullDayControl$.pipe(switchMap((control) => control.valueChanges.pipe(startWith(control.value))));
|
|
3233
|
+
this.fullDay$ = this.fullDayControl$.pipe(switchMap((control) => control.valueChanges.pipe(startWith(control.value))), distinctUntilChanged(), shareReplay(1));
|
|
3234
3234
|
this.showTimeInput$ = this.fullDay$.pipe(map((x) => !x && this.timeMode !== DbxDateTimeFieldTimeMode.NONE));
|
|
3235
3235
|
this.showAddTime$ = this.showTimeInput$.pipe(map((x) => !x && this.timeMode === DbxDateTimeFieldTimeMode.OPTIONAL), shareReplay(1));
|
|
3236
3236
|
this.date$ = this.dateInputCtrl.valueChanges.pipe(startWith(this.dateInputCtrl.value), filterMaybe(), shareReplay(1));
|
|
@@ -3325,6 +3325,14 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
|
|
|
3325
3325
|
var _a;
|
|
3326
3326
|
return (_a = this.props.timeLabel) !== null && _a !== void 0 ? _a : 'Time';
|
|
3327
3327
|
}
|
|
3328
|
+
get allDayLabel() {
|
|
3329
|
+
var _a;
|
|
3330
|
+
return (_a = this.props.allDayLabel) !== null && _a !== void 0 ? _a : 'All Day';
|
|
3331
|
+
}
|
|
3332
|
+
get atTimeLabel() {
|
|
3333
|
+
var _a;
|
|
3334
|
+
return (_a = this.props.atTimeLabel) !== null && _a !== void 0 ? _a : 'At';
|
|
3335
|
+
}
|
|
3328
3336
|
get dateOnly() {
|
|
3329
3337
|
return this.timeMode === DbxDateTimeFieldTimeMode.NONE;
|
|
3330
3338
|
}
|
|
@@ -3337,14 +3345,20 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
|
|
|
3337
3345
|
get showDateInput() {
|
|
3338
3346
|
return !this.timeOnly;
|
|
3339
3347
|
}
|
|
3340
|
-
get timeMode() {
|
|
3341
|
-
var _a;
|
|
3342
|
-
return this.timeOnly ? DbxDateTimeFieldTimeMode.REQUIRED : (_a = this.dateTimeField.timeMode) !== null && _a !== void 0 ? _a : DbxDateTimeFieldTimeMode.REQUIRED;
|
|
3343
|
-
}
|
|
3344
3348
|
get valueMode() {
|
|
3345
3349
|
var _a;
|
|
3346
3350
|
return (_a = this.field.props.valueMode) !== null && _a !== void 0 ? _a : DbxDateTimeValueMode.DATE;
|
|
3347
3351
|
}
|
|
3352
|
+
get timeMode() {
|
|
3353
|
+
var _a;
|
|
3354
|
+
const dateValuesOnly = this.valueMode === DbxDateTimeValueMode.DAY_STRING;
|
|
3355
|
+
if (dateValuesOnly) {
|
|
3356
|
+
return DbxDateTimeFieldTimeMode.NONE;
|
|
3357
|
+
}
|
|
3358
|
+
else {
|
|
3359
|
+
return this.timeOnly ? DbxDateTimeFieldTimeMode.REQUIRED : (_a = this.dateTimeField.timeMode) !== null && _a !== void 0 ? _a : DbxDateTimeFieldTimeMode.REQUIRED;
|
|
3360
|
+
}
|
|
3361
|
+
}
|
|
3348
3362
|
get description() {
|
|
3349
3363
|
return this.field.props.description;
|
|
3350
3364
|
}
|
|
@@ -3352,6 +3366,10 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
|
|
|
3352
3366
|
var _a;
|
|
3353
3367
|
return (_a = this.field.props.hideDateHint) !== null && _a !== void 0 ? _a : false;
|
|
3354
3368
|
}
|
|
3369
|
+
get hideDatePicker() {
|
|
3370
|
+
var _a;
|
|
3371
|
+
return (_a = this.field.props.hideDatePicker) !== null && _a !== void 0 ? _a : false;
|
|
3372
|
+
}
|
|
3355
3373
|
ngOnInit() {
|
|
3356
3374
|
var _a, _b, _c, _d;
|
|
3357
3375
|
this._formControlObs.next(this.formControl);
|
|
@@ -3388,7 +3406,8 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
|
|
|
3388
3406
|
fullDayFieldCtrl = this.form.get(isFullDayField);
|
|
3389
3407
|
}
|
|
3390
3408
|
if (!fullDayFieldCtrl) {
|
|
3391
|
-
this.
|
|
3409
|
+
const isFullDay = this.timeMode === DbxDateTimeFieldTimeMode.NONE;
|
|
3410
|
+
this._fullDayInputCtrl = new FormControl(isFullDay);
|
|
3392
3411
|
// Set the control in the form too if the name is defined.
|
|
3393
3412
|
if (isFullDayField) {
|
|
3394
3413
|
this.form.addControl(isFullDayField, this._fullDayInputCtrl);
|
|
@@ -3396,7 +3415,7 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
|
|
|
3396
3415
|
fullDayFieldCtrl = this._fullDayInputCtrl;
|
|
3397
3416
|
}
|
|
3398
3417
|
this._fullDayControlObs.next(fullDayFieldCtrl);
|
|
3399
|
-
switch (this.
|
|
3418
|
+
switch (this.timeMode) {
|
|
3400
3419
|
case DbxDateTimeFieldTimeMode.OPTIONAL:
|
|
3401
3420
|
break;
|
|
3402
3421
|
case DbxDateTimeFieldTimeMode.NONE:
|
|
@@ -3513,10 +3532,10 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
|
|
|
3513
3532
|
}
|
|
3514
3533
|
}
|
|
3515
3534
|
DbxDateTimeFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxDateTimeFieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3516
|
-
DbxDateTimeFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxDateTimeFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-datetime-field\" fxLayout=\"row wrap\" fxLayout.xs=\"column wrap\" fxLayoutAlign=\"space-evenly stretch\">\n <!-- Date -->\n <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"dateOnly ? '100' : '50'\" *ngIf=\"showDateInput\">\n <ng-container *ngTemplateOutlet=\"dateInputTemplate\"></ng-container>\n </div>\n <!-- Time -->\n <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"showDateInput ? '50' : '100'\">\n <ng-container *ngIf=\"showTimeInput$ | async\">\n <ng-container *ngTemplateOutlet=\"timeMenuAndInputTemplate\"></ng-container>\n </ng-container>\n <div class=\"add-time-button-wrapper\" *ngIf=\"showAddTime$ | async\">\n <button mat-button class=\"add-time-button\" ngClass.lt-sm=\"add-time-button-full\" (click)=\"addTime()\">\n <mat-icon>timer</mat-icon>\n Add Time\n </button>\n </div>\n </div>\n <div *ngIf=\"!hideDateHint\" class=\"dbx-datetime-row dbx-datetime-hint-row\" fxFlex=\"100\">\n <div class=\"dbx-hint\" [ngSwitch]=\"fullDay$ | async\">\n <small *ngSwitchCase=\"true\">\n <b class=\"dbx-ok\">
|
|
3535
|
+
DbxDateTimeFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxDateTimeFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-datetime-field\" fxLayout=\"row wrap\" fxLayout.xs=\"column wrap\" fxLayoutAlign=\"space-evenly stretch\">\n <!-- Date -->\n <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"dateOnly ? '100' : '50'\" *ngIf=\"showDateInput\">\n <ng-container *ngTemplateOutlet=\"dateInputTemplate\"></ng-container>\n </div>\n <!-- Time -->\n <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"showDateInput ? '50' : '100'\">\n <ng-container *ngIf=\"showTimeInput$ | async\">\n <ng-container *ngTemplateOutlet=\"timeMenuAndInputTemplate\"></ng-container>\n </ng-container>\n <div class=\"add-time-button-wrapper\" *ngIf=\"showAddTime$ | async\">\n <button mat-button class=\"add-time-button\" ngClass.lt-sm=\"add-time-button-full\" (click)=\"addTime()\">\n <mat-icon>timer</mat-icon>\n Add Time\n </button>\n </div>\n </div>\n <div *ngIf=\"!hideDateHint\" class=\"dbx-datetime-row dbx-datetime-hint-row\" fxFlex=\"100\">\n <div class=\"dbx-hint\" [ngSwitch]=\"fullDay$ | async\">\n <small *ngSwitchCase=\"true\">\n <b class=\"dbx-ok\">{{ allDayLabel }}</b>\n {{ displayValue$ | async | date: 'fullDate' }} ({{ displayValue$ | async | dateDistance }})\n </small>\n <small *ngSwitchCase=\"false\">\n <ng-container *ngIf=\"value$ | async\">\n <b class=\"dbx-ok\">{{ atTimeLabel }}</b>\n {{ displayValue$ | async | date: 'medium' }} ({{ displayValue$ | async | timeDistance }})\n </ng-container>\n </small>\n </div>\n </div>\n</div>\n\n<!-- Date Input Template -->\n<ng-template #dateInputTemplate>\n <button *ngIf=\"!hideDatePicker\" mat-icon-button (click)=\"picker.open()\" [disabled]=\"disabled\">\n <mat-icon>calendar_today</mat-icon>\n </button>\n <mat-form-field class=\"dbx-datetime-row-field\">\n <mat-label>{{ dateLabel }}</mat-label>\n <input #dateInput matInput [min]=\"dateInputMin$ | async\" [max]=\"dateInputMax$ | async\" [matDatepicker]=\"picker\" [matDatepickerFilter]=\"(pickerFilter$ | async) || defaultPickerFilter\" (dateChange)=\"datePicked($event)\" [value]=\"dateValue$ | async\" (keydown)=\"keydownOnDateInput($event)\" />\n <mat-datepicker #picker></mat-datepicker>\n </mat-form-field>\n</ng-template>\n\n<!-- Time Menu/Input Template -->\n<ng-template #timeMenuAndInputTemplate>\n <button mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"opens the time menu\" [disabled]=\"disabled\">\n <mat-icon>timer</mat-icon>\n </button>\n <mat-menu #timemenu=\"matMenu\">\n <ng-container *ngIf=\"timeMode === 'optional'\">\n <button mat-menu-item (click)=\"removeTime()\">\n <span>Remove Time</span>\n </button>\n <mat-divider></mat-divider>\n </ng-container>\n <button mat-menu-item (click)=\"setLogicalTime('now')\">\n <span>Now</span>\n </button>\n <button mat-menu-item (click)=\"setTime('12:00AM')\">\n <span>Midnight</span>\n </button>\n <button mat-menu-item (click)=\"setTime('6:00AM')\">\n <span>6:00AM</span>\n </button>\n <button mat-menu-item (click)=\"setTime('8:00AM')\">\n <span>8:00AM</span>\n </button>\n <button mat-menu-item (click)=\"setTime('10:00AM')\">\n <span>10:00AM</span>\n </button>\n <button mat-menu-item (click)=\"setTime('12:00PM')\">\n <span>Noon</span>\n </button>\n <button mat-menu-item (click)=\"setTime('2:00PM')\">\n <span>2:00PM</span>\n </button>\n <button mat-menu-item (click)=\"setTime('5:00PM')\">\n <span>5:00PM</span>\n </button>\n </mat-menu>\n <mat-form-field class=\"dbx-datetime-row-field\">\n <mat-label>{{ timeLabel }}</mat-label>\n <input #timeInput matInput [formControl]=\"timeInputCtrl\" (focus)=\"focusTime()\" (focusout)=\"focusOutTime()\" (keydown)=\"keydownOnTimeInput($event)\" />\n </mat-form-field>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i3$4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i1$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$3.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$3.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i3$3.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2$3.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i2.TimeDistancePipe, name: "timeDistance" }, { kind: "pipe", type: i2.DateDistancePipe, name: "dateDistance" }] });
|
|
3517
3536
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxDateTimeFieldComponent, decorators: [{
|
|
3518
3537
|
type: Component,
|
|
3519
|
-
args: [{ template: "<div class=\"dbx-datetime-field\" fxLayout=\"row wrap\" fxLayout.xs=\"column wrap\" fxLayoutAlign=\"space-evenly stretch\">\n <!-- Date -->\n <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"dateOnly ? '100' : '50'\" *ngIf=\"showDateInput\">\n <ng-container *ngTemplateOutlet=\"dateInputTemplate\"></ng-container>\n </div>\n <!-- Time -->\n <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"showDateInput ? '50' : '100'\">\n <ng-container *ngIf=\"showTimeInput$ | async\">\n <ng-container *ngTemplateOutlet=\"timeMenuAndInputTemplate\"></ng-container>\n </ng-container>\n <div class=\"add-time-button-wrapper\" *ngIf=\"showAddTime$ | async\">\n <button mat-button class=\"add-time-button\" ngClass.lt-sm=\"add-time-button-full\" (click)=\"addTime()\">\n <mat-icon>timer</mat-icon>\n Add Time\n </button>\n </div>\n </div>\n <div *ngIf=\"!hideDateHint\" class=\"dbx-datetime-row dbx-datetime-hint-row\" fxFlex=\"100\">\n <div class=\"dbx-hint\" [ngSwitch]=\"fullDay$ | async\">\n <small *ngSwitchCase=\"true\">\n <b class=\"dbx-ok\">
|
|
3538
|
+
args: [{ template: "<div class=\"dbx-datetime-field\" fxLayout=\"row wrap\" fxLayout.xs=\"column wrap\" fxLayoutAlign=\"space-evenly stretch\">\n <!-- Date -->\n <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"dateOnly ? '100' : '50'\" *ngIf=\"showDateInput\">\n <ng-container *ngTemplateOutlet=\"dateInputTemplate\"></ng-container>\n </div>\n <!-- Time -->\n <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"showDateInput ? '50' : '100'\">\n <ng-container *ngIf=\"showTimeInput$ | async\">\n <ng-container *ngTemplateOutlet=\"timeMenuAndInputTemplate\"></ng-container>\n </ng-container>\n <div class=\"add-time-button-wrapper\" *ngIf=\"showAddTime$ | async\">\n <button mat-button class=\"add-time-button\" ngClass.lt-sm=\"add-time-button-full\" (click)=\"addTime()\">\n <mat-icon>timer</mat-icon>\n Add Time\n </button>\n </div>\n </div>\n <div *ngIf=\"!hideDateHint\" class=\"dbx-datetime-row dbx-datetime-hint-row\" fxFlex=\"100\">\n <div class=\"dbx-hint\" [ngSwitch]=\"fullDay$ | async\">\n <small *ngSwitchCase=\"true\">\n <b class=\"dbx-ok\">{{ allDayLabel }}</b>\n {{ displayValue$ | async | date: 'fullDate' }} ({{ displayValue$ | async | dateDistance }})\n </small>\n <small *ngSwitchCase=\"false\">\n <ng-container *ngIf=\"value$ | async\">\n <b class=\"dbx-ok\">{{ atTimeLabel }}</b>\n {{ displayValue$ | async | date: 'medium' }} ({{ displayValue$ | async | timeDistance }})\n </ng-container>\n </small>\n </div>\n </div>\n</div>\n\n<!-- Date Input Template -->\n<ng-template #dateInputTemplate>\n <button *ngIf=\"!hideDatePicker\" mat-icon-button (click)=\"picker.open()\" [disabled]=\"disabled\">\n <mat-icon>calendar_today</mat-icon>\n </button>\n <mat-form-field class=\"dbx-datetime-row-field\">\n <mat-label>{{ dateLabel }}</mat-label>\n <input #dateInput matInput [min]=\"dateInputMin$ | async\" [max]=\"dateInputMax$ | async\" [matDatepicker]=\"picker\" [matDatepickerFilter]=\"(pickerFilter$ | async) || defaultPickerFilter\" (dateChange)=\"datePicked($event)\" [value]=\"dateValue$ | async\" (keydown)=\"keydownOnDateInput($event)\" />\n <mat-datepicker #picker></mat-datepicker>\n </mat-form-field>\n</ng-template>\n\n<!-- Time Menu/Input Template -->\n<ng-template #timeMenuAndInputTemplate>\n <button mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"opens the time menu\" [disabled]=\"disabled\">\n <mat-icon>timer</mat-icon>\n </button>\n <mat-menu #timemenu=\"matMenu\">\n <ng-container *ngIf=\"timeMode === 'optional'\">\n <button mat-menu-item (click)=\"removeTime()\">\n <span>Remove Time</span>\n </button>\n <mat-divider></mat-divider>\n </ng-container>\n <button mat-menu-item (click)=\"setLogicalTime('now')\">\n <span>Now</span>\n </button>\n <button mat-menu-item (click)=\"setTime('12:00AM')\">\n <span>Midnight</span>\n </button>\n <button mat-menu-item (click)=\"setTime('6:00AM')\">\n <span>6:00AM</span>\n </button>\n <button mat-menu-item (click)=\"setTime('8:00AM')\">\n <span>8:00AM</span>\n </button>\n <button mat-menu-item (click)=\"setTime('10:00AM')\">\n <span>10:00AM</span>\n </button>\n <button mat-menu-item (click)=\"setTime('12:00PM')\">\n <span>Noon</span>\n </button>\n <button mat-menu-item (click)=\"setTime('2:00PM')\">\n <span>2:00PM</span>\n </button>\n <button mat-menu-item (click)=\"setTime('5:00PM')\">\n <span>5:00PM</span>\n </button>\n </mat-menu>\n <mat-form-field class=\"dbx-datetime-row-field\">\n <mat-label>{{ timeLabel }}</mat-label>\n <input #timeInput matInput [formControl]=\"timeInputCtrl\" (focus)=\"focusTime()\" (focusout)=\"focusOutTime()\" (keydown)=\"keydownOnTimeInput($event)\" />\n </mat-form-field>\n</ng-template>\n" }]
|
|
3520
3539
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
|
|
3521
3540
|
|
|
3522
3541
|
class DbxFormFormlyDateFieldModule {
|
|
@@ -3591,15 +3610,18 @@ function timeOnlyField(config = {}) {
|
|
|
3591
3610
|
return dateTimeField(Object.assign(Object.assign({}, config), { timeMode: DbxDateTimeFieldTimeMode.REQUIRED, timeOnly: true }));
|
|
3592
3611
|
}
|
|
3593
3612
|
function dateTimeField(config = {}) {
|
|
3594
|
-
const { key = 'date', dateLabel, timeLabel, timeMode = DbxDateTimeFieldTimeMode.REQUIRED, valueMode, fullDayInUTC, fullDayFieldName, getConfigObs, getSyncFieldsObs, hideDateHint, timeOnly = false } = config;
|
|
3613
|
+
const { key = 'date', dateLabel, timeLabel, allDayLabel, atTimeLabel, timeMode = DbxDateTimeFieldTimeMode.REQUIRED, valueMode, fullDayInUTC, fullDayFieldName, getConfigObs, getSyncFieldsObs, hideDatePicker, hideDateHint, timeOnly = false } = config;
|
|
3595
3614
|
const fieldConfig = formlyField(Object.assign({ key, type: 'datetime' }, propsAndConfigForFieldConfig(config, {
|
|
3596
3615
|
dateLabel,
|
|
3597
3616
|
timeLabel,
|
|
3617
|
+
allDayLabel,
|
|
3618
|
+
atTimeLabel,
|
|
3598
3619
|
valueMode,
|
|
3599
3620
|
timeOnly,
|
|
3600
3621
|
timeMode: timeOnly ? DbxDateTimeFieldTimeMode.REQUIRED : timeMode,
|
|
3601
3622
|
fullDayFieldName,
|
|
3602
3623
|
fullDayInUTC,
|
|
3624
|
+
hideDatePicker,
|
|
3603
3625
|
hideDateHint,
|
|
3604
3626
|
getConfigObs,
|
|
3605
3627
|
getSyncFieldsObs
|