@dereekb/dbx-form 9.23.27 → 9.24.0

package/fesm2020/dereekb-dbx-form.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { forwardRef, Directive, Host, Input, NgModule, EventEmitter, Output, Component, ViewChild, InjectionToken, Inject, ElementRef, Optional } from '@angular/core';
+import { forwardRef, Directive, Host, Input, NgModule, EventEmitter, Output, Component, ViewChild, InjectionToken, Inject, ElementRef, Optional, Injectable } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i4 from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
 import * as i3 from '@uirouter/core';
 import * as i2 from '@dereekb/dbx-core';
-import { AbstractSubscriptionDirective, safeDetectChanges, DbxInjectionComponentModule, DbxDatePipeModule, mergeDbxInjectionComponentConfigs, tapDetectChanges } from '@dereekb/dbx-core';
+import { AbstractSubscriptionDirective, safeDetectChanges, DbxInjectionComponentModule, DbxDatePipeModule, mergeDbxInjectionComponentConfigs, tapDetectChanges, DbxValuePipeModule } from '@dereekb/dbx-core';
 import * as i2$1 from '@dereekb/dbx-web';
 import { DbxActionTransitionSafetyDirective, DbxTextModule, DbxLoadingModule, DbxFlexLayoutModule, DbxSectionLayoutModule, DbxRouterAnchorModule, dbxValueListItemDecisionFunction, DbxButtonModule, DbxListLayoutModule, AbstractDbxSelectionListWrapperDirective, DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE, AbstractDbxSelectionListViewDirective, addConfigToValueListItems, provideDbxListView, AbstractDbxValueListViewItemComponent, DbxActionModule, mapCompactModeObs, DbxBarLayoutModule } from '@dereekb/dbx-web';
 import { isPast, addSeconds, startOfDay, addMinutes, addDays } from 'date-fns';
@@ -26,7 +26,7 @@ import * as i1$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i3$2 from '@angular/flex-layout/flex';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { objectIsEmpty, mergeObjectsFunction, filterFromPOJOFunction, mergeObjects, filterFromPOJO, asArray, objectHasNoKeys, addPlusPrefixToNumber, convertMaybeToArray, isSelectedDecisionFunctionFactory, readKeysFrom, hasDifferentValues, makeValuesGroupMap, separateValues, filterUniqueValues, searchStringFilterFunction, caseInsensitiveFilterByIndexOfDecisionFactory, sortByStringFunction, mergeIntoArray, lastValue, arrayToMap, setContainsAllValues, addToSetCopy, setsAreEquivalent, filterMaybeValues, mergeArrays, cachedGetter, makeGetter, asDecisionFunction, getValueFromGetter, dateFromLogicalDate, WEBSITE_DOMAIN_NAME_REGEX, KeyValueTypleValueFilter, valuesFromPOJO, allObjectsAreEqual, isNumberDivisibleBy, nearestDivisibleValues, mapMaybeFunction, transformNumberFunction, concatArrays, transformStringFunction, US_STATE_CODE_STRING_REGEX, ZIP_CODE_STRING_REGEX, LAT_LNG_PATTERN, BooleanStringKeyArrayUtilityInstance, capitalizeFirstLetter } from '@dereekb/util';
+import { objectIsEmpty, mergeObjectsFunction, filterFromPOJOFunction, mergeObjects, filterFromPOJO, asArray, objectHasNoKeys, addPlusPrefixToNumber, convertMaybeToArray, isSelectedDecisionFunctionFactory, readKeysFrom, hasDifferentValues, makeValuesGroupMap, separateValues, filterUniqueValues, searchStringFilterFunction, caseInsensitiveFilterByIndexOfDecisionFactory, sortByStringFunction, mergeIntoArray, lastValue, arrayToMap, setContainsAllValues, addToSetCopy, setsAreEquivalent, filterMaybeValues, mergeArrays, cachedGetter, makeGetter, asDecisionFunction, getValueFromGetter, asGetter, MS_IN_MINUTE, isMonthDaySlashDate, WEBSITE_DOMAIN_NAME_REGEX, KeyValueTypleValueFilter, valuesFromPOJO, allObjectsAreEqual, isNumberDivisibleBy, nearestDivisibleValues, mapMaybeFunction, transformNumberFunction, concatArrays, transformStringFunction, US_STATE_CODE_STRING_REGEX, ZIP_CODE_STRING_REGEX, LAT_LNG_PATTERN, BooleanStringKeyArrayUtilityInstance, capitalizeFirstLetter } from '@dereekb/util';
 import * as i2$2 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i2$3 from '@angular/flex-layout/extended';
@@ -34,7 +34,7 @@ import * as i5 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import * as i4$4 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i3$4 from '@angular/material/form-field';
+import * as i4$7 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i4$3 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
@@ -44,13 +44,13 @@ import * as i6 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatListModule } from '@angular/material/list';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
-import { skipUntilTimeElapsedAfterLastEmission, toJsDate, parseISO8601DayStringToDate, formatToISO8601DateString, formatToISO8601DayString, safeToJsDate, isSameDateHoursAndMinutes, guessCurrentTimezone, dateTimezoneUtcNormal, toLocalReadableTimeString, getTimezoneAbbreviation, isSameDateDay, utcDayForDate, readableTimeStringToDate, findMinDate, findMaxDate, dateTimeMinuteDecisionFunction, DateTimeMinuteInstance, allTimezoneInfos, timezoneInfoForSystem, searchTimezoneInfos } from '@dereekb/date';
+import { skipUntilTimeElapsedAfterLastEmission, toJsDate, parseISO8601DayStringToDate, formatToISO8601DateString, formatToISO8601DayString, isSameDateHoursAndMinutes, safeToJsDate, guessCurrentTimezone, dateTimezoneUtcNormal, toLocalReadableTimeString, getTimezoneAbbreviation, isSameDateDay, utcDayForDate, readableTimeStringToDate, findMinDate, dateFromLogicalDate, findMaxDate, dateTimeMinuteDecisionFunction, DateTimeMinuteInstance, limitDateTimeInstance, isSameDateDayRange, dateRange, clampDateRangeToDateRange, isDateInDateRange, isSameDateRange, allTimezoneInfos, timezoneInfoForSystem, searchTimezoneInfos } from '@dereekb/date';
 import { FieldType as FieldType$2, FormlyMatFormFieldModule } from '@ngx-formly/material/form-field';
 import * as i3$3 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i8 from '@angular/material/datepicker';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i9 from '@angular/material/menu';
+import * as i5$1 from '@angular/material/datepicker';
+import { MatDatepickerModule, DateRange, MAT_DATE_RANGE_SELECTION_STRATEGY, MatCalendar } from '@angular/material/datepicker';
+import * as i10 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i4$5 from 'ngx-editor';
 import { Editor, NgxEditorModule } from 'ngx-editor';
@@ -214,11 +214,16 @@ class DbxActionFormDirective {
         return combineLatest([validatorObs, modifiedObs]).pipe(first(), map(([valid, modified]) => valid && modified));
     }
     readyValue(value) {
-        return of({ value });
+        if (this.dbxActionFormMapValue) {
+            return asObservable(this.dbxActionFormMapValue(value));
+        }
+        else {
+            return of({ value: value });
+        }
     }
 }
 DbxActionFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxActionFormDirective, deps: [{ token: DbxMutableForm, host: true }, { token: i2.DbxActionContextStoreSourceInstance }], target: i0.ɵɵFactoryTarget.Directive });
-DbxActionFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: DbxActionFormDirective, selector: "[dbxActionForm]", inputs: { dbxActionFormValidator: "dbxActionFormValidator", dbxActionFormModified: "dbxActionFormModified", formDisabledOnWorking: "formDisabledOnWorking" }, ngImport: i0 });
+DbxActionFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: DbxActionFormDirective, selector: "[dbxActionForm]", inputs: { dbxActionFormValidator: "dbxActionFormValidator", dbxActionFormModified: "dbxActionFormModified", dbxActionFormMapValue: "dbxActionFormMapValue", formDisabledOnWorking: "formDisabledOnWorking" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxActionFormDirective, decorators: [{
             type: Directive,
             args: [{
@@ -230,6 +235,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Input
             }], dbxActionFormModified: [{
                 type: Input
+            }], dbxActionFormMapValue: [{
+                type: Input
             }], formDisabledOnWorking: [{
                 type: Input
             }] } });
@@ -3653,21 +3660,59 @@ export function acceptTermsField({ key = 'accept', label = 'Accept Terms', descr
 }
 */
 
-var DbxDateTimeFieldTimeMode;
-(function (DbxDateTimeFieldTimeMode) {
-    /**
-     * Time is required.
-     */
-    DbxDateTimeFieldTimeMode["REQUIRED"] = "required";
-    /**
-     * Time is optional.
-     */
-    DbxDateTimeFieldTimeMode["OPTIONAL"] = "optional";
-    /**
-     * Time is permenantly off.
-     */
-    DbxDateTimeFieldTimeMode["NONE"] = "none";
-})(DbxDateTimeFieldTimeMode || (DbxDateTimeFieldTimeMode = {}));
+/**
+ * Creates a DateTimePreset from a DateTimePresetConfiguration
+ *
+ * @param config
+ */
+function dateTimePreset(config) {
+    let value;
+    if (config.logicalDate) {
+        value = () => ({ logicalDate: getValueFromGetter(config.logicalDate) });
+    }
+    else if (config.timeString) {
+        value = () => ({ timeString: getValueFromGetter(config.timeString) });
+    }
+    else {
+        value = () => ({ logicalDate: 'now' });
+    }
+    if (!config.dynamic) {
+        value = asGetter(value()); // get/calculate the value now and return it if not dynamic
+    }
+    return {
+        label: asGetter(config.label),
+        value
+    };
+}
+
+const DBX_DATE_TIME_FIELD_MENU_PRESETS_TOKEN = new InjectionToken('DbxDateTimeFieldMenuPresetsServicePresets');
+class DbxDateTimeFieldMenuPresetsService {
+    constructor(initialConfigs) {
+        this.initialConfigs = initialConfigs;
+        this._configurations = new BehaviorSubject(this.initialConfigs ?? []);
+        this.configurations$ = this._configurations.asObservable();
+    }
+    get configurations() {
+        return this._configurations.value;
+    }
+    set configurations(configurations) {
+        this._configurations.next(configurations);
+    }
+}
+DbxDateTimeFieldMenuPresetsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, deps: [{ token: DBX_DATE_TIME_FIELD_MENU_PRESETS_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+DbxDateTimeFieldMenuPresetsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DBX_DATE_TIME_FIELD_MENU_PRESETS_TOKEN]
+                }, {
+                    type: Optional
+                }] }]; } });
+
 var DbxDateTimeValueMode;
 (function (DbxDateTimeValueMode) {
     /**
@@ -3733,6 +3778,28 @@ function dbxDateTimeOutputValueFactory(mode, timezoneInstance) {
     }
     return factory;
 }
+function dbxDateTimeIsSameDateTimeFieldValue(a, b) {
+    return a && b ? (typeof a === 'string' ? a === b : isSameDateHoursAndMinutes(a, b)) : a == b;
+}
+function dbxDateRangeIsSameDateRangeFieldValue(a, b) {
+    return a && b ? dbxDateTimeIsSameDateTimeFieldValue(a.start, b.start) && dbxDateTimeIsSameDateTimeFieldValue(a.end, b.end) : a == b;
+}
+
+var DbxDateTimeFieldTimeMode;
+(function (DbxDateTimeFieldTimeMode) {
+    /**
+     * Time is required.
+     */
+    DbxDateTimeFieldTimeMode["REQUIRED"] = "required";
+    /**
+     * Time is optional.
+     */
+    DbxDateTimeFieldTimeMode["OPTIONAL"] = "optional";
+    /**
+     * Time is permenantly off.
+     */
+    DbxDateTimeFieldTimeMode["NONE"] = "none";
+})(DbxDateTimeFieldTimeMode || (DbxDateTimeFieldTimeMode = {}));
 function syncConfigValueObs(parseConfigsObs, type) {
     return parseConfigsObs.pipe(switchMap((x) => {
         const config = x.find((y) => y.syncType === type);
@@ -3747,28 +3814,28 @@ function syncConfigValueObs(parseConfigsObs, type) {
         return result;
     }), distinctUntilChanged(), shareReplay(1));
 }
-function isSameDateTimeFieldValue(a, b) {
-    return a && b ? (typeof a === 'string' ? a === b : isSameDateHoursAndMinutes(a, b)) : a == b;
-}
-const TIME_OUTPUT_THROTTLE_TIME = 10;
+const TIME_OUTPUT_THROTTLE_TIME$1 = 10;
 class DbxDateTimeFieldComponent extends FieldType$1 {
-    constructor(cdRef) {
+    constructor(cdRef, dbxDateTimeFieldConfigService) {
         super();
         this.cdRef = cdRef;
+        this.dbxDateTimeFieldConfigService = dbxDateTimeFieldConfigService;
         this._sub = new SubscriptionObject();
         this._valueSub = new SubscriptionObject();
+        this._config = new BehaviorSubject(undefined);
+        this._syncConfigObs = new BehaviorSubject(undefined);
         this._defaultTimezone = new BehaviorSubject(undefined);
-        this._customTimezone = new BehaviorSubject(undefined);
+        this._presets = new BehaviorSubject(of([]));
         this._fullDayControlObs = new BehaviorSubject(undefined);
         this.fullDayControl$ = this._fullDayControlObs.pipe(filterMaybe());
         this._offset = new BehaviorSubject(0);
         this._formControlObs = new BehaviorSubject(undefined);
         this.formControl$ = this._formControlObs.pipe(filterMaybe());
         this._updateTime = new Subject();
-        this.timezone$ = combineLatest([this._defaultTimezone.pipe(switchMapMaybeDefault(), distinctUntilChanged()), this._customTimezone]).pipe(map(([defaultTimezone, customTimezone]) => {
-            return customTimezone ?? defaultTimezone ?? guessCurrentTimezone();
+        this.timezone$ = this._defaultTimezone.pipe(switchMapMaybeDefault(), distinctUntilChanged()).pipe(map((defaultTimezone) => {
+            return defaultTimezone ?? guessCurrentTimezone();
         }), distinctUntilChanged(), shareReplay(1));
-        this.timezoneInstance$ = this.timezone$.pipe(map((timezone) => (Boolean(timezone) ? dateTimezoneUtcNormal({ timezone }) : undefined)), shareReplay(1));
+        this.timezoneInstance$ = this.timezone$.pipe(map((timezone) => (timezone ? dateTimezoneUtcNormal({ timezone }) : undefined)), shareReplay(1));
         this.valueInSystemTimezone$ = this.formControl$.pipe(map((control) => control.valueChanges.pipe(startWith(control.value), shareReplay(1))), combineLatestWith(this.timezoneInstance$), switchMap(([x, timezoneInstance]) => {
             return x.pipe(map(dbxDateTimeInputValueParseFactory(this.valueMode, timezoneInstance)));
         }), throttleTime(20, undefined, { leading: false, trailing: true }), // throttle incoming values and timezone changes
@@ -3784,8 +3851,6 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
         this.timeInputCtrl = new FormControl('', {
             validators: [Validators.pattern(/^(now)$|^([0-9]|(0[0-9])|(1[0-9])|(2[0-3]))(:)?([0-5][0-9])?(\s)?([apAP][Mm])?(\\s)*$/)]
         });
-        this._config = new BehaviorSubject(undefined);
-        this._syncConfigObs = new BehaviorSubject(undefined);
         this.fullDay$ = this.fullDayControl$.pipe(switchMap((control) => control.valueChanges.pipe(startWith(control.value))), distinctUntilChanged(), shareReplay(1));
         this.showTimeInput$ = this.fullDay$.pipe(map((x) => !x && this.timeMode !== DbxDateTimeFieldTimeMode.NONE));
         this.showAddTime$ = this.showTimeInput$.pipe(map((x) => !x && this.timeMode === DbxDateTimeFieldTimeMode.OPTIONAL), shareReplay(1));
@@ -3847,12 +3912,12 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
             }
             return result;
         }), distinctUntilChanged(isSameDateHoursAndMinutes), shareReplay(1));
-        this.config$ = combineLatest([this._config.pipe(switchMapMaybeDefault(), shareReplay(1)), this.dateInputMin$, this.dateInputMax$]).pipe(map(([x, dateInputMin, dateInputMax]) => {
+        this.config$ = combineLatest([this._config.pipe(switchMapMaybeDefault()), this.dateInputMin$, this.dateInputMax$]).pipe(map(([x, dateInputMin, dateInputMax]) => {
             let result = x;
             if (dateInputMin != null || dateInputMax != null) {
                 const { min: limitMin, max: limitMax } = x?.limits ?? {};
-                const min = findMinDate([dateInputMin, limitMin]);
-                const max = findMaxDate([dateInputMax, limitMax]);
+                const min = findMinDate([dateInputMin, dateFromLogicalDate(limitMin)]);
+                const max = findMaxDate([dateInputMax, dateFromLogicalDate(limitMax)]);
                 result = {
                     ...x,
                     limits: {
@@ -3874,7 +3939,7 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
             }
         }), shareReplay(1));
         this.defaultPickerFilter = () => true;
-        this.timeOutput$ = combineLatest([this.rawDateTime$, this._offset, this.config$]).pipe(throttleTime(TIME_OUTPUT_THROTTLE_TIME, undefined, { leading: false, trailing: true }), distinctUntilChanged((current, next) => current[0] === next[0] && next[1] === 0), tap(([, stepsOffset]) => (stepsOffset ? this._offset.next(0) : 0)), map(([date, stepsOffset, config]) => {
+        this.timeOutput$ = combineLatest([this.rawDateTime$, this._offset, this.config$]).pipe(throttleTime(TIME_OUTPUT_THROTTLE_TIME$1, undefined, { leading: false, trailing: true }), distinctUntilChanged((current, next) => current[0] === next[0] && next[1] === 0), tap(([, stepsOffset]) => (stepsOffset ? this._offset.next(0) : 0)), map(([date, stepsOffset, config]) => {
             if (date != null) {
                 const instance = new DateTimeMinuteInstance({
                     date,
@@ -3887,6 +3952,7 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
             }
             return date;
         }), distinctUntilChanged(isSameDateHoursAndMinutes), shareReplay(1));
+        this.presets$ = this._presets.pipe(switchMapMaybeObs(), map((x) => x.map(dateTimePreset)), shareReplay(1));
     }
     get dateLabel() {
         return this.props.dateLabel ?? 'Date';
@@ -3939,16 +4005,17 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
     get showTimezone() {
         return this.field.props.showTimezone ?? true;
     }
-    get allowChangeTimezone() {
-        return false; // unused
+    get presets() {
+        return this.field.props.presets;
     }
     ngOnInit() {
         this._formControlObs.next(this.formControl);
-        this._config.next(this.dateTimeField.getConfigObs?.());
+        const inputPickerConfig = this.dateTimeField.getConfigObs || this.dateTimeField.pickerConfig;
+        this._config.next(inputPickerConfig ? asObservableFromGetter(inputPickerConfig) : undefined);
         this._syncConfigObs.next(this.dateTimeField.getSyncFieldsObs?.());
         this._sub.subscription = this.valueInSystemTimezone$
-            .pipe(combineLatestWith(this.timezoneInstance$.pipe(map((timezoneInstance) => dbxDateTimeOutputValueFactory(this.valueMode, timezoneInstance)))), throttleTime(TIME_OUTPUT_THROTTLE_TIME, undefined, { leading: false, trailing: true }), switchMap(([currentValue, valueFactory]) => {
-            return this.timeOutput$.pipe(throttleTime(TIME_OUTPUT_THROTTLE_TIME * 2, undefined, { leading: false, trailing: true }), skipFirstMaybe(), distinctUntilChanged(isSameDateHoursAndMinutes), map((x) => valueFactory(x)), filter((x) => !isSameDateTimeFieldValue(x, currentValue)));
+            .pipe(combineLatestWith(this.timezoneInstance$.pipe(map((timezoneInstance) => dbxDateTimeOutputValueFactory(this.valueMode, timezoneInstance)))), throttleTime(TIME_OUTPUT_THROTTLE_TIME$1, undefined, { leading: false, trailing: true }), switchMap(([currentValue, valueFactory]) => {
+            return this.timeOutput$.pipe(throttleTime(TIME_OUTPUT_THROTTLE_TIME$1 * 2, undefined, { leading: false, trailing: true }), skipFirstMaybe(), distinctUntilChanged(isSameDateHoursAndMinutes), map((x) => valueFactory(x)), filter((x) => !dbxDateTimeIsSameDateTimeFieldValue(x, currentValue)));
         }))
             .subscribe((value) => {
             this.formControl.setValue(value);
@@ -4002,19 +4069,34 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
                 this.addTime();
                 break;
         }
+        if (this.presets != null) {
+            this._presets.next(asObservableFromGetter(this.presets));
+        }
+        else {
+            this._presets.next(this.dbxDateTimeFieldConfigService.configurations$);
+        }
     }
     ngOnDestroy() {
         super.ngOnDestroy();
+        this._sub.destroy();
+        this._valueSub.destroy();
+        this._config.complete();
         this._defaultTimezone.complete();
-        this._customTimezone.complete();
+        this._presets.complete();
         this._fullDayControlObs.complete();
         this._offset.complete();
         this._formControlObs.complete();
-        this._config.complete();
         this._updateTime.complete();
         this._syncConfigObs.complete();
-        this._sub.destroy();
-        this._valueSub.destroy();
+    }
+    selectPreset(preset) {
+        const value = preset.value();
+        if (value.logicalDate) {
+            this.setLogicalTime(value.logicalDate);
+        }
+        else if (value.timeString) {
+            this.setTime(value.timeString);
+        }
     }
     datePicked(event) {
         const date = event.value;
@@ -4111,17 +4193,449 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
         });
     }
 }
-DbxDateTimeFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxDateTimeFieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-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    <!-- Additional spacing -->\n    <dbx-button-spacer *ngIf=\"!dateOnly\"></dbx-button-spacer>\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 *ngIf=\"showAddTime$ | async\" class=\"add-time-button-wrapper\">\n      <button mat-button class=\"dbx-button-spacer 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' }} {{ timezoneAbbreviation$ | async }} ({{ displayValue$ | async | dateDistance }})\n      </small>\n      <small *ngSwitchCase=\"false\">\n        <ng-container *ngIf=\"displayValue$ | async\">\n          <b class=\"dbx-ok\">{{ atTimeLabel }}</b>\n          {{ displayValue$ | async | date: 'medium' }} {{ timezoneAbbreviation$ | async }} ({{ 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 class=\"dbx-button-spacer\" *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\" [ngClass]=\"{ 'dbx-datetime-row-field-full-width': hideDatePicker }\">\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    <span matSuffix *ngIf=\"!(showTimeInput$ | async)\">\n      <ng-container *ngTemplateOutlet=\"timezoneSuffixTemplate\"></ng-container>\n    </span>\n  </mat-form-field>\n</ng-template>\n\n<!-- Time Menu/Input Template -->\n<ng-template #timeMenuAndInputTemplate>\n  <button class=\"dbx-button-spacer\" 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    <span matSuffix>\n      <ng-container *ngTemplateOutlet=\"timezoneSuffixTemplate\"></ng-container>\n    </span>\n  </mat-form-field>\n</ng-template>\n\n<!-- Timezone Suffix -->\n<ng-template #timezoneSuffixTemplate>\n  <span *ngIf=\"showTimezone\" class=\"dbx-datetime-timezone dbx-faint\">{{ timezoneAbbreviation$ | async }}</span>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i3$4.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$3.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.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i2$1.DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { 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: i8.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i9.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.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: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.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$2.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$2.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.DateDistancePipe, name: "dateDistance" }, { kind: "pipe", type: i2.TimeDistancePipe, name: "timeDistance" }] });
+DbxDateTimeFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxDateTimeFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DbxDateTimeFieldMenuPresetsService }], target: i0.ɵɵFactoryTarget.Component });
+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    <!-- Additional spacing -->\n    <dbx-button-spacer *ngIf=\"!dateOnly\"></dbx-button-spacer>\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 *ngIf=\"showAddTime$ | async\" class=\"add-time-button-wrapper\">\n      <button mat-button class=\"dbx-button-spacer 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' }} {{ timezoneAbbreviation$ | async }} ({{ displayValue$ | async | dateDistance }})\n      </small>\n      <small *ngSwitchCase=\"false\">\n        <ng-container *ngIf=\"displayValue$ | async\">\n          <b class=\"dbx-ok\">{{ atTimeLabel }}</b>\n          {{ displayValue$ | async | date: 'medium' }} {{ timezoneAbbreviation$ | async }} ({{ 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 class=\"dbx-button-spacer\" *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\" [ngClass]=\"{ 'dbx-datetime-row-field-full-width': hideDatePicker }\">\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    <span matSuffix *ngIf=\"!(showTimeInput$ | async)\">\n      <ng-container *ngTemplateOutlet=\"timezoneSuffixTemplate\"></ng-container>\n    </span>\n  </mat-form-field>\n</ng-template>\n\n<!-- Time Menu/Input Template -->\n<ng-template #timeMenuAndInputTemplate>\n  <button class=\"dbx-button-spacer\" 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    <ng-container *ngFor=\"let preset of presets$ | async\">\n      <button mat-menu-item (click)=\"selectPreset(preset)\">{{ preset.label | getValue }}</button>\n    </ng-container>\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    <span matSuffix>\n      <ng-container *ngTemplateOutlet=\"timezoneSuffixTemplate\"></ng-container>\n    </span>\n  </mat-form-field>\n</ng-template>\n\n<!-- Timezone Suffix -->\n<ng-template #timezoneSuffixTemplate>\n  <span *ngIf=\"showTimezone\" class=\"dbx-datetime-timezone dbx-faint\">{{ timezoneAbbreviation$ | async }}</span>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: i4$7.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$7.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$3.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.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i2$1.DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { 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: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.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: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.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$2.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$2.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.DateDistancePipe, name: "dateDistance" }, { kind: "pipe", type: i2.TimeDistancePipe, name: "timeDistance" }, { kind: "pipe", type: i2.GetValuePipe, name: "getValue" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxDateTimeFieldComponent, decorators: [{
             type: Component,
-            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    <!-- Additional spacing -->\n    <dbx-button-spacer *ngIf=\"!dateOnly\"></dbx-button-spacer>\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 *ngIf=\"showAddTime$ | async\" class=\"add-time-button-wrapper\">\n      <button mat-button class=\"dbx-button-spacer 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' }} {{ timezoneAbbreviation$ | async }} ({{ displayValue$ | async | dateDistance }})\n      </small>\n      <small *ngSwitchCase=\"false\">\n        <ng-container *ngIf=\"displayValue$ | async\">\n          <b class=\"dbx-ok\">{{ atTimeLabel }}</b>\n          {{ displayValue$ | async | date: 'medium' }} {{ timezoneAbbreviation$ | async }} ({{ 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 class=\"dbx-button-spacer\" *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\" [ngClass]=\"{ 'dbx-datetime-row-field-full-width': hideDatePicker }\">\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    <span matSuffix *ngIf=\"!(showTimeInput$ | async)\">\n      <ng-container *ngTemplateOutlet=\"timezoneSuffixTemplate\"></ng-container>\n    </span>\n  </mat-form-field>\n</ng-template>\n\n<!-- Time Menu/Input Template -->\n<ng-template #timeMenuAndInputTemplate>\n  <button class=\"dbx-button-spacer\" 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    <span matSuffix>\n      <ng-container *ngTemplateOutlet=\"timezoneSuffixTemplate\"></ng-container>\n    </span>\n  </mat-form-field>\n</ng-template>\n\n<!-- Timezone Suffix -->\n<ng-template #timezoneSuffixTemplate>\n  <span *ngIf=\"showTimezone\" class=\"dbx-datetime-timezone dbx-faint\">{{ timezoneAbbreviation$ | async }}</span>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
+            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    <!-- Additional spacing -->\n    <dbx-button-spacer *ngIf=\"!dateOnly\"></dbx-button-spacer>\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 *ngIf=\"showAddTime$ | async\" class=\"add-time-button-wrapper\">\n      <button mat-button class=\"dbx-button-spacer 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' }} {{ timezoneAbbreviation$ | async }} ({{ displayValue$ | async | dateDistance }})\n      </small>\n      <small *ngSwitchCase=\"false\">\n        <ng-container *ngIf=\"displayValue$ | async\">\n          <b class=\"dbx-ok\">{{ atTimeLabel }}</b>\n          {{ displayValue$ | async | date: 'medium' }} {{ timezoneAbbreviation$ | async }} ({{ 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 class=\"dbx-button-spacer\" *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\" [ngClass]=\"{ 'dbx-datetime-row-field-full-width': hideDatePicker }\">\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    <span matSuffix *ngIf=\"!(showTimeInput$ | async)\">\n      <ng-container *ngTemplateOutlet=\"timezoneSuffixTemplate\"></ng-container>\n    </span>\n  </mat-form-field>\n</ng-template>\n\n<!-- Time Menu/Input Template -->\n<ng-template #timeMenuAndInputTemplate>\n  <button class=\"dbx-button-spacer\" 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    <ng-container *ngFor=\"let preset of presets$ | async\">\n      <button mat-menu-item (click)=\"selectPreset(preset)\">{{ preset.label | getValue }}</button>\n    </ng-container>\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    <span matSuffix>\n      <ng-container *ngTemplateOutlet=\"timezoneSuffixTemplate\"></ng-container>\n    </span>\n  </mat-form-field>\n</ng-template>\n\n<!-- Timezone Suffix -->\n<ng-template #timezoneSuffixTemplate>\n  <span *ngIf=\"showTimezone\" class=\"dbx-datetime-timezone dbx-faint\">{{ timezoneAbbreviation$ | async }}</span>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: DbxDateTimeFieldMenuPresetsService }]; } });
+
+function dbxFixedDateRangeInputValueFactory(mode, timezoneInstance) {
+    const dateInputTransformer = dbxDateTimeInputValueParseFactory(mode, timezoneInstance);
+    return (y) => {
+        let result;
+        if (y) {
+            result = {
+                start: dateInputTransformer(y.start),
+                end: dateInputTransformer(y.end)
+            };
+        }
+        return result;
+    };
+}
+function dbxFixedDateRangeOutputValueFactory(mode, timezoneInstance) {
+    const dateOutputTransformer = dbxDateTimeOutputValueFactory(mode, timezoneInstance);
+    return (y) => {
+        let result;
+        if (y) {
+            result = {
+                start: dateOutputTransformer(y.start),
+                end: dateOutputTransformer(y.end)
+            };
+        }
+        return result;
+    };
+}
+const TIME_OUTPUT_THROTTLE_TIME = 10;
+class DbxFixedDateRangeFieldComponent extends FieldType$1 {
+    constructor(dbxDateTimeFieldConfigService) {
+        super();
+        this.dbxDateTimeFieldConfigService = dbxDateTimeFieldConfigService;
+        this._sub = new SubscriptionObject();
+        this._inputRangeFormSub = new SubscriptionObject();
+        this._inputRangeFormValueSub = new SubscriptionObject();
+        this._dateRangeInputSub = new SubscriptionObject();
+        this._currentSelectionModeSub = new SubscriptionObject();
+        this._latestBoundarySub = new SubscriptionObject();
+        this._disableEndSub = new SubscriptionObject();
+        this._activeDateSub = new SubscriptionObject();
+        this._currentDateRangeInput = {};
+        this._currentSelectionMode = 'single';
+        this._latestBoundary = null;
+        this._config = new BehaviorSubject(undefined);
+        this._selectionMode = new BehaviorSubject(undefined);
+        this._dateRangeInput = new BehaviorSubject(undefined);
+        this._timezone = new BehaviorSubject(undefined);
+        this._presets = new BehaviorSubject(of([]));
+        this._selectedDateRange = new Subject();
+        this._formControlObs = new BehaviorSubject(undefined);
+        this.formControl$ = this._formControlObs.pipe(filterMaybe());
+        this.config$ = this._config.pipe(filterMaybe(), switchMap((x) => x), distinctUntilChanged(), shareReplay(1));
+        this.limitDateTimeInstance$ = this.config$.pipe(map(limitDateTimeInstance), shareReplay(1));
+        this.selectionMode$ = this._selectionMode.pipe(switchMapMaybeDefault('single'), map((x) => x ?? 'single'), distinctUntilChanged(), shareReplay(1));
+        this.dateRangeInput$ = this._dateRangeInput.pipe(switchMapMaybeDefault(), shareReplay(1));
+        this.timezone$ = this._timezone.pipe(switchMapMaybeDefault(), distinctUntilChanged()).pipe(map((defaultTimezone) => {
+            return defaultTimezone ?? guessCurrentTimezone();
+        }), distinctUntilChanged(), shareReplay(1));
+        this.timezoneInstance$ = this.timezone$.pipe(map((timezone) => (timezone ? dateTimezoneUtcNormal({ timezone }) : undefined)), shareReplay(1));
+        this.valueInSystemTimezone$ = this.formControl$.pipe(map((control) => control.valueChanges.pipe(startWith(control.value), shareReplay(1))), combineLatestWith(this.timezoneInstance$), switchMap(([x, timezoneInstance]) => {
+            return x.pipe(map(dbxFixedDateRangeInputValueFactory(this.valueMode, timezoneInstance)));
+        }), throttleTime(20, undefined, { leading: false, trailing: true }), // throttle incoming values and timezone changes
+        distinctUntilChanged(isSameDateDayRange), shareReplay(1));
+        this.startDate$ = this.valueInSystemTimezone$.pipe(map((x) => x?.start ?? null), distinctUntilChanged(), filterMaybe(), shareReplay(1));
+        this.fullBoundary$ = this.dateRangeSelectionForMode('single').pipe(shareReplay(1));
+        this.latestBoundary$ = this.selectionMode$.pipe(switchMap((mode) => {
+            if (mode === 'arbitrary_quick') {
+                // in arbitrary_quick mode, the latest value is the boundary, since we always set the value immediately.
+                return this.valueInSystemTimezone$;
+            }
+            else {
+                return this.fullBoundary$;
+            }
+        }));
+        this.dateRangeSelection$ = this.selectionMode$.pipe(switchMap((mode) => this.dateRangeSelectionForMode(mode)));
+        this.calendarSelection$ = this.valueInSystemTimezone$.pipe(map((x) => (x ? new DateRange(x.start, x.end) : null)), shareReplay(1));
+        this.endDisabled$ = this.selectionMode$.pipe(map((x) => x === 'single'), distinctUntilChanged(), shareReplay(1));
+        this.inputRangeForm = new FormGroup({
+            start: new FormControl(null),
+            end: new FormControl(null)
+        });
+        this.minMaxRange$ = this.limitDateTimeInstance$.pipe(combineLatestWith(timer(MS_IN_MINUTE)), // refresh every minute
+        map(([x]) => x.dateRange()), distinctUntilChanged(isSameDateDayRange), shareReplay(1));
+        this.min$ = this.minMaxRange$.pipe(map((x) => x?.start ?? null), distinctUntilChanged(), shareReplay(1));
+        this.max$ = this.minMaxRange$.pipe(map((x) => x?.end ?? null), distinctUntilChanged(), shareReplay(1));
+        this.pickerFilter$ = this.config$.pipe(distinctUntilChanged(), map((x) => {
+            if (x) {
+                const filter = dateTimeMinuteDecisionFunction(x);
+                return (x) => (x != null ? filter(x) : true);
+            }
+            else {
+                return () => true;
+            }
+        }), shareReplay(1));
+        this.defaultPickerFilter = () => true;
+    }
+    get currentDateRangeInput() {
+        return this._currentDateRangeInput;
+    }
+    get currentSelectionMode() {
+        return this._currentSelectionMode;
+    }
+    get latestBoundary() {
+        return this._latestBoundary;
+    }
+    dateRangeSelectionForMode(mode) {
+        const result = combineLatest([this.dateRangeInput$, this.limitDateTimeInstance$]).pipe(switchMap(([dateRangeInput, limitInstance]) => {
+            const minMaxClamp = (dateRange) => limitInstance.clampDateRange(dateRange);
+            if (mode === 'single') {
+                // only use the start date.
+                return this._selectedDateRange.pipe(distinctUntilChanged(isSameDateDayRange), map((inputDateRange) => {
+                    const date = inputDateRange?.start;
+                    return date ? minMaxClamp(dateRange({ ...dateRangeInput, date })) : null;
+                }));
+            }
+            else {
+                // take the first date, then wait unless the date is outside of the range.
+                return this._selectedDateRange.pipe(scan((acc, nextDateRange) => {
+                    let result;
+                    if (nextDateRange && nextDateRange.start != null) {
+                        const { start: startOrNextDate, end } = nextDateRange;
+                        const potentialBoundary = dateRange({ ...dateRangeInput, date: startOrNextDate });
+                        // only comes through when passed by the text inputs
+                        if (startOrNextDate && end) {
+                            const range = clampDateRangeToDateRange(nextDateRange, potentialBoundary);
+                            result = {
+                                lastDateRange: nextDateRange,
+                                boundary: range,
+                                range
+                            };
+                        }
+                        else {
+                            let range = undefined;
+                            let boundary = potentialBoundary;
+                            if (acc.boundary && isDateInDateRange(startOrNextDate, acc.boundary)) {
+                                // if in the date range, uses the pick as the last date.
+                                range = {
+                                    start: acc.boundary.start,
+                                    end: startOrNextDate
+                                };
+                                if (mode === 'arbitrary_quick') {
+                                    // modify boundary to match range
+                                    if (isSameDateRange(acc.range, range) && isSameDateDay(range.end, startOrNextDate)) {
+                                        // if we clicked on the end range, then expand the boundary again to the full range.
+                                        range = dateRange({ ...dateRangeInput, date: range.start });
+                                        boundary = range;
+                                    }
+                                    else {
+                                        boundary = range;
+                                    }
+                                }
+                                else {
+                                    boundary = acc.boundary;
+                                }
+                            }
+                            else if (mode === 'arbitrary_quick') {
+                                range = potentialBoundary;
+                            }
+                            result = {
+                                lastDateRange: nextDateRange,
+                                boundary,
+                                range
+                            };
+                        }
+                    }
+                    else {
+                        result = {
+                            lastDateRange: nextDateRange
+                        };
+                    }
+                    if (result) {
+                        result = {
+                            lastDateRange: result.lastDateRange,
+                            boundary: result.boundary ? minMaxClamp(result.boundary) : undefined,
+                            range: result.range ? minMaxClamp(result.range) : undefined
+                        };
+                    }
+                    return result;
+                }, {}), filter((x) => !x.lastDateRange || x.range != null), // pass through null/date clearings or ranges
+                map((x) => x.range ?? null) // return the range
+                );
+            }
+        }));
+        return result;
+    }
+    get fixedDateRangeField() {
+        return this.field.props;
+    }
+    get selectionMode() {
+        return this.field.props.selectionMode;
+    }
+    get valueMode() {
+        return this.field.props.valueMode ?? DbxDateTimeValueMode.DATE;
+    }
+    get description() {
+        return this.field.props.description;
+    }
+    get timezone() {
+        return this.field.props.timezone;
+    }
+    get showTimezone() {
+        return this.field.props.showTimezone ?? true;
+    }
+    get presets() {
+        return this.field.props.presets;
+    }
+    get showRangeInput() {
+        return this.field.props.showRangeInput ?? true;
+    }
+    ngOnInit() {
+        this._formControlObs.next(this.formControl);
+        const dateRangeSelection = this.dateRangeSelection$.pipe(shareReplay(1));
+        const setInputFormValue = (value) => {
+            if (!isSameDateDayRange(value, this.inputRangeForm.value)) {
+                this.inputRangeForm.setValue({
+                    start: value?.start ?? null,
+                    end: value?.end ?? null
+                });
+            }
+        };
+        this._sub.subscription = this.valueInSystemTimezone$
+            .pipe(combineLatestWith(this.timezoneInstance$.pipe(map((timezoneInstance) => dbxFixedDateRangeOutputValueFactory(this.valueMode, timezoneInstance)))), throttleTime(TIME_OUTPUT_THROTTLE_TIME, undefined, { leading: false, trailing: true }), switchMap(([currentValue, valueFactory]) => {
+            return dateRangeSelection.pipe(skipFirstMaybe(), distinctUntilChanged(isSameDateDayRange), map((x) => [x, currentValue, valueFactory]));
+        }))
+            .subscribe(([rawValue, currentValue, valueFactory]) => {
+            const value = rawValue ? valueFactory(rawValue) : null;
+            const isSameRange = dbxDateRangeIsSameDateRangeFieldValue(value, currentValue);
+            if (!isSameRange) {
+                this.formControl.setValue(value);
+                this.formControl.markAsDirty();
+                this.formControl.markAsTouched();
+            }
+            else if (rawValue != null) {
+                // update the input text again
+                setInputFormValue(rawValue);
+            }
+        });
+        if (this.selectionMode) {
+            this._selectionMode.next(asObservableFromGetter(this.selectionMode));
+        }
+        this._currentSelectionModeSub.subscription = this.selectionMode$.subscribe((x) => (this._currentSelectionMode = x));
+        this._dateRangeInputSub.subscription = this.dateRangeInput$.subscribe((x) => (this._currentDateRangeInput = x));
+        this._inputRangeFormSub.subscription = this.valueInSystemTimezone$.subscribe((x) => {
+            setInputFormValue(x);
+        });
+        if (this.showRangeInput) {
+            this._inputRangeFormValueSub.subscription = this.valueInSystemTimezone$
+                .pipe(throttleTime(100), // throttle to prevent the value from changing too fast
+            switchMap(() => {
+                return this.inputRangeForm.valueChanges.pipe(debounceTime(500), filter(() => {
+                    const startString = this.startDateInputElement.nativeElement?.value;
+                    let valid = isMonthDaySlashDate(startString);
+                    if (valid && this._currentSelectionMode !== 'single') {
+                        const endString = this.endDateInputElement.nativeElement?.value;
+                        valid = isMonthDaySlashDate(endString);
+                    }
+                    return valid; // must be a valid text input
+                }), map((x) => x));
+            }), distinctUntilChanged(isSameDateRange))
+                .subscribe((x) => {
+                if (this._currentSelectionMode === 'single') {
+                    this.setDateRange(x?.start ? { start: x.start } : null);
+                }
+                else {
+                    let rangeToSet = x;
+                    if (this._currentSelectionMode === 'arbitrary_quick' && this._latestBoundary && x?.start && x?.end) {
+                        if (!isDateInDateRange(x.start, this._latestBoundary)) {
+                            // if the end date it outside of the current range (i.e. a range was typed in only to the start date) then set the end to the boundary end
+                            const boundary = dateRange({ ...this._currentDateRangeInput, date: x.start });
+                            rangeToSet = { start: x.start, end: boundary.end };
+                        }
+                    }
+                    this.setDateRange(rangeToSet);
+                }
+            });
+        }
+        this._latestBoundarySub.subscription = this.latestBoundary$.subscribe((x) => (this._latestBoundary = x));
+        this._dateRangeInput.next(asObservableFromGetter(this.fixedDateRangeField.dateRangeInput));
+        this._disableEndSub.subscription = this.endDisabled$.subscribe((disabled) => {
+            const end = this.inputRangeForm.get('end');
+            if (end) {
+                if (disabled) {
+                    end.disable();
+                }
+                else {
+                    end.enable();
+                }
+            }
+        });
+        const inputPickerConfig = this.fixedDateRangeField.pickerConfig;
+        this._config.next(inputPickerConfig ? asObservableFromGetter(inputPickerConfig) : undefined);
+        // Set default timezone if provided.
+        if (this.timezone && !this.fixedDateRangeField.fullDayInUTC) {
+            this._timezone.next(asObservableFromGetter(this.timezone));
+        }
+        // Watch for disabled changes so we can propogate them properly.
+        this.formControl.registerOnDisabledChange((disabled) => {
+            if (disabled) {
+                this.inputRangeForm.disable();
+            }
+            else {
+                this.inputRangeForm.enable();
+                this.endDisabled$.pipe(first()).subscribe((disabled) => {
+                    const end = this.inputRangeForm.get('end');
+                    if (end) {
+                        if (disabled) {
+                            end.disable();
+                        }
+                        else {
+                            end.enable();
+                        }
+                    }
+                });
+            }
+        });
+        if (this.presets != null) {
+            this._presets.next(asObservableFromGetter(this.presets));
+        }
+        else {
+            this._presets.next(this.dbxDateTimeFieldConfigService.configurations$);
+        }
+        this._activeDateSub.subscription = this.startDate$.subscribe((x) => {
+            this.calendar.activeDate = x;
+        });
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._sub.destroy();
+        this._inputRangeFormSub.destroy();
+        this._inputRangeFormValueSub.destroy();
+        this._dateRangeInputSub.destroy();
+        this._currentSelectionModeSub.destroy();
+        this._latestBoundarySub.destroy();
+        this._disableEndSub.destroy();
+        this._activeDateSub.destroy();
+        this._config.complete();
+        this._selectionMode.complete();
+        this._dateRangeInput.complete();
+        this._timezone.complete();
+        this._presets.complete();
+        this._selectedDateRange.complete();
+        this._formControlObs.complete();
+    }
+    selectedChange(date) {
+        this.setDateRange(date ? { start: date } : null);
+    }
+    setDateRange(dateRange) {
+        this._selectedDateRange.next(dateRange);
+    }
+    _createDateRange(date) {
+        return date ? dateRange({ ...this._currentDateRangeInput, date }) : undefined;
+    }
+}
+DbxFixedDateRangeFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFixedDateRangeFieldComponent, deps: [{ token: DbxDateTimeFieldMenuPresetsService }], target: i0.ɵɵFactoryTarget.Component });
+DbxFixedDateRangeFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxFixedDateRangeFieldComponent, selector: "ng-component", providers: [
+        {
+            provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
+            useClass: forwardRef(() => DbxFixedDateRangeFieldSelectionStrategy)
+        }
+    ], viewQueries: [{ propertyName: "calendar", first: true, predicate: MatCalendar, descendants: true }, { propertyName: "startDateInputElement", first: true, predicate: ["startDateInput"], descendants: true, read: ElementRef }, { propertyName: "endDateInputElement", first: true, predicate: ["endDateInput"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-fixeddaterange-field\">\n  <mat-calendar #calendarView [selected]=\"calendarSelection$ | async\" [dateFilter]=\"(pickerFilter$ | async) || defaultPickerFilter\" [minDate]=\"min$ | async\" [maxDate]=\"max$ | async\" (selectedChange)=\"selectedChange($event)\"></mat-calendar>\n  <mat-form-field class=\"dbx-fixeddaterange-field-input\" appearance=\"fill\">\n    <mat-date-range-input *ngIf=\"showRangeInput\" [formGroup]=\"inputRangeForm\">\n      <input #startDateInput matStartDate formControlName=\"start\" placeholder=\"Start date\" />\n      <input #endDateInput [ngClass]=\"(endDisabled$ | async) ? 'dbx-fixeddaterange-field-input-end' : ''\" [attr.tabindex]=\"(endDisabled$ | async) ? -1 : 0\" matEndDate formControlName=\"end\" placeholder=\"End date\" />\n    </mat-date-range-input>\n  </mat-form-field>\n  <mat-error *ngIf=\"formControl.hasError('required')\">Date range is required</mat-error>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$7.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$7.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5$1.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection"], exportAs: ["matCalendar"] }, { kind: "component", type: i5$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i5$1.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i5$1.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFixedDateRangeFieldComponent, decorators: [{
+            type: Component,
+            args: [{ providers: [
+                        {
+                            provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
+                            useClass: forwardRef(() => DbxFixedDateRangeFieldSelectionStrategy)
+                        }
+                    ], template: "<div class=\"dbx-fixeddaterange-field\">\n  <mat-calendar #calendarView [selected]=\"calendarSelection$ | async\" [dateFilter]=\"(pickerFilter$ | async) || defaultPickerFilter\" [minDate]=\"min$ | async\" [maxDate]=\"max$ | async\" (selectedChange)=\"selectedChange($event)\"></mat-calendar>\n  <mat-form-field class=\"dbx-fixeddaterange-field-input\" appearance=\"fill\">\n    <mat-date-range-input *ngIf=\"showRangeInput\" [formGroup]=\"inputRangeForm\">\n      <input #startDateInput matStartDate formControlName=\"start\" placeholder=\"Start date\" />\n      <input #endDateInput [ngClass]=\"(endDisabled$ | async) ? 'dbx-fixeddaterange-field-input-end' : ''\" [attr.tabindex]=\"(endDisabled$ | async) ? -1 : 0\" matEndDate formControlName=\"end\" placeholder=\"End date\" />\n    </mat-date-range-input>\n  </mat-form-field>\n  <mat-error *ngIf=\"formControl.hasError('required')\">Date range is required</mat-error>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: DbxDateTimeFieldMenuPresetsService }]; }, propDecorators: { calendar: [{
+                type: ViewChild,
+                args: [MatCalendar]
+            }], startDateInputElement: [{
+                type: ViewChild,
+                args: ['startDateInput', { read: ElementRef }]
+            }], endDateInputElement: [{
+                type: ViewChild,
+                args: ['endDateInput', { read: ElementRef }]
+            }] } });
+class DbxFixedDateRangeFieldSelectionStrategy {
+    constructor(_dateAdapter, dbxFixedDateRangeFieldComponent) {
+        this._dateAdapter = _dateAdapter;
+        this.dbxFixedDateRangeFieldComponent = dbxFixedDateRangeFieldComponent;
+    }
+    selectionFinished(date, currentRange, event) {
+        // unused
+        return currentRange;
+    }
+    createPreview(activeDate, currentRange, event) {
+        if (activeDate != null && this.dbxFixedDateRangeFieldComponent.currentSelectionMode !== 'single') {
+            const latestBoundary = this.dbxFixedDateRangeFieldComponent.latestBoundary;
+            const date = this.dateFromAdapterDate(activeDate);
+            if (latestBoundary && isDateInDateRange(date, latestBoundary)) {
+                const exampleDateRange = this._createDateRange(latestBoundary);
+                return exampleDateRange;
+            }
+        }
+        return this._createDateRangeWithDate(activeDate);
+    }
+    _createDateRangeWithDate(input) {
+        let dateRange;
+        if (input) {
+            const date = this.dateFromAdapterDate(input);
+            dateRange = this.dbxFixedDateRangeFieldComponent._createDateRange(date);
+        }
+        return this._createDateRange(dateRange);
+    }
+    _createDateRange(input) {
+        if (input) {
+            return new DateRange(this.adapterDateFromDate(input.start), this.adapterDateFromDate(input.end));
+        }
+        else {
+            return new DateRange(null, null);
+        }
+    }
+    dateFromAdapterDate(input) {
+        const day = this._dateAdapter.getDate(input);
+        const monthIndex = this._dateAdapter.getMonth(input);
+        const year = this._dateAdapter.getYear(input);
+        return new Date(year, monthIndex, day);
+    }
+    adapterDateFromDate(date) {
+        const day = date.getDate();
+        const monthIndex = date.getMonth();
+        const year = date.getFullYear();
+        return this._dateAdapter.createDate(year, monthIndex, day);
+    }
+}
+DbxFixedDateRangeFieldSelectionStrategy.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFixedDateRangeFieldSelectionStrategy, deps: [{ token: i4$1.DateAdapter }, { token: DbxFixedDateRangeFieldComponent }], target: i0.ɵɵFactoryTarget.Injectable });
+DbxFixedDateRangeFieldSelectionStrategy.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFixedDateRangeFieldSelectionStrategy });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFixedDateRangeFieldSelectionStrategy, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i4$1.DateAdapter }, { type: DbxFixedDateRangeFieldComponent }]; } });
 
 class DbxFormFormlyDateFieldModule {
 }
 DbxFormFormlyDateFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyDateFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyDateFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyDateFieldModule, declarations: [DbxDateTimeFieldComponent], imports: [CommonModule,
+DbxFormFormlyDateFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyDateFieldModule, declarations: [DbxDateTimeFieldComponent, DbxFixedDateRangeFieldComponent], imports: [CommonModule,
         FormsModule,
         MatInputModule,
         MatDividerModule,
@@ -4133,6 +4647,7 @@ DbxFormFormlyDateFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.
         MatMenuModule,
         ReactiveFormsModule,
         DbxDatePipeModule,
+        DbxValuePipeModule,
         MatChipsModule,
         MatIconModule,
         FlexLayoutModule, i1$2.FormlyModule], exports: [DbxFormFormlyWrapperModule] });
@@ -4148,11 +4663,16 @@ DbxFormFormlyDateFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.
         MatMenuModule,
         ReactiveFormsModule,
         DbxDatePipeModule,
+        DbxValuePipeModule,
         MatChipsModule,
         MatIconModule,
         FlexLayoutModule,
         FormlyModule.forChild({
-            types: [{ name: 'datetime', component: DbxDateTimeFieldComponent, wrappers: ['style', 'form-field'] }]
+            types: [
+                //
+                { name: 'datetime', component: DbxDateTimeFieldComponent, wrappers: ['style', 'form-field'] },
+                { name: 'fixeddaterange', component: DbxFixedDateRangeFieldComponent, wrappers: ['style', 'form-field'] }
+            ]
         }), DbxFormFormlyWrapperModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyDateFieldModule, decorators: [{
             type: NgModule,
@@ -4170,14 +4690,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         MatMenuModule,
                         ReactiveFormsModule,
                         DbxDatePipeModule,
+                        DbxValuePipeModule,
                         MatChipsModule,
                         MatIconModule,
                         FlexLayoutModule,
                         FormlyModule.forChild({
-                            types: [{ name: 'datetime', component: DbxDateTimeFieldComponent, wrappers: ['style', 'form-field'] }]
+                            types: [
+                                //
+                                { name: 'datetime', component: DbxDateTimeFieldComponent, wrappers: ['style', 'form-field'] },
+                                { name: 'fixeddaterange', component: DbxFixedDateRangeFieldComponent, wrappers: ['style', 'form-field'] }
+                            ]
                         })
                     ],
-                    declarations: [DbxDateTimeFieldComponent],
+                    declarations: [DbxDateTimeFieldComponent, DbxFixedDateRangeFieldComponent],
                     exports: [DbxFormFormlyWrapperModule]
                 }]
         }] });
@@ -4197,7 +4722,7 @@ function timeOnlyField(config = {}) {
     });
 }
 function dateTimeField(config = {}) {
-    const { key = 'date', dateLabel, timeLabel, allDayLabel, atTimeLabel, timezone, showTimezone, timeMode = DbxDateTimeFieldTimeMode.REQUIRED, valueMode, fullDayInUTC, fullDayFieldName, getConfigObs, getSyncFieldsObs, hideDatePicker, hideDateHint, timeOnly = false, materialFormField } = config;
+    const { key = 'date', dateLabel, timeLabel, allDayLabel, atTimeLabel, timezone, showTimezone, timeMode = DbxDateTimeFieldTimeMode.REQUIRED, valueMode, fullDayInUTC, fullDayFieldName, pickerConfig, getConfigObs, getSyncFieldsObs, hideDatePicker, hideDateHint, timeOnly = false, presets, materialFormField } = config;
     const fieldConfig = formlyField({
         key,
         type: 'datetime',
@@ -4210,6 +4735,7 @@ function dateTimeField(config = {}) {
             atTimeLabel,
             valueMode,
             timeOnly,
+            presets,
             timeMode: timeOnly ? DbxDateTimeFieldTimeMode.REQUIRED : timeMode,
             timezone,
             showTimezone,
@@ -4217,6 +4743,7 @@ function dateTimeField(config = {}) {
             fullDayInUTC,
             hideDatePicker,
             hideDateHint,
+            pickerConfig,
             getConfigObs,
             getSyncFieldsObs
         })
@@ -4226,7 +4753,7 @@ function dateTimeField(config = {}) {
     });
 }
 function dateRangeField(config = {}) {
-    const { required: inputRequired, start, end, timezone, showTimezone } = config;
+    const { required: inputRequired, start, end, timezone, showTimezone, presets } = config;
     const required = inputRequired ?? start?.required ?? false;
     const startFieldKey = start?.key ?? 'start';
     const endFieldKey = end?.key ?? 'end';
@@ -4234,6 +4761,7 @@ function dateRangeField(config = {}) {
         dateLabel: 'Start',
         timeMode: DbxDateTimeFieldTimeMode.NONE,
         getSyncFieldsObs: () => of([{ syncWith: endFieldKey, syncType: 'after' }]),
+        presets,
         ...start,
         timezone,
         showTimezone,
@@ -4244,6 +4772,7 @@ function dateRangeField(config = {}) {
         dateLabel: 'End',
         timeMode: DbxDateTimeFieldTimeMode.NONE,
         getSyncFieldsObs: () => of([{ syncWith: startFieldKey, syncType: 'before' }]),
+        presets,
         ...end,
         timezone,
         showTimezone,
@@ -4256,7 +4785,7 @@ function dateRangeField(config = {}) {
     };
 }
 function dateTimeRangeField(inputConfig = {}) {
-    const { required = false, start: inputStart, end: inputEnd, timezone, showTimezone } = inputConfig;
+    const { required = false, start: inputStart, end: inputEnd, timezone, showTimezone, presets } = inputConfig;
     function dateTimeRangeFieldConfig(config) {
         return {
             ...config,
@@ -4282,11 +4811,65 @@ function dateTimeRangeField(inputConfig = {}) {
     const config = {
         timezone,
         showTimezone,
+        presets,
         start,
         end
     };
     return dateRangeField(config);
 }
+function fixedDateRangeField(config = {}) {
+    const { key = 'dateRange', dateRangeInput, pickerConfig, timezone, selectionMode, showTimezone, valueMode, fullDayInUTC, presets, showRangeInput, materialFormField } = config;
+    const fieldConfig = formlyField({
+        key,
+        type: 'fixeddaterange',
+        ...propsAndConfigForFieldConfig(config, {
+            ...materialFormField,
+            dateRangeInput,
+            pickerConfig,
+            valueMode,
+            presets,
+            timezone,
+            selectionMode,
+            showTimezone,
+            fullDayInUTC,
+            showRangeInput
+        })
+    });
+    return styleWrapper(fieldConfig, {
+        classGetter: 'dbx-mat-form-field-disable-underline dbx-form-fixed-date-range-field-wrapper'
+    });
+}
+
+const DEFAULT_DATE_TIME_FIELD_MENU_PRESETS_PRESETS = [
+    {
+        label: '6:00AM',
+        timeString: '6:00AM'
+    },
+    {
+        label: '8:00AM',
+        timeString: '8:00AM'
+    },
+    {
+        label: '10:00AM',
+        timeString: '10:00AM'
+    },
+    {
+        label: 'Noon',
+        timeString: '12:00PM'
+    },
+    {
+        label: '2:00PM',
+        timeString: '2:00PM'
+    },
+    {
+        label: '5:00PM',
+        timeString: '5:00PM'
+    },
+    {
+        label: 'Midnight',
+        timeString: '12:00AM'
+    }
+];
 
 function isTruthy() {
     return (control) => {
@@ -5541,5 +6124,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ACTION_FORM_DISABLED_KEY, AUTO_TOUCH_WRAPPER_KEY, AbstractAsyncFormlyFormDirective, AbstractConfigAsyncFormlyFormDirective, AbstractDbxPickableItemFieldDirective, AbstractDbxSearchableFieldDisplayDirective, AbstractDbxSearchableValueFieldDirective, AbstractFormExpandableSectionWrapperDirective, AbstractFormlyFormDirective, AbstractSyncFormlyFormDirective, AutoTouchFieldWrapperComponent, ChecklistItemFieldDataSetBuilder, DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN, DEFAULT_FORM_DISABLED_KEY, DEFAULT_HAS_VALUE_FN, DEFAULT_LAT_LNG_TEXT_FIELD_PATTERN_MESSAGE, DEFAULT_LAT_LNG_TEXT_FIELD_PLACEHOLDER, DEFAULT_PREFERRED_COUNTRIES, DISPLAY_FOR_TIMEZONE_STRING_VALUE, DbxActionFormDirective, DbxActionFormSafetyDirective, DbxChecklistItemContentComponent, DbxChecklistItemFieldComponent, DbxDateTimeFieldComponent, DbxDateTimeFieldTimeMode, DbxDateTimeValueMode, DbxDefaultChecklistItemFieldDisplayComponent, DbxDefaultSearchableFieldDisplayComponent, DbxForm, DbxFormActionModule, DbxFormActionTransitionModule, DbxFormComponentFieldComponent, DbxFormExpandWrapperComponent, DbxFormExtensionModule, DbxFormFlexWrapperComponent, DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyDbxListFieldModule, DbxFormFormlyFieldModule, DbxFormFormlyFormModule, DbxFormFormlyNumberFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySelectionModule, DbxFormFormlySourceSelectModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyTextFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule, DbxFormInfoWrapperComponent, DbxFormIoModule, DbxFormLayoutModule, DbxFormLoadingSourceDirective, DbxFormModule, DbxFormRepeatArrayTypeComponent, DbxFormSearchFormComponent, DbxFormSectionWrapperComponent, DbxFormSourceDirective, DbxFormSourceSelectFieldComponent, DbxFormSpacerComponent, DbxFormState, DbxFormSubsectionWrapperComponent, DbxFormToggleWrapperComponent, DbxFormValueChangesDirective, DbxFormWorkingWrapperComponent, DbxFormlyContext, DbxFormlyFieldsContextDirective, DbxFormlyFormComponent, DbxFormlyModule, DbxItemListFieldComponent, DbxMutableForm, DbxPhoneFieldComponent, DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent, DbxSearchableChipFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxSearchableTextFieldComponent, DbxTextEditorFieldComponent, EXPANDABLE_WRAPPER_KEY, FIELD_VALUES_ARE_EQUAL_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_ERROR_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_VALIDATION_KEY, FLEX_WRAPPER_KEY, INFO_WRAPPER_KEY, INVALID_PHONE_NUMBER_MESSAGE, IS_DIVISIBLE_BY_VALIDATION_KEY, LABEL_STRING_MAX_LENGTH, MAX_LENGTH_VALIDATION_MESSAGE, MAX_VALIDATION_MESSAGE, MIN_LENGTH_VALIDATION_MESSAGE, MIN_VALIDATION_MESSAGE, PHONE_LABEL_MAX_LENGTH, REQUIRED_VALIDATION_MESSAGE, SEARCH_STRING_MAX_LENGTH, SECTION_WRAPPER_KEY, STYLE_WRAPPER_KEY, SUBSECTION_WRAPPER_KEY, TAKE_NEXT_UPCOMING_TIME_CONFIG_OBS, TOGGLE_WRAPPER_KEY, WORKING_WRAPPER_KEY, addValueSelectionOptionFunction, addWrapperToFormlyFieldConfig, addressField, addressFormlyFields, addressLineField, addressListField, autoTouchWrapper, checkIsFieldFlexLayoutGroupFieldConfig, checkboxField, checklistItemField, chipTextField, cityField, componentField, countryField, dateRangeField, dateTimeField, dateTimeRangeField, dbxDateTimeInputValueParseFactory, dbxDateTimeOutputValueFactory, dbxFormSearchFormFields, dbxFormSourceObservable, dbxFormSourceObservableFromStream, dbxListField, defaultValidationMessages, disableFormlyFieldAutofillAttributes, dollarAmountField, emailField, expandWrapper, fieldValueIsAvailableValidator, fieldValuesAreEqualValidator, filterPartialPotentialFieldConfigValuesFromObject, filterPickableItemFieldValuesByLabel, filterPickableItemFieldValuesByLabelFilterFunction, flexLayoutWrapper, formlyField, hiddenField, infoWrapper, isDivisibleBy, isDomain, isInRange, isTruthy, latLngTextField, makeMetaFilterSearchableFieldValueDisplayFn, maxLengthValidationMessage, maxValidationMessage, mergePropsValueObjects, minLengthValidationMessage, minValidationMessage, nameField, numberField, numberFieldTransformParser, partialPotentialFieldConfigKeys, partialPotentialFieldConfigKeysFilter, phoneAndLabelSectionField, phoneField, phoneListField, pickableItemChipField, pickableItemListField, pickableValueFieldValuesConfigForStaticLabeledValues, propsAndConfigForFieldConfig, propsForFieldConfig, propsValueForFieldConfig, provideDbxForm, provideDbxMutableForm, provideFormlyContext, repeatArrayField, searchableChipField, searchableStringChipField, searchableTextField, sectionWrapper, sortPickableItemsByLabel, sortPickableItemsByLabelStringFunction, sourceSelectField, stateField, styleWrapper, subsectionWrapper, syncConfigValueObs, textAreaField, textEditorField, textField, textFieldTransformParser, textIsAvailableField, textPasswordField, textPasswordWithVerifyFieldGroup, textVerifyPasswordField, timeOnlyField, timezoneStringField, timezoneStringSearchFunction, toggleField, toggleWrapper, usernamePasswordLoginFields, validatorsForFieldConfig, valueSelectionField, workingWrapper, wrappedPhoneAndLabelField, zipCodeField };
+export { APP_ACTION_FORM_DISABLED_KEY, AUTO_TOUCH_WRAPPER_KEY, AbstractAsyncFormlyFormDirective, AbstractConfigAsyncFormlyFormDirective, AbstractDbxPickableItemFieldDirective, AbstractDbxSearchableFieldDisplayDirective, AbstractDbxSearchableValueFieldDirective, AbstractFormExpandableSectionWrapperDirective, AbstractFormlyFormDirective, AbstractSyncFormlyFormDirective, AutoTouchFieldWrapperComponent, ChecklistItemFieldDataSetBuilder, DBX_DATE_TIME_FIELD_MENU_PRESETS_TOKEN, DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN, DEFAULT_DATE_TIME_FIELD_MENU_PRESETS_PRESETS, DEFAULT_FORM_DISABLED_KEY, DEFAULT_HAS_VALUE_FN, DEFAULT_LAT_LNG_TEXT_FIELD_PATTERN_MESSAGE, DEFAULT_LAT_LNG_TEXT_FIELD_PLACEHOLDER, DEFAULT_PREFERRED_COUNTRIES, DISPLAY_FOR_TIMEZONE_STRING_VALUE, DbxActionFormDirective, DbxActionFormSafetyDirective, DbxChecklistItemContentComponent, DbxChecklistItemFieldComponent, DbxDateTimeFieldComponent, DbxDateTimeFieldMenuPresetsService, DbxDateTimeFieldTimeMode, DbxDateTimeValueMode, DbxDefaultChecklistItemFieldDisplayComponent, DbxDefaultSearchableFieldDisplayComponent, DbxForm, DbxFormActionModule, DbxFormActionTransitionModule, DbxFormComponentFieldComponent, DbxFormExpandWrapperComponent, DbxFormExtensionModule, DbxFormFlexWrapperComponent, DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyDbxListFieldModule, DbxFormFormlyFieldModule, DbxFormFormlyFormModule, DbxFormFormlyNumberFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySelectionModule, DbxFormFormlySourceSelectModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyTextFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule, DbxFormInfoWrapperComponent, DbxFormIoModule, DbxFormLayoutModule, DbxFormLoadingSourceDirective, DbxFormModule, DbxFormRepeatArrayTypeComponent, DbxFormSearchFormComponent, DbxFormSectionWrapperComponent, DbxFormSourceDirective, DbxFormSourceSelectFieldComponent, DbxFormSpacerComponent, DbxFormState, DbxFormSubsectionWrapperComponent, DbxFormToggleWrapperComponent, DbxFormValueChangesDirective, DbxFormWorkingWrapperComponent, DbxFormlyContext, DbxFormlyFieldsContextDirective, DbxFormlyFormComponent, DbxFormlyModule, DbxItemListFieldComponent, DbxMutableForm, DbxPhoneFieldComponent, DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent, DbxSearchableChipFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxSearchableTextFieldComponent, DbxTextEditorFieldComponent, EXPANDABLE_WRAPPER_KEY, FIELD_VALUES_ARE_EQUAL_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_ERROR_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_VALIDATION_KEY, FLEX_WRAPPER_KEY, INFO_WRAPPER_KEY, INVALID_PHONE_NUMBER_MESSAGE, IS_DIVISIBLE_BY_VALIDATION_KEY, LABEL_STRING_MAX_LENGTH, MAX_LENGTH_VALIDATION_MESSAGE, MAX_VALIDATION_MESSAGE, MIN_LENGTH_VALIDATION_MESSAGE, MIN_VALIDATION_MESSAGE, PHONE_LABEL_MAX_LENGTH, REQUIRED_VALIDATION_MESSAGE, SEARCH_STRING_MAX_LENGTH, SECTION_WRAPPER_KEY, STYLE_WRAPPER_KEY, SUBSECTION_WRAPPER_KEY, TAKE_NEXT_UPCOMING_TIME_CONFIG_OBS, TOGGLE_WRAPPER_KEY, WORKING_WRAPPER_KEY, addValueSelectionOptionFunction, addWrapperToFormlyFieldConfig, addressField, addressFormlyFields, addressLineField, addressListField, autoTouchWrapper, checkIsFieldFlexLayoutGroupFieldConfig, checkboxField, checklistItemField, chipTextField, cityField, componentField, countryField, dateRangeField, dateTimeField, dateTimePreset, dateTimeRangeField, dbxDateRangeIsSameDateRangeFieldValue, dbxDateTimeInputValueParseFactory, dbxDateTimeIsSameDateTimeFieldValue, dbxDateTimeOutputValueFactory, dbxFormSearchFormFields, dbxFormSourceObservable, dbxFormSourceObservableFromStream, dbxListField, defaultValidationMessages, disableFormlyFieldAutofillAttributes, dollarAmountField, emailField, expandWrapper, fieldValueIsAvailableValidator, fieldValuesAreEqualValidator, filterPartialPotentialFieldConfigValuesFromObject, filterPickableItemFieldValuesByLabel, filterPickableItemFieldValuesByLabelFilterFunction, fixedDateRangeField, flexLayoutWrapper, formlyField, hiddenField, infoWrapper, isDivisibleBy, isDomain, isInRange, isTruthy, latLngTextField, makeMetaFilterSearchableFieldValueDisplayFn, maxLengthValidationMessage, maxValidationMessage, mergePropsValueObjects, minLengthValidationMessage, minValidationMessage, nameField, numberField, numberFieldTransformParser, partialPotentialFieldConfigKeys, partialPotentialFieldConfigKeysFilter, phoneAndLabelSectionField, phoneField, phoneListField, pickableItemChipField, pickableItemListField, pickableValueFieldValuesConfigForStaticLabeledValues, propsAndConfigForFieldConfig, propsForFieldConfig, propsValueForFieldConfig, provideDbxForm, provideDbxMutableForm, provideFormlyContext, repeatArrayField, searchableChipField, searchableStringChipField, searchableTextField, sectionWrapper, sortPickableItemsByLabel, sortPickableItemsByLabelStringFunction, sourceSelectField, stateField, styleWrapper, subsectionWrapper, syncConfigValueObs, textAreaField, textEditorField, textField, textFieldTransformParser, textIsAvailableField, textPasswordField, textPasswordWithVerifyFieldGroup, textVerifyPasswordField, timeOnlyField, timezoneStringField, timezoneStringSearchFunction, toggleField, toggleWrapper, usernamePasswordLoginFields, validatorsForFieldConfig, valueSelectionField, workingWrapper, wrappedPhoneAndLabelField, zipCodeField };
 //# sourceMappingURL=dereekb-dbx-form.mjs.map