@dereekb/dbx-form 9.20.8 → 9.20.10
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
|
@@ -3288,7 +3288,7 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
|
|
|
3288
3288
|
});
|
|
3289
3289
|
this._config = new BehaviorSubject(undefined);
|
|
3290
3290
|
this._syncConfigObs = new BehaviorSubject(undefined);
|
|
3291
|
-
this.fullDay$ = this.fullDayControl$.pipe(switchMap((control) => control.valueChanges.pipe(startWith(control.value))));
|
|
3291
|
+
this.fullDay$ = this.fullDayControl$.pipe(switchMap((control) => control.valueChanges.pipe(startWith(control.value))), distinctUntilChanged(), shareReplay(1));
|
|
3292
3292
|
this.showTimeInput$ = this.fullDay$.pipe(map((x) => !x && this.timeMode !== DbxDateTimeFieldTimeMode.NONE));
|
|
3293
3293
|
this.showAddTime$ = this.showTimeInput$.pipe(map((x) => !x && this.timeMode === DbxDateTimeFieldTimeMode.OPTIONAL), shareReplay(1));
|
|
3294
3294
|
this.date$ = this.dateInputCtrl.valueChanges.pipe(startWith(this.dateInputCtrl.value), filterMaybe(), shareReplay(1));
|
|
@@ -3392,6 +3392,12 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
|
|
|
3392
3392
|
get timeLabel() {
|
|
3393
3393
|
return this.props.timeLabel ?? 'Time';
|
|
3394
3394
|
}
|
|
3395
|
+
get allDayLabel() {
|
|
3396
|
+
return this.props.allDayLabel ?? 'All Day';
|
|
3397
|
+
}
|
|
3398
|
+
get atTimeLabel() {
|
|
3399
|
+
return this.props.atTimeLabel ?? 'At';
|
|
3400
|
+
}
|
|
3395
3401
|
get dateOnly() {
|
|
3396
3402
|
return this.timeMode === DbxDateTimeFieldTimeMode.NONE;
|
|
3397
3403
|
}
|
|
@@ -3404,18 +3410,27 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
|
|
|
3404
3410
|
get showDateInput() {
|
|
3405
3411
|
return !this.timeOnly;
|
|
3406
3412
|
}
|
|
3407
|
-
get timeMode() {
|
|
3408
|
-
return this.timeOnly ? DbxDateTimeFieldTimeMode.REQUIRED : this.dateTimeField.timeMode ?? DbxDateTimeFieldTimeMode.REQUIRED;
|
|
3409
|
-
}
|
|
3410
3413
|
get valueMode() {
|
|
3411
3414
|
return this.field.props.valueMode ?? DbxDateTimeValueMode.DATE;
|
|
3412
3415
|
}
|
|
3416
|
+
get timeMode() {
|
|
3417
|
+
const dateValuesOnly = this.valueMode === DbxDateTimeValueMode.DAY_STRING;
|
|
3418
|
+
if (dateValuesOnly) {
|
|
3419
|
+
return DbxDateTimeFieldTimeMode.NONE;
|
|
3420
|
+
}
|
|
3421
|
+
else {
|
|
3422
|
+
return this.timeOnly ? DbxDateTimeFieldTimeMode.REQUIRED : this.dateTimeField.timeMode ?? DbxDateTimeFieldTimeMode.REQUIRED;
|
|
3423
|
+
}
|
|
3424
|
+
}
|
|
3413
3425
|
get description() {
|
|
3414
3426
|
return this.field.props.description;
|
|
3415
3427
|
}
|
|
3416
3428
|
get hideDateHint() {
|
|
3417
3429
|
return this.field.props.hideDateHint ?? false;
|
|
3418
3430
|
}
|
|
3431
|
+
get hideDatePicker() {
|
|
3432
|
+
return this.field.props.hideDatePicker ?? false;
|
|
3433
|
+
}
|
|
3419
3434
|
ngOnInit() {
|
|
3420
3435
|
this._formControlObs.next(this.formControl);
|
|
3421
3436
|
this._config.next(this.dateTimeField.getConfigObs?.());
|
|
@@ -3451,7 +3466,8 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
|
|
|
3451
3466
|
fullDayFieldCtrl = this.form.get(isFullDayField);
|
|
3452
3467
|
}
|
|
3453
3468
|
if (!fullDayFieldCtrl) {
|
|
3454
|
-
this.
|
|
3469
|
+
const isFullDay = this.timeMode === DbxDateTimeFieldTimeMode.NONE;
|
|
3470
|
+
this._fullDayInputCtrl = new FormControl(isFullDay);
|
|
3455
3471
|
// Set the control in the form too if the name is defined.
|
|
3456
3472
|
if (isFullDayField) {
|
|
3457
3473
|
this.form.addControl(isFullDayField, this._fullDayInputCtrl);
|
|
@@ -3459,7 +3475,7 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
|
|
|
3459
3475
|
fullDayFieldCtrl = this._fullDayInputCtrl;
|
|
3460
3476
|
}
|
|
3461
3477
|
this._fullDayControlObs.next(fullDayFieldCtrl);
|
|
3462
|
-
switch (this.
|
|
3478
|
+
switch (this.timeMode) {
|
|
3463
3479
|
case DbxDateTimeFieldTimeMode.OPTIONAL:
|
|
3464
3480
|
break;
|
|
3465
3481
|
case DbxDateTimeFieldTimeMode.NONE:
|
|
@@ -3574,10 +3590,10 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
|
|
|
3574
3590
|
}
|
|
3575
3591
|
}
|
|
3576
3592
|
DbxDateTimeFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxDateTimeFieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3577
|
-
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\">
|
|
3593
|
+
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" }] });
|
|
3578
3594
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxDateTimeFieldComponent, decorators: [{
|
|
3579
3595
|
type: Component,
|
|
3580
|
-
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\">
|
|
3596
|
+
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" }]
|
|
3581
3597
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
|
|
3582
3598
|
|
|
3583
3599
|
class DbxFormFormlyDateFieldModule {
|
|
@@ -3656,18 +3672,21 @@ function timeOnlyField(config = {}) {
|
|
|
3656
3672
|
});
|
|
3657
3673
|
}
|
|
3658
3674
|
function dateTimeField(config = {}) {
|
|
3659
|
-
const { key = 'date', dateLabel, timeLabel, timeMode = DbxDateTimeFieldTimeMode.REQUIRED, valueMode, fullDayInUTC, fullDayFieldName, getConfigObs, getSyncFieldsObs, hideDateHint, timeOnly = false } = config;
|
|
3675
|
+
const { key = 'date', dateLabel, timeLabel, allDayLabel, atTimeLabel, timeMode = DbxDateTimeFieldTimeMode.REQUIRED, valueMode, fullDayInUTC, fullDayFieldName, getConfigObs, getSyncFieldsObs, hideDatePicker, hideDateHint, timeOnly = false } = config;
|
|
3660
3676
|
const fieldConfig = formlyField({
|
|
3661
3677
|
key,
|
|
3662
3678
|
type: 'datetime',
|
|
3663
3679
|
...propsAndConfigForFieldConfig(config, {
|
|
3664
3680
|
dateLabel,
|
|
3665
3681
|
timeLabel,
|
|
3682
|
+
allDayLabel,
|
|
3683
|
+
atTimeLabel,
|
|
3666
3684
|
valueMode,
|
|
3667
3685
|
timeOnly,
|
|
3668
3686
|
timeMode: timeOnly ? DbxDateTimeFieldTimeMode.REQUIRED : timeMode,
|
|
3669
3687
|
fullDayFieldName,
|
|
3670
3688
|
fullDayInUTC,
|
|
3689
|
+
hideDatePicker,
|
|
3671
3690
|
hideDateHint,
|
|
3672
3691
|
getConfigObs,
|
|
3673
3692
|
getSyncFieldsObs
|