@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
|
@@ -6,7 +6,7 @@ import * as i1$1 from '@dereekb/dbx-web';
|
|
|
6
6
|
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';
|
|
7
7
|
import { isPast, addSeconds, isSameMinute, startOfDay, isSameDay, addMinutes } from 'date-fns';
|
|
8
8
|
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';
|
|
9
|
-
import { LockSet, SubscriptionObject, asObservable, loadingStateHasFinishedLoading, switchMapMaybeObs, filterMaybe, switchMapMaybeDefault, SimpleLoadingContext, startWithBeginLoading, mapLoadingStateResults, successResult, ListLoadingStateContextInstance, isListLoadingStateEmpty, LoadingStateContextInstance, skipFirstMaybe, asyncPusherCache, scanCount } from '@dereekb/rxjs';
|
|
9
|
+
import { LockSet, SubscriptionObject, asObservable, loadingStateHasFinishedLoading, switchMapMaybeObs, filterMaybe, switchMapMaybeDefault, SimpleLoadingContext, startWithBeginLoading, mapLoadingStateResults, successResult, ListLoadingStateContextInstance, isListLoadingStateEmpty, LoadingStateContextInstance, tapLog, skipFirstMaybe, asyncPusherCache, scanCount } from '@dereekb/rxjs';
|
|
10
10
|
import * as i2 from '@dereekb/dbx-core';
|
|
11
11
|
import { AbstractSubscriptionDirective, safeDetectChanges, DbxInjectionComponentModule, DbxDatePipeModule, mergeDbxInjectionComponentConfigs, tapDetectChanges } from '@dereekb/dbx-core';
|
|
12
12
|
import * as i3 from '@uirouter/core';
|
|
@@ -657,16 +657,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
|
|
|
657
657
|
}] });
|
|
658
658
|
|
|
659
659
|
class DbxFormSectionWrapperComponent extends FieldWrapper {
|
|
660
|
-
get
|
|
661
|
-
return this.props
|
|
662
|
-
}
|
|
663
|
-
get hint() {
|
|
664
|
-
return this.props.hint;
|
|
660
|
+
get headerConfig() {
|
|
661
|
+
return this.props;
|
|
665
662
|
}
|
|
666
663
|
}
|
|
667
664
|
DbxFormSectionWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxFormSectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
668
665
|
DbxFormSectionWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxFormSectionWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
|
|
669
|
-
<dbx-section [
|
|
666
|
+
<dbx-section [headerConfig]="headerConfig">
|
|
670
667
|
<ng-container #fieldComponent></ng-container>
|
|
671
668
|
</dbx-section>
|
|
672
669
|
`, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxSectionComponent, selector: "dbx-section", inputs: ["elevate"] }] });
|
|
@@ -674,7 +671,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
|
|
|
674
671
|
type: Component,
|
|
675
672
|
args: [{
|
|
676
673
|
template: `
|
|
677
|
-
<dbx-section [
|
|
674
|
+
<dbx-section [headerConfig]="headerConfig">
|
|
678
675
|
<ng-container #fieldComponent></ng-container>
|
|
679
676
|
</dbx-section>
|
|
680
677
|
`
|
|
@@ -711,16 +708,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
|
|
|
711
708
|
}] });
|
|
712
709
|
|
|
713
710
|
class DbxFormSubsectionWrapperComponent extends FieldWrapper {
|
|
714
|
-
get
|
|
715
|
-
return this.props
|
|
716
|
-
}
|
|
717
|
-
get hint() {
|
|
718
|
-
return this.props.hint;
|
|
711
|
+
get headerConfig() {
|
|
712
|
+
return this.props;
|
|
719
713
|
}
|
|
720
714
|
}
|
|
721
715
|
DbxFormSubsectionWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxFormSubsectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
722
716
|
DbxFormSubsectionWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxFormSubsectionWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
|
|
723
|
-
<dbx-subsection [
|
|
717
|
+
<dbx-subsection [headerConfig]="headerConfig">
|
|
724
718
|
<ng-container #fieldComponent></ng-container>
|
|
725
719
|
</dbx-subsection>
|
|
726
720
|
`, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxSubSectionComponent, selector: "dbx-subsection" }] });
|
|
@@ -728,7 +722,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
|
|
|
728
722
|
type: Component,
|
|
729
723
|
args: [{
|
|
730
724
|
template: `
|
|
731
|
-
<dbx-subsection [
|
|
725
|
+
<dbx-subsection [headerConfig]="headerConfig">
|
|
732
726
|
<ng-container #fieldComponent></ng-container>
|
|
733
727
|
</dbx-subsection>
|
|
734
728
|
`
|
|
@@ -2900,7 +2894,7 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
|
|
|
2900
2894
|
this.showTimeInput$ = this.fullDay$.pipe(map((x) => !x && this.timeMode !== DbxDateTimeFieldTimeMode.NONE));
|
|
2901
2895
|
this.showAddTime$ = this.showTimeInput$.pipe(map((x) => !x && this.timeMode === DbxDateTimeFieldTimeMode.OPTIONAL), shareReplay(1));
|
|
2902
2896
|
this.date$ = this.dateInputCtrl.valueChanges.pipe(startWith(this.dateInputCtrl.value), filterMaybe(), shareReplay(1));
|
|
2903
|
-
this.dateValue$ = merge(this.date
|
|
2897
|
+
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));
|
|
2904
2898
|
this.timeInput$ = this._updateTime.pipe(debounceTime(5), map(() => this.timeInputCtrl.value || ''), distinctUntilChanged());
|
|
2905
2899
|
this.config$ = this._config.pipe(switchMapMaybeDefault(), shareReplay(1));
|
|
2906
2900
|
this.rawDateTime$ = combineLatest([this.dateValue$, this.timeInput$.pipe(startWith(null)), this.fullDay$]).pipe(map(([date, timeString, fullDay]) => {
|
|
@@ -2961,6 +2955,10 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
|
|
|
2961
2955
|
get description() {
|
|
2962
2956
|
return this.field.props.description;
|
|
2963
2957
|
}
|
|
2958
|
+
get hideDateHint() {
|
|
2959
|
+
var _a;
|
|
2960
|
+
return (_a = this.field.props.hideDateHint) !== null && _a !== void 0 ? _a : false;
|
|
2961
|
+
}
|
|
2964
2962
|
ngOnInit() {
|
|
2965
2963
|
var _a, _b;
|
|
2966
2964
|
this._formControlObs.next(this.formControl);
|
|
@@ -3027,6 +3025,7 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
|
|
|
3027
3025
|
}
|
|
3028
3026
|
datePicked(event) {
|
|
3029
3027
|
const date = event.value;
|
|
3028
|
+
console.log('date picked?', event);
|
|
3030
3029
|
if (date) {
|
|
3031
3030
|
this.dateInputCtrl.setValue(date);
|
|
3032
3031
|
this._updateTime.next();
|
|
@@ -3089,10 +3088,10 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
|
|
|
3089
3088
|
}
|
|
3090
3089
|
}
|
|
3091
3090
|
DbxDateTimeFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxDateTimeFieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3092
|
-
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 [
|
|
3091
|
+
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" }] });
|
|
3093
3092
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxDateTimeFieldComponent, decorators: [{
|
|
3094
3093
|
type: Component,
|
|
3095
|
-
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 [
|
|
3094
|
+
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" }]
|
|
3096
3095
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
|
|
3097
3096
|
|
|
3098
3097
|
class DbxFormFormlyDateFieldModule {
|
|
@@ -3167,13 +3166,15 @@ function timeOnlyField(config = {}) {
|
|
|
3167
3166
|
return dateTimeField(Object.assign(Object.assign({}, config), { timeMode: DbxDateTimeFieldTimeMode.REQUIRED, timeOnly: true }));
|
|
3168
3167
|
}
|
|
3169
3168
|
function dateTimeField(config = {}) {
|
|
3170
|
-
const { key = 'date', timeMode = DbxDateTimeFieldTimeMode.REQUIRED, valueMode, fullDayFieldName, getConfigObs, timeOnly = false } = config;
|
|
3169
|
+
const { key = 'date', timeMode = DbxDateTimeFieldTimeMode.REQUIRED, valueMode, fullDayInUTC, fullDayFieldName, getConfigObs, hideDateHint, timeOnly = false } = config;
|
|
3171
3170
|
const fieldConfig = formlyField(Object.assign({ key, type: 'datetime' }, propsForFieldConfig(config, {
|
|
3171
|
+
valueMode,
|
|
3172
|
+
timeOnly,
|
|
3172
3173
|
timeMode: timeOnly ? DbxDateTimeFieldTimeMode.REQUIRED : timeMode,
|
|
3173
3174
|
fullDayFieldName,
|
|
3174
|
-
|
|
3175
|
-
|
|
3176
|
-
|
|
3175
|
+
fullDayInUTC,
|
|
3176
|
+
hideDateHint,
|
|
3177
|
+
getConfigObs
|
|
3177
3178
|
})));
|
|
3178
3179
|
return styleWrapper(fieldConfig, {
|
|
3179
3180
|
classGetter: 'dbx-mat-form-field-disable-underline'
|