@dereekb/dbx-form 9.15.4 → 9.15.6
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 +9 -5
- package/esm2020/lib/formly/field/value/date/datetime.field.mjs +7 -5
- package/esm2020/lib/formly/field/wrapper/section.wrapper.component.mjs +5 -8
- package/esm2020/lib/formly/field/wrapper/subsection.wrapper.component.mjs +5 -8
- package/fesm2015/dereekb-dbx-form.mjs +23 -22
- package/fesm2015/dereekb-dbx-form.mjs.map +1 -1
- package/fesm2020/dereekb-dbx-form.mjs +22 -22
- package/fesm2020/dereekb-dbx-form.mjs.map +1 -1
- package/lib/formly/field/value/date/datetime.field.component.d.ts +7 -0
- package/lib/formly/field/wrapper/section.wrapper.component.d.ts +3 -5
- package/lib/formly/field/wrapper/subsection.wrapper.component.d.ts +3 -5
- package/mapbox/package.json +4 -4
- package/package.json +4 -4
|
@@ -11,7 +11,7 @@ import * as i1$1 from '@dereekb/dbx-web';
|
|
|
11
11
|
import { DbxActionTransitionSafetyDirective, DbxTextModule, DbxLoadingModule, DbxFlexLayoutModule, DbxSectionLayoutModule, DbxRouterAnchorModule, AbstractDbxSelectionListWrapperDirective, DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE, AbstractDbxSelectionListViewDirective, addConfigToValueListItems, provideDbxListView, AbstractDbxValueListViewItemComponent, DbxButtonModule, DbxListLayoutModule, mapCompactModeObs, DbxBarLayoutModule } from '@dereekb/dbx-web';
|
|
12
12
|
import { isPast, addSeconds, isSameMinute, startOfDay, isSameDay, addMinutes } from 'date-fns';
|
|
13
13
|
import { BehaviorSubject, switchMap, first, exhaustMap, of, catchError, delay, filter, combineLatest, map, distinctUntilChanged, mergeMap, shareReplay, startWith, debounceTime, Subject, skipWhile, interval, tap, merge, throttleTime, scan, timer } from 'rxjs';
|
|
14
|
-
import { LockSet, SubscriptionObject, asObservable, loadingStateHasFinishedLoading, switchMapMaybeObs, filterMaybe, switchMapMaybeDefault, SimpleLoadingContext, startWithBeginLoading, mapLoadingStateResults, successResult, ListLoadingStateContextInstance, isListLoadingStateEmpty, LoadingStateContextInstance, skipFirstMaybe, asyncPusherCache, scanCount } from '@dereekb/rxjs';
|
|
14
|
+
import { LockSet, SubscriptionObject, asObservable, loadingStateHasFinishedLoading, switchMapMaybeObs, filterMaybe, switchMapMaybeDefault, SimpleLoadingContext, startWithBeginLoading, mapLoadingStateResults, successResult, ListLoadingStateContextInstance, isListLoadingStateEmpty, LoadingStateContextInstance, tapLog, skipFirstMaybe, asyncPusherCache, scanCount } from '@dereekb/rxjs';
|
|
15
15
|
import * as i1$3 from '@ngx-formly/core';
|
|
16
16
|
import { FieldType, FieldWrapper, FormlyModule, FieldArrayType } from '@ngx-formly/core';
|
|
17
17
|
import * as i3$1 from '@angular/forms';
|
|
@@ -641,16 +641,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
|
|
|
641
641
|
}] });
|
|
642
642
|
|
|
643
643
|
class DbxFormSectionWrapperComponent extends FieldWrapper {
|
|
644
|
-
get
|
|
645
|
-
return this.props
|
|
646
|
-
}
|
|
647
|
-
get hint() {
|
|
648
|
-
return this.props.hint;
|
|
644
|
+
get headerConfig() {
|
|
645
|
+
return this.props;
|
|
649
646
|
}
|
|
650
647
|
}
|
|
651
648
|
DbxFormSectionWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxFormSectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
652
649
|
DbxFormSectionWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxFormSectionWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
|
|
653
|
-
<dbx-section [
|
|
650
|
+
<dbx-section [headerConfig]="headerConfig">
|
|
654
651
|
<ng-container #fieldComponent></ng-container>
|
|
655
652
|
</dbx-section>
|
|
656
653
|
`, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxSectionComponent, selector: "dbx-section", inputs: ["elevate"] }] });
|
|
@@ -658,7 +655,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
|
|
|
658
655
|
type: Component,
|
|
659
656
|
args: [{
|
|
660
657
|
template: `
|
|
661
|
-
<dbx-section [
|
|
658
|
+
<dbx-section [headerConfig]="headerConfig">
|
|
662
659
|
<ng-container #fieldComponent></ng-container>
|
|
663
660
|
</dbx-section>
|
|
664
661
|
`
|
|
@@ -694,16 +691,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
|
|
|
694
691
|
}] });
|
|
695
692
|
|
|
696
693
|
class DbxFormSubsectionWrapperComponent extends FieldWrapper {
|
|
697
|
-
get
|
|
698
|
-
return this.props
|
|
699
|
-
}
|
|
700
|
-
get hint() {
|
|
701
|
-
return this.props.hint;
|
|
694
|
+
get headerConfig() {
|
|
695
|
+
return this.props;
|
|
702
696
|
}
|
|
703
697
|
}
|
|
704
698
|
DbxFormSubsectionWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxFormSubsectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
705
699
|
DbxFormSubsectionWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxFormSubsectionWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
|
|
706
|
-
<dbx-subsection [
|
|
700
|
+
<dbx-subsection [headerConfig]="headerConfig">
|
|
707
701
|
<ng-container #fieldComponent></ng-container>
|
|
708
702
|
</dbx-subsection>
|
|
709
703
|
`, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxSubSectionComponent, selector: "dbx-subsection" }] });
|
|
@@ -711,7 +705,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
|
|
|
711
705
|
type: Component,
|
|
712
706
|
args: [{
|
|
713
707
|
template: `
|
|
714
|
-
<dbx-subsection [
|
|
708
|
+
<dbx-subsection [headerConfig]="headerConfig">
|
|
715
709
|
<ng-container #fieldComponent></ng-container>
|
|
716
710
|
</dbx-subsection>
|
|
717
711
|
`
|
|
@@ -2957,7 +2951,7 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
|
|
|
2957
2951
|
this.showTimeInput$ = this.fullDay$.pipe(map((x) => !x && this.timeMode !== DbxDateTimeFieldTimeMode.NONE));
|
|
2958
2952
|
this.showAddTime$ = this.showTimeInput$.pipe(map((x) => !x && this.timeMode === DbxDateTimeFieldTimeMode.OPTIONAL), shareReplay(1));
|
|
2959
2953
|
this.date$ = this.dateInputCtrl.valueChanges.pipe(startWith(this.dateInputCtrl.value), filterMaybe(), shareReplay(1));
|
|
2960
|
-
this.dateValue$ = merge(this.date
|
|
2954
|
+
this.dateValue$ = merge(this.date$.pipe(tapLog('date')), this.value$.pipe(skipFirstMaybe())).pipe(map((x) => (x ? startOfDay(x) : x)), distinctUntilChanged((a, b) => a != null && b != null && isSameDay(a, b)), shareReplay(1));
|
|
2961
2955
|
this.timeInput$ = this._updateTime.pipe(debounceTime(5), map(() => this.timeInputCtrl.value || ''), distinctUntilChanged());
|
|
2962
2956
|
this.config$ = this._config.pipe(switchMapMaybeDefault(), shareReplay(1));
|
|
2963
2957
|
this.rawDateTime$ = combineLatest([this.dateValue$, this.timeInput$.pipe(startWith(null)), this.fullDay$]).pipe(map(([date, timeString, fullDay]) => {
|
|
@@ -3019,6 +3013,9 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
|
|
|
3019
3013
|
get description() {
|
|
3020
3014
|
return this.field.props.description;
|
|
3021
3015
|
}
|
|
3016
|
+
get hideDateHint() {
|
|
3017
|
+
return this.field.props.hideDateHint ?? false;
|
|
3018
|
+
}
|
|
3022
3019
|
ngOnInit() {
|
|
3023
3020
|
this._formControlObs.next(this.formControl);
|
|
3024
3021
|
this._config.next(this.dateTimeField.getConfigObs?.());
|
|
@@ -3084,6 +3081,7 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
|
|
|
3084
3081
|
}
|
|
3085
3082
|
datePicked(event) {
|
|
3086
3083
|
const date = event.value;
|
|
3084
|
+
console.log('date picked?', event);
|
|
3087
3085
|
if (date) {
|
|
3088
3086
|
this.dateInputCtrl.setValue(date);
|
|
3089
3087
|
this._updateTime.next();
|
|
@@ -3145,10 +3143,10 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
|
|
|
3145
3143
|
}
|
|
3146
3144
|
}
|
|
3147
3145
|
DbxDateTimeFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxDateTimeFieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3148
|
-
DbxDateTimeFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", 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 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\">All Day</b>\n {{ dateValue$ | async | date: 'fullDate' }} ({{ dateValue$ | async | dateDistance }})\n </small>\n <small *ngSwitchCase=\"false\">\n <ng-container *ngIf=\"value$ | async\">\n <b class=\"dbx-ok\">At</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 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>Date</mat-label>\n <input #dateInput matInput [
|
|
3146
|
+
DbxDateTimeFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", 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\">All Day</b>\n {{ dateValue$ | async | date: 'fullDate' }} ({{ dateValue$ | async | dateDistance }})\n </small>\n <small *ngSwitchCase=\"false\">\n <ng-container *ngIf=\"value$ | async\">\n <b class=\"dbx-ok\">At</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 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>Date</mat-label>\n <input #dateInput matInput [matDatepicker]=\"picker\" (dateChange)=\"datePicked($event)\" [value]=\"dateValue$ | async\" />\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>Time</mat-label>\n <input #timeInput matInput [formControl]=\"timeInputCtrl\" (focus)=\"focusTime()\" (focusout)=\"focusOutTime()\" (keydown)=\"keydownOnInput($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$2.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$2.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" }] });
|
|
3149
3147
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxDateTimeFieldComponent, decorators: [{
|
|
3150
3148
|
type: Component,
|
|
3151
|
-
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 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\">All Day</b>\n {{ dateValue$ | async | date: 'fullDate' }} ({{ dateValue$ | async | dateDistance }})\n </small>\n <small *ngSwitchCase=\"false\">\n <ng-container *ngIf=\"value$ | async\">\n <b class=\"dbx-ok\">At</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 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>Date</mat-label>\n <input #dateInput matInput [
|
|
3149
|
+
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\">All Day</b>\n {{ dateValue$ | async | date: 'fullDate' }} ({{ dateValue$ | async | dateDistance }})\n </small>\n <small *ngSwitchCase=\"false\">\n <ng-container *ngIf=\"value$ | async\">\n <b class=\"dbx-ok\">At</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 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>Date</mat-label>\n <input #dateInput matInput [matDatepicker]=\"picker\" (dateChange)=\"datePicked($event)\" [value]=\"dateValue$ | async\" />\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>Time</mat-label>\n <input #timeInput matInput [formControl]=\"timeInputCtrl\" (focus)=\"focusTime()\" (focusout)=\"focusOutTime()\" (keydown)=\"keydownOnInput($event)\" />\n </mat-form-field>\n</ng-template>\n" }]
|
|
3152
3150
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
|
|
3153
3151
|
|
|
3154
3152
|
class DbxFormFormlyDateFieldModule {
|
|
@@ -3227,16 +3225,18 @@ function timeOnlyField(config = {}) {
|
|
|
3227
3225
|
});
|
|
3228
3226
|
}
|
|
3229
3227
|
function dateTimeField(config = {}) {
|
|
3230
|
-
const { key = 'date', timeMode = DbxDateTimeFieldTimeMode.REQUIRED, valueMode, fullDayFieldName, getConfigObs, timeOnly = false } = config;
|
|
3228
|
+
const { key = 'date', timeMode = DbxDateTimeFieldTimeMode.REQUIRED, valueMode, fullDayInUTC, fullDayFieldName, getConfigObs, hideDateHint, timeOnly = false } = config;
|
|
3231
3229
|
const fieldConfig = formlyField({
|
|
3232
3230
|
key,
|
|
3233
3231
|
type: 'datetime',
|
|
3234
3232
|
...propsForFieldConfig(config, {
|
|
3233
|
+
valueMode,
|
|
3234
|
+
timeOnly,
|
|
3235
3235
|
timeMode: timeOnly ? DbxDateTimeFieldTimeMode.REQUIRED : timeMode,
|
|
3236
3236
|
fullDayFieldName,
|
|
3237
|
-
|
|
3238
|
-
|
|
3239
|
-
|
|
3237
|
+
fullDayInUTC,
|
|
3238
|
+
hideDateHint,
|
|
3239
|
+
getConfigObs
|
|
3240
3240
|
})
|
|
3241
3241
|
});
|
|
3242
3242
|
return styleWrapper(fieldConfig, {
|