@dereekb/dbx-form 9.15.6 → 9.15.7

package/fesm2020/dereekb-dbx-form.mjs

@@ -9,9 +9,9 @@ import * as i2 from '@dereekb/dbx-core';
 import { AbstractSubscriptionDirective, safeDetectChanges, DbxInjectionComponentModule, DbxDatePipeModule, mergeDbxInjectionComponentConfigs, tapDetectChanges } from '@dereekb/dbx-core';
 import * as i1$1 from '@dereekb/dbx-web';
 import { DbxActionTransitionSafetyDirective, DbxTextModule, DbxLoadingModule, DbxFlexLayoutModule, DbxSectionLayoutModule, DbxRouterAnchorModule, AbstractDbxSelectionListWrapperDirective, DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE, AbstractDbxSelectionListViewDirective, addConfigToValueListItems, provideDbxListView, AbstractDbxValueListViewItemComponent, DbxButtonModule, DbxListLayoutModule, mapCompactModeObs, DbxBarLayoutModule } from '@dereekb/dbx-web';
-import { isPast, addSeconds, isSameMinute, startOfDay, isSameDay, addMinutes } from 'date-fns';
+import { isPast, addSeconds, isSameMinute, startOfDay, isSameDay, addMinutes, addDays } from 'date-fns';
 import { BehaviorSubject, switchMap, first, exhaustMap, of, catchError, delay, filter, combineLatest, map, distinctUntilChanged, mergeMap, shareReplay, startWith, debounceTime, Subject, skipWhile, interval, tap, merge, throttleTime, scan, timer } from 'rxjs';
-import { LockSet, SubscriptionObject, asObservable, loadingStateHasFinishedLoading, switchMapMaybeObs, filterMaybe, switchMapMaybeDefault, SimpleLoadingContext, startWithBeginLoading, mapLoadingStateResults, successResult, ListLoadingStateContextInstance, isListLoadingStateEmpty, LoadingStateContextInstance, tapLog, skipFirstMaybe, asyncPusherCache, scanCount } from '@dereekb/rxjs';
+import { LockSet, SubscriptionObject, asObservable, loadingStateHasFinishedLoading, switchMapMaybeObs, filterMaybe, switchMapMaybeDefault, SimpleLoadingContext, startWithBeginLoading, mapLoadingStateResults, successResult, ListLoadingStateContextInstance, isListLoadingStateEmpty, LoadingStateContextInstance, skipFirstMaybe, asyncPusherCache, scanCount } from '@dereekb/rxjs';
 import * as i1$3 from '@ngx-formly/core';
 import { FieldType, FieldWrapper, FormlyModule, FieldArrayType } from '@ngx-formly/core';
 import * as i3$1 from '@angular/forms';
@@ -26,7 +26,7 @@ import * as i1$2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i3$3 from '@angular/flex-layout/flex';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { objectIsEmpty, mergeObjectsFunction, filterFromPOJOFunction, mergeObjects, filterFromPOJO, asArray, objectHasNoKeys, addPlusPrefixToNumber, convertMaybeToArray, makeValuesGroupMap, findUnique, searchStringFilterFunction, caseInsensitiveFilterByIndexOfDecisionFactory, mergeIntoArray, lastValue, separateValues, arrayToMap, getValueFromGetter, dateFromLogicalDate, WEBSITE_DOMAIN_NAME_REGEX, KeyValueTypleValueFilter, valuesFromPOJO, allObjectsAreEqual, isNumberDivisibleBy, nearestDivisibleValues, US_STATE_CODE_STRING_REGEX, ZIP_CODE_STRING_REGEX, LAT_LNG_PATTERN, capitalizeFirstLetter, BooleanStringKeyArrayUtilityInstance } from '@dereekb/util';
+import { objectIsEmpty, mergeObjectsFunction, filterFromPOJOFunction, mergeObjects, filterFromPOJO, asArray, objectHasNoKeys, addPlusPrefixToNumber, convertMaybeToArray, makeValuesGroupMap, findUnique, searchStringFilterFunction, caseInsensitiveFilterByIndexOfDecisionFactory, mergeIntoArray, lastValue, separateValues, arrayToMap, getValueFromGetter, filterMaybeValues, dateFromLogicalDate, WEBSITE_DOMAIN_NAME_REGEX, KeyValueTypleValueFilter, valuesFromPOJO, allObjectsAreEqual, isNumberDivisibleBy, nearestDivisibleValues, transformNumberFunction, concatArrays, transformStringFunction, US_STATE_CODE_STRING_REGEX, ZIP_CODE_STRING_REGEX, LAT_LNG_PATTERN, capitalizeFirstLetter, BooleanStringKeyArrayUtilityInstance } from '@dereekb/util';
 import * as i2$1 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i2$2 from '@angular/flex-layout/extended';
@@ -44,7 +44,7 @@ import { MatListModule } from '@angular/material/list';
 import * as i3$4 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
-import { skipUntilTimeElapsedAfterLastEmission, toJsDate, parseISO8601DayStringToDate, formatToISO8601DayString, formatToISO8601DateString, guessCurrentTimezone, toReadableTimeString, utcDayForDate, readableTimeStringToDate, DateTimeMinuteInstance, toLocalReadableTimeString, allTimezoneInfos, timezoneInfoForSystem, searchTimezoneInfos } from '@dereekb/date';
+import { skipUntilTimeElapsedAfterLastEmission, toJsDate, parseISO8601DayStringToDate, formatToISO8601DayString, formatToISO8601DateString, safeToJsDate, guessCurrentTimezone, toReadableTimeString, utcDayForDate, readableTimeStringToDate, findMinDate, findMaxDate, DateTimeMinuteInstance, toLocalReadableTimeString, allTimezoneInfos, timezoneInfoForSystem, searchTimezoneInfos } from '@dereekb/date';
 import * as i4$4 from 'ngx-editor';
 import { Editor, NgxEditorModule } from 'ngx-editor';
 import * as i4$5 from '@angular/cdk/drag-drop';
@@ -1163,10 +1163,20 @@ function formlyField(fieldConfig) {
     }
     return fieldConfig;
 }
-function propsForFieldConfig(fieldConfig, override) {
+/**
+ * Creates an object with propers, expressions, and parsers properly configured from the input FieldConfig.
+ *
+ * @param fieldConfig
+ * @param override
+ * @returns
+ */
+function propsAndConfigForFieldConfig(fieldConfig, override) {
+    const { expressions, parsers } = fieldConfig;
     const props = propsValueForFieldConfig(fieldConfig, override);
     return {
-        props
+        props,
+        expressions,
+        parsers
     };
 }
 const partialPotentialFieldConfigKeys = ['label', 'placeholder', 'required', 'readonly', 'description', 'autocomplete'];
@@ -1238,13 +1248,19 @@ function validatorsForFieldConfig(input) {
     }
     return config;
 }
+/**
+ * MARK: Compat
+ *
+ * @deprecated use propsAndConfigForFieldConfig instead.
+ */
+const propsForFieldConfig = propsAndConfigForFieldConfig;
 
 function checklistItemField(config) {
     const { key, displayContentObs, componentClass } = config;
     const fieldConfig = formlyField({
         key,
         type: 'checklistitem',
-        ...propsForFieldConfig(config, {
+        ...propsAndConfigForFieldConfig(config, {
             displayContentObs,
             componentClass
         })
@@ -1867,7 +1883,7 @@ function pickableItemChipField(config) {
     return formlyField({
         key,
         type: 'pickablechipfield',
-        ...propsForFieldConfig(config, {
+        ...propsAndConfigForFieldConfig(config, {
             ...config,
             autocomplete: false
         })
@@ -1878,7 +1894,7 @@ function pickableItemListField(config) {
     return formlyField({
         key,
         type: 'pickablelistfield',
-        ...propsForFieldConfig(config, {
+        ...propsAndConfigForFieldConfig(config, {
             ...config,
             autocomplete: false
         })
@@ -2300,7 +2316,7 @@ function searchableChipField(config) {
     return formlyField({
         key,
         type: 'searchablechipfield',
-        ...propsForFieldConfig(config, {
+        ...propsAndConfigForFieldConfig(config, {
             ...config,
             placeholder: placeholder ?? 'Add...',
             autocomplete: false
@@ -2312,7 +2328,7 @@ function searchableTextField(config) {
     return formlyField({
         key,
         type: 'searchabletextfield',
-        ...propsForFieldConfig(config, {
+        ...propsAndConfigForFieldConfig(config, {
             ...config,
             autocomplete: false
         })
@@ -2457,7 +2473,7 @@ function valueSelectionField(config) {
     return formlyField({
         key,
         type: native ? 'native-select' : 'select',
-        ...propsForFieldConfig(config, {
+        ...propsAndConfigForFieldConfig(config, {
             options: config.options,
             multiple: config.multiple ?? false,
             ...selectAllOptionConfig
@@ -2610,7 +2626,7 @@ function textEditorField(config) {
             // Set to trigger value update on blurs with the form. However, the value is set internally too.
             updateOn: 'blur'
         },
-        ...propsForFieldConfig(config, {
+        ...propsAndConfigForFieldConfig(config, {
             minLength,
             maxLength
         })
@@ -2792,7 +2808,7 @@ function repeatArrayField(config) {
     return formlyField({
         key,
         type: 'repeatarray',
-        ...propsForFieldConfig(config, {
+        ...propsAndConfigForFieldConfig(config, {
             maxLength,
             labelForField,
             addText,
@@ -2825,7 +2841,7 @@ function toggleField(config) {
         type: 'toggle',
         wrappers: ['autotouch', 'form-field'],
         defaultValue: defaultValue ?? false,
-        ...propsForFieldConfig(config)
+        ...propsAndConfigForFieldConfig(config)
     });
 }
 function checkboxField(config) {
@@ -2834,7 +2850,7 @@ function checkboxField(config) {
         key,
         type: 'checkbox',
         defaultValue: defaultValue ?? false,
-        ...propsForFieldConfig(config)
+        ...propsAndConfigForFieldConfig(config)
     });
 }
 /*
@@ -2918,6 +2934,20 @@ function dbxDateTimeOutputValueFactory(mode) {
     }
     return factory;
 }
+function syncConfigValueObs(parseConfigsObs, type) {
+    return parseConfigsObs.pipe(switchMap((x) => {
+        const config = x.find((y) => y.syncType === type);
+        let result;
+        if (config) {
+            const { control } = config;
+            result = control.valueChanges.pipe(startWith(control.value), map(safeToJsDate));
+        }
+        else {
+            result = of(undefined);
+        }
+        return result;
+    }), distinctUntilChanged(), shareReplay(1));
+}
 class DbxDateTimeFieldComponent extends FieldType$1 {
     constructor(cdRef) {
         super();
@@ -2947,13 +2977,40 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
             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))));
         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));
         this.date$ = this.dateInputCtrl.valueChanges.pipe(startWith(this.dateInputCtrl.value), filterMaybe(), shareReplay(1));
-        this.dateValue$ = merge(this.date$.pipe(tapLog('date')), this.value$.pipe(skipFirstMaybe())).pipe(map((x) => (x ? startOfDay(x) : x)), distinctUntilChanged((a, b) => a != null && b != null && isSameDay(a, b)), shareReplay(1));
+        this.dateValue$ = merge(this.date$, this.value$.pipe(skipFirstMaybe())).pipe(map((x) => (x ? startOfDay(x) : x)), distinctUntilChanged((a, b) => a != null && b != null && isSameDay(a, b)), shareReplay(1));
         this.timeInput$ = this._updateTime.pipe(debounceTime(5), map(() => this.timeInputCtrl.value || ''), distinctUntilChanged());
-        this.config$ = this._config.pipe(switchMapMaybeDefault(), shareReplay(1));
+        this.syncConfigObs$ = this._syncConfigObs.pipe(switchMapMaybeDefault(), shareReplay(1));
+        this.parsedSyncConfigs$ = this.syncConfigObs$.pipe(map((x) => {
+            let parsed;
+            if (x) {
+                parsed = filterMaybeValues(asArray(x).map((y) => {
+                    const control = this.form.get(y.syncWith);
+                    if (control) {
+                        return {
+                            control,
+                            ...y
+                        };
+                    }
+                    else {
+                        return undefined;
+                    }
+                }));
+            }
+            else {
+                parsed = [];
+            }
+            return parsed;
+        }), shareReplay(1));
+        this.syncConfigBeforeValue$ = syncConfigValueObs(this.parsedSyncConfigs$, 'before');
+        this.syncConfigAfterValue$ = syncConfigValueObs(this.parsedSyncConfigs$, 'after');
+        // TODO: Get min/max using the DateTimePickerConfiguration too
+        this.dateInputMin$ = this.syncConfigBeforeValue$;
+        this.dateInputMax$ = this.syncConfigAfterValue$;
         this.rawDateTime$ = combineLatest([this.dateValue$, this.timeInput$.pipe(startWith(null)), this.fullDay$]).pipe(map(([date, timeString, fullDay]) => {
             let result;
             if (date) {
@@ -2978,7 +3035,24 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
             }
             return result;
         }), distinctUntilChanged((a, b) => a != null && b != null && isSameMinute(a, b)), shareReplay(1));
-        this.timeOutput$ = combineLatest([this.rawDateTime$, this._offset, this.config$.pipe(distinctUntilChanged())]).pipe(throttleTime(40, 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.config$ = combineLatest([this._config.pipe(switchMapMaybeDefault(), shareReplay(1)), 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]);
+                result = {
+                    ...x,
+                    limits: {
+                        ...x?.limits,
+                        min,
+                        max
+                    }
+                };
+            }
+            return result;
+        }), distinctUntilChanged(), shareReplay(1));
+        this.timeOutput$ = combineLatest([this.rawDateTime$, this._offset, this.config$]).pipe(throttleTime(40, 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,
@@ -2992,6 +3066,12 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
             return date;
         }), distinctUntilChanged((a, b) => a != null && b != null && isSameMinute(a, b)), shareReplay(1));
     }
+    get dateLabel() {
+        return this.props.dateLabel ?? 'Date';
+    }
+    get timeLabel() {
+        return this.props.timeLabel ?? 'Time';
+    }
     get dateOnly() {
         return this.timeMode === DbxDateTimeFieldTimeMode.NONE;
     }
@@ -3019,6 +3099,7 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
     ngOnInit() {
         this._formControlObs.next(this.formControl);
         this._config.next(this.dateTimeField.getConfigObs?.());
+        this._syncConfigObs.next(this.dateTimeField.getSyncFieldsObs?.());
         const valueFactory = dbxDateTimeOutputValueFactory(this.valueMode);
         this._sub.subscription = this.timeOutput$.pipe(skipFirstMaybe()).subscribe((dateValue) => {
             const value = valueFactory(dateValue);
@@ -3076,15 +3157,14 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
         this._formControlObs.complete();
         this._config.complete();
         this._updateTime.complete();
+        this._syncConfigObs.complete();
         this._sub.destroy();
         this._valueSub.destroy();
     }
     datePicked(event) {
         const date = event.value;
-        console.log('date picked?', event);
         if (date) {
-            this.dateInputCtrl.setValue(date);
-            this._updateTime.next();
+            this.setDateInputValue(date);
         }
     }
     setLogicalTime(time) {
@@ -3094,12 +3174,43 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
             this.setTime(timeString);
         }
     }
+    setDateInputValue(date) {
+        this.dateInputCtrl.setValue(date);
+        this._updateTime.next();
+    }
     setTime(time) {
         this.timeInputCtrl.setValue(time);
         this._offset.next(0);
         this._updateTime.next();
     }
-    keydownOnInput(event) {
+    keydownOnDateInput(event) {
+        let direction = 0;
+        switch (event.key?.toLowerCase()) {
+            case 'arrowup':
+                direction = 1;
+                break;
+            case 'arrowdown':
+                direction = -1;
+                break;
+        }
+        let offset = 1;
+        if (event.ctrlKey && event.shiftKey) {
+            offset = 365;
+        }
+        else if (event.ctrlKey) {
+            offset = 30;
+        }
+        else if (event.shiftKey) {
+            offset = 7;
+        }
+        if (direction !== 0) {
+            this.date$.pipe(first()).subscribe((date) => {
+                const newDate = addDays(date, offset * direction);
+                this.setDateInputValue(newDate);
+            });
+        }
+    }
+    keydownOnTimeInput(event) {
         let direction = 0;
         switch (event.key?.toLowerCase()) {
             case 'arrowup':
@@ -3143,10 +3254,10 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
     }
 }
 DbxDateTimeFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxDateTimeFieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DbxDateTimeFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxDateTimeFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-datetime-field\" fxLayout=\"row wrap\" fxLayout.xs=\"column wrap\" fxLayoutAlign=\"space-evenly stretch\">\n  <!-- Date -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"dateOnly ? '100' : '50'\" *ngIf=\"showDateInput\">\n    <ng-container *ngTemplateOutlet=\"dateInputTemplate\"></ng-container>\n  </div>\n  <!-- Time -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"showDateInput ? '50' : '100'\">\n    <ng-container *ngIf=\"showTimeInput$ | async\">\n      <ng-container *ngTemplateOutlet=\"timeMenuAndInputTemplate\"></ng-container>\n    </ng-container>\n    <div class=\"add-time-button-wrapper\" *ngIf=\"showAddTime$ | async\">\n      <button mat-button class=\"add-time-button\" ngClass.lt-sm=\"add-time-button-full\" (click)=\"addTime()\">\n        <mat-icon>timer</mat-icon>\n        Add Time\n      </button>\n    </div>\n  </div>\n  <div *ngIf=\"!hideDateHint\" class=\"dbx-datetime-row dbx-datetime-hint-row\" fxFlex=\"100\">\n    <div class=\"dbx-hint\" [ngSwitch]=\"fullDay$ | async\">\n      <small *ngSwitchCase=\"true\">\n        <b class=\"dbx-ok\">All Day</b>\n        {{ dateValue$ | async | date: 'fullDate' }} ({{ dateValue$ | async | dateDistance }})\n      </small>\n      <small *ngSwitchCase=\"false\">\n        <ng-container *ngIf=\"value$ | async\">\n          <b class=\"dbx-ok\">At</b>\n          {{ displayValue$ | async | date: 'medium' }} ({{ displayValue$ | async | timeDistance }})\n        </ng-container>\n      </small>\n    </div>\n  </div>\n</div>\n\n<!-- Date Input Template -->\n<ng-template #dateInputTemplate>\n  <button mat-icon-button (click)=\"picker.open()\" [disabled]=\"disabled\">\n    <mat-icon>calendar_today</mat-icon>\n  </button>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>Date</mat-label>\n    <input #dateInput matInput [matDatepicker]=\"picker\" (dateChange)=\"datePicked($event)\" [value]=\"dateValue$ | async\" />\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n</ng-template>\n\n<!-- Time Menu/Input Template -->\n<ng-template #timeMenuAndInputTemplate>\n  <button mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"opens the time menu\" [disabled]=\"disabled\">\n    <mat-icon>timer</mat-icon>\n  </button>\n  <mat-menu #timemenu=\"matMenu\">\n    <ng-container *ngIf=\"timeMode === 'optional'\">\n      <button mat-menu-item (click)=\"removeTime()\">\n        <span>Remove Time</span>\n      </button>\n      <mat-divider></mat-divider>\n    </ng-container>\n    <button mat-menu-item (click)=\"setLogicalTime('now')\">\n      <span>Now</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('12:00AM')\">\n      <span>Midnight</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('6:00AM')\">\n      <span>6:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('8:00AM')\">\n      <span>8:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('10:00AM')\">\n      <span>10:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('12:00PM')\">\n      <span>Noon</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('2:00PM')\">\n      <span>2:00PM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('5:00PM')\">\n      <span>5:00PM</span>\n    </button>\n  </mat-menu>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>Time</mat-label>\n    <input #timeInput matInput [formControl]=\"timeInputCtrl\" (focus)=\"focusTime()\" (focusout)=\"focusOutTime()\" (keydown)=\"keydownOnInput($event)\" />\n  </mat-form-field>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i3$4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i1$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i3$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i2.TimeDistancePipe, name: "timeDistance" }, { kind: "pipe", type: i2.DateDistancePipe, name: "dateDistance" }] });
+DbxDateTimeFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxDateTimeFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-datetime-field\" fxLayout=\"row wrap\" fxLayout.xs=\"column wrap\" fxLayoutAlign=\"space-evenly stretch\">\n  <!-- Date -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"dateOnly ? '100' : '50'\" *ngIf=\"showDateInput\">\n    <ng-container *ngTemplateOutlet=\"dateInputTemplate\"></ng-container>\n  </div>\n  <!-- Time -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"showDateInput ? '50' : '100'\">\n    <ng-container *ngIf=\"showTimeInput$ | async\">\n      <ng-container *ngTemplateOutlet=\"timeMenuAndInputTemplate\"></ng-container>\n    </ng-container>\n    <div class=\"add-time-button-wrapper\" *ngIf=\"showAddTime$ | async\">\n      <button mat-button class=\"add-time-button\" ngClass.lt-sm=\"add-time-button-full\" (click)=\"addTime()\">\n        <mat-icon>timer</mat-icon>\n        Add Time\n      </button>\n    </div>\n  </div>\n  <div *ngIf=\"!hideDateHint\" class=\"dbx-datetime-row dbx-datetime-hint-row\" fxFlex=\"100\">\n    <div class=\"dbx-hint\" [ngSwitch]=\"fullDay$ | async\">\n      <small *ngSwitchCase=\"true\">\n        <b class=\"dbx-ok\">All Day</b>\n        {{ displayValue$ | async | date: 'fullDate' }} ({{ displayValue$ | async | dateDistance }})\n      </small>\n      <small *ngSwitchCase=\"false\">\n        <ng-container *ngIf=\"value$ | async\">\n          <b class=\"dbx-ok\">At</b>\n          {{ displayValue$ | async | date: 'medium' }} ({{ displayValue$ | async | timeDistance }})\n        </ng-container>\n      </small>\n    </div>\n  </div>\n</div>\n\n<!-- Date Input Template -->\n<ng-template #dateInputTemplate>\n  <button mat-icon-button (click)=\"picker.open()\" [disabled]=\"disabled\">\n    <mat-icon>calendar_today</mat-icon>\n  </button>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>{{ dateLabel }}</mat-label>\n    <input #dateInput matInput [min]=\"dateInputMin$ | async\" [max]=\"dateInputMax$ | async\" [matDatepicker]=\"picker\" (dateChange)=\"datePicked($event)\" [value]=\"dateValue$ | async\" (keydown)=\"keydownOnDateInput($event)\" />\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n</ng-template>\n\n<!-- Time Menu/Input Template -->\n<ng-template #timeMenuAndInputTemplate>\n  <button mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"opens the time menu\" [disabled]=\"disabled\">\n    <mat-icon>timer</mat-icon>\n  </button>\n  <mat-menu #timemenu=\"matMenu\">\n    <ng-container *ngIf=\"timeMode === 'optional'\">\n      <button mat-menu-item (click)=\"removeTime()\">\n        <span>Remove Time</span>\n      </button>\n      <mat-divider></mat-divider>\n    </ng-container>\n    <button mat-menu-item (click)=\"setLogicalTime('now')\">\n      <span>Now</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('12:00AM')\">\n      <span>Midnight</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('6:00AM')\">\n      <span>6:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('8:00AM')\">\n      <span>8:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('10:00AM')\">\n      <span>10:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('12:00PM')\">\n      <span>Noon</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('2:00PM')\">\n      <span>2:00PM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('5:00PM')\">\n      <span>5:00PM</span>\n    </button>\n  </mat-menu>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>{{ timeLabel }}</mat-label>\n    <input #timeInput matInput [formControl]=\"timeInputCtrl\" (focus)=\"focusTime()\" (focusout)=\"focusOutTime()\" (keydown)=\"keydownOnTimeInput($event)\" />\n  </mat-form-field>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i3$4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i1$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i3$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i2.TimeDistancePipe, name: "timeDistance" }, { kind: "pipe", type: i2.DateDistancePipe, name: "dateDistance" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", 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  </div>\n  <!-- Time -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"showDateInput ? '50' : '100'\">\n    <ng-container *ngIf=\"showTimeInput$ | async\">\n      <ng-container *ngTemplateOutlet=\"timeMenuAndInputTemplate\"></ng-container>\n    </ng-container>\n    <div class=\"add-time-button-wrapper\" *ngIf=\"showAddTime$ | async\">\n      <button mat-button class=\"add-time-button\" ngClass.lt-sm=\"add-time-button-full\" (click)=\"addTime()\">\n        <mat-icon>timer</mat-icon>\n        Add Time\n      </button>\n    </div>\n  </div>\n  <div *ngIf=\"!hideDateHint\" class=\"dbx-datetime-row dbx-datetime-hint-row\" fxFlex=\"100\">\n    <div class=\"dbx-hint\" [ngSwitch]=\"fullDay$ | async\">\n      <small *ngSwitchCase=\"true\">\n        <b class=\"dbx-ok\">All Day</b>\n        {{ dateValue$ | async | date: 'fullDate' }} ({{ dateValue$ | async | dateDistance }})\n      </small>\n      <small *ngSwitchCase=\"false\">\n        <ng-container *ngIf=\"value$ | async\">\n          <b class=\"dbx-ok\">At</b>\n          {{ displayValue$ | async | date: 'medium' }} ({{ displayValue$ | async | timeDistance }})\n        </ng-container>\n      </small>\n    </div>\n  </div>\n</div>\n\n<!-- Date Input Template -->\n<ng-template #dateInputTemplate>\n  <button mat-icon-button (click)=\"picker.open()\" [disabled]=\"disabled\">\n    <mat-icon>calendar_today</mat-icon>\n  </button>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>Date</mat-label>\n    <input #dateInput matInput [matDatepicker]=\"picker\" (dateChange)=\"datePicked($event)\" [value]=\"dateValue$ | async\" />\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n</ng-template>\n\n<!-- Time Menu/Input Template -->\n<ng-template #timeMenuAndInputTemplate>\n  <button mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"opens the time menu\" [disabled]=\"disabled\">\n    <mat-icon>timer</mat-icon>\n  </button>\n  <mat-menu #timemenu=\"matMenu\">\n    <ng-container *ngIf=\"timeMode === 'optional'\">\n      <button mat-menu-item (click)=\"removeTime()\">\n        <span>Remove Time</span>\n      </button>\n      <mat-divider></mat-divider>\n    </ng-container>\n    <button mat-menu-item (click)=\"setLogicalTime('now')\">\n      <span>Now</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('12:00AM')\">\n      <span>Midnight</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('6:00AM')\">\n      <span>6:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('8:00AM')\">\n      <span>8:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('10:00AM')\">\n      <span>10:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('12:00PM')\">\n      <span>Noon</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('2:00PM')\">\n      <span>2:00PM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('5:00PM')\">\n      <span>5:00PM</span>\n    </button>\n  </mat-menu>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>Time</mat-label>\n    <input #timeInput matInput [formControl]=\"timeInputCtrl\" (focus)=\"focusTime()\" (focusout)=\"focusOutTime()\" (keydown)=\"keydownOnInput($event)\" />\n  </mat-form-field>\n</ng-template>\n" }]
+            args: [{ template: "<div class=\"dbx-datetime-field\" fxLayout=\"row wrap\" fxLayout.xs=\"column wrap\" fxLayoutAlign=\"space-evenly stretch\">\n  <!-- Date -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"dateOnly ? '100' : '50'\" *ngIf=\"showDateInput\">\n    <ng-container *ngTemplateOutlet=\"dateInputTemplate\"></ng-container>\n  </div>\n  <!-- Time -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"showDateInput ? '50' : '100'\">\n    <ng-container *ngIf=\"showTimeInput$ | async\">\n      <ng-container *ngTemplateOutlet=\"timeMenuAndInputTemplate\"></ng-container>\n    </ng-container>\n    <div class=\"add-time-button-wrapper\" *ngIf=\"showAddTime$ | async\">\n      <button mat-button class=\"add-time-button\" ngClass.lt-sm=\"add-time-button-full\" (click)=\"addTime()\">\n        <mat-icon>timer</mat-icon>\n        Add Time\n      </button>\n    </div>\n  </div>\n  <div *ngIf=\"!hideDateHint\" class=\"dbx-datetime-row dbx-datetime-hint-row\" fxFlex=\"100\">\n    <div class=\"dbx-hint\" [ngSwitch]=\"fullDay$ | async\">\n      <small *ngSwitchCase=\"true\">\n        <b class=\"dbx-ok\">All Day</b>\n        {{ displayValue$ | async | date: 'fullDate' }} ({{ displayValue$ | async | dateDistance }})\n      </small>\n      <small *ngSwitchCase=\"false\">\n        <ng-container *ngIf=\"value$ | async\">\n          <b class=\"dbx-ok\">At</b>\n          {{ displayValue$ | async | date: 'medium' }} ({{ displayValue$ | async | timeDistance }})\n        </ng-container>\n      </small>\n    </div>\n  </div>\n</div>\n\n<!-- Date Input Template -->\n<ng-template #dateInputTemplate>\n  <button mat-icon-button (click)=\"picker.open()\" [disabled]=\"disabled\">\n    <mat-icon>calendar_today</mat-icon>\n  </button>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>{{ dateLabel }}</mat-label>\n    <input #dateInput matInput [min]=\"dateInputMin$ | async\" [max]=\"dateInputMax$ | async\" [matDatepicker]=\"picker\" (dateChange)=\"datePicked($event)\" [value]=\"dateValue$ | async\" (keydown)=\"keydownOnDateInput($event)\" />\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n</ng-template>\n\n<!-- Time Menu/Input Template -->\n<ng-template #timeMenuAndInputTemplate>\n  <button mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"opens the time menu\" [disabled]=\"disabled\">\n    <mat-icon>timer</mat-icon>\n  </button>\n  <mat-menu #timemenu=\"matMenu\">\n    <ng-container *ngIf=\"timeMode === 'optional'\">\n      <button mat-menu-item (click)=\"removeTime()\">\n        <span>Remove Time</span>\n      </button>\n      <mat-divider></mat-divider>\n    </ng-container>\n    <button mat-menu-item (click)=\"setLogicalTime('now')\">\n      <span>Now</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('12:00AM')\">\n      <span>Midnight</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('6:00AM')\">\n      <span>6:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('8:00AM')\">\n      <span>8:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('10:00AM')\">\n      <span>10:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('12:00PM')\">\n      <span>Noon</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('2:00PM')\">\n      <span>2:00PM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('5:00PM')\">\n      <span>5:00PM</span>\n    </button>\n  </mat-menu>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>{{ timeLabel }}</mat-label>\n    <input #timeInput matInput [formControl]=\"timeInputCtrl\" (focus)=\"focusTime()\" (focusout)=\"focusOutTime()\" (keydown)=\"keydownOnTimeInput($event)\" />\n  </mat-form-field>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
 
 class DbxFormFormlyDateFieldModule {
@@ -3225,24 +3336,50 @@ function timeOnlyField(config = {}) {
     });
 }
 function dateTimeField(config = {}) {
-    const { key = 'date', timeMode = DbxDateTimeFieldTimeMode.REQUIRED, valueMode, fullDayInUTC, fullDayFieldName, getConfigObs, hideDateHint, timeOnly = false } = config;
+    const { key = 'date', dateLabel, timeLabel, timeMode = DbxDateTimeFieldTimeMode.REQUIRED, valueMode, fullDayInUTC, fullDayFieldName, getConfigObs, getSyncFieldsObs, hideDateHint, timeOnly = false } = config;
     const fieldConfig = formlyField({
         key,
         type: 'datetime',
-        ...propsForFieldConfig(config, {
+        ...propsAndConfigForFieldConfig(config, {
+            dateLabel,
+            timeLabel,
             valueMode,
             timeOnly,
             timeMode: timeOnly ? DbxDateTimeFieldTimeMode.REQUIRED : timeMode,
             fullDayFieldName,
             fullDayInUTC,
             hideDateHint,
-            getConfigObs
+            getConfigObs,
+            getSyncFieldsObs
         })
     });
     return styleWrapper(fieldConfig, {
         classGetter: 'dbx-mat-form-field-disable-underline'
     });
 }
+function dateRangeField(config = {}) {
+    const { start, end } = config;
+    const startFieldKey = start?.key ?? 'start';
+    const endFieldKey = end?.key ?? 'end';
+    const startField = dateTimeField({
+        dateLabel: 'Start',
+        timeMode: DbxDateTimeFieldTimeMode.NONE,
+        getSyncFieldsObs: () => of([{ syncWith: endFieldKey, syncType: 'after' }]),
+        ...start,
+        key: startFieldKey
+    });
+    const endField = dateTimeField({
+        dateLabel: 'End',
+        timeMode: DbxDateTimeFieldTimeMode.NONE,
+        getSyncFieldsObs: () => of([{ syncWith: startFieldKey, syncType: 'before' }]),
+        ...end,
+        key: endFieldKey
+    });
+    return {
+        key: undefined,
+        fieldGroup: [flexLayoutWrapper([startField, endField], { size: 1, relative: true })]
+    };
+}
 
 function isTruthy() {
     return (control) => {
@@ -3314,6 +3451,12 @@ function isInRange(min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER)
     };
 }
 const IS_DIVISIBLE_BY_VALIDATION_KEY = 'isDivisibleBy';
+/**
+ * Angular Form ValidationFn for checking isDivisibleBy the input divisor.
+ *
+ * @param divisor
+ * @returns
+ */
 function isDivisibleBy(divisor) {
     if (divisor === 0) {
         throw new Error('Divisior must be greater than zero.');
@@ -3364,8 +3507,21 @@ function fieldValueIsAvailableValidator(config) {
     })), first());
 }
 
+function numberFieldTransformParser(config) {
+    const { parsers: inputParsers, transform } = config;
+    let parsers;
+    if (inputParsers) {
+        parsers = inputParsers;
+    }
+    if (transform) {
+        const transformParser = transformNumberFunction(transform);
+        parsers = concatArrays([transformParser], parsers);
+    }
+    return parsers;
+}
 function numberField(config) {
     const { key, min, max, step, enforceStep, inputType: type = 'number' } = config;
+    const parsers = numberFieldTransformParser(config);
     const validators = [];
     if (step && enforceStep) {
         validators.push(isDivisibleBy(step));
@@ -3373,7 +3529,7 @@ function numberField(config) {
     return formlyField({
         key,
         type: 'input',
-        ...propsForFieldConfig(config, {
+        ...propsAndConfigForFieldConfig(config, {
             type,
             min,
             max,
@@ -3381,7 +3537,8 @@ function numberField(config) {
         }),
         ...validatorsForFieldConfig({
             validators
-        })
+        }),
+        parsers
     });
 }
 
@@ -3466,30 +3623,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
                 }]
         }] });
 
+function textFieldTransformParser(config) {
+    const { parsers: inputParsers, transform } = config;
+    let parsers;
+    if (inputParsers) {
+        parsers = inputParsers;
+    }
+    if (transform) {
+        const transformParser = transformStringFunction(transform);
+        parsers = concatArrays([transformParser], parsers);
+    }
+    return parsers;
+}
 function textField(config) {
-    const { key, pattern, minLength, maxLength, inputType: type = 'text' } = config;
+    const { transform, key, pattern, minLength, maxLength, inputType: type = 'text' } = config;
+    const parsers = textFieldTransformParser(config);
     return formlyField({
         key,
         type: 'input',
-        ...propsForFieldConfig(config, {
+        ...propsAndConfigForFieldConfig(config, {
             type,
             minLength,
             maxLength,
             pattern
-        })
+        }),
+        parsers
     });
 }
 function textAreaField(config) {
     const { key, rows = 3, pattern, minLength, maxLength } = config;
+    const parsers = textFieldTransformParser(config);
     return formlyField({
         key,
         type: 'textarea',
-        ...propsForFieldConfig(config, {
+        ...propsAndConfigForFieldConfig(config, {
             rows,
             minLength,
             maxLength,
             pattern
-        })
+        }),
+        parsers
     });
 }
 
@@ -3498,7 +3671,7 @@ function phoneField(config = {}) {
     const fieldConfig = formlyField({
         key,
         type: 'intphone',
-        ...propsForFieldConfig(config, {
+        ...propsAndConfigForFieldConfig(config, {
             preferredCountries,
             onlyCountries
         })
@@ -3601,7 +3774,10 @@ function stateField(config = {}) {
         pattern,
         autocomplete,
         required,
-        maxLength
+        maxLength,
+        transform: {
+            toUppercase: true
+        }
     });
 }
 function countryField(config = {}) {
@@ -4380,5 +4556,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
  * 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, DbxFormFormlyFieldModule, DbxFormFormlyNumberFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySelectionModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyTextFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule, DbxFormInfoWrapperComponent, DbxFormIoModule, DbxFormLayoutModule, DbxFormLoadingSourceDirective, DbxFormModule, DbxFormRepeatArrayTypeComponent, DbxFormSectionWrapperComponent, DbxFormSourceDirective, DbxFormSpacerComponent, DbxFormState, DbxFormSubsectionWrapperComponent, DbxFormToggleWrapperComponent, DbxFormValueChangesDirective, DbxFormWorkingWrapperComponent, DbxFormlyContext, DbxFormlyFieldsContextDirective, DbxFormlyFormComponent, DbxFormlyModule, 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, addWrapperToFormlyFieldConfig, addressField, addressFormlyFields, addressLineField, addressListField, autoTouchWrapper, checkIsFieldFlexLayoutGroupFieldConfig, checkboxField, checklistItemField, chipTextField, cityField, componentField, countryField, dateTimeField, dbxDateTimeInputValueParseFactory, dbxDateTimeOutputValueFactory, dbxFormSourceObservable, defaultValidationMessages, disableFormlyFieldAutofillAttributes, emailField, expandWrapper, fieldValueIsAvailableValidator, fieldValuesAreEqualValidator, filterPartialPotentialFieldConfigValuesFromObject, filterPickableItemFieldValuesByLabel, filterPickableItemFieldValuesByLabelFilterFunction, flexLayoutWrapper, formlyField, hiddenField, infoWrapper, isDivisibleBy, isDomain, isInRange, isTruthy, latLngTextField, makeMetaFilterSearchableFieldValueDisplayFn, maxLengthValidationMessage, maxValidationMessage, mergePropsValueObjects, minLengthValidationMessage, minValidationMessage, nameField, numberField, partialPotentialFieldConfigKeys, partialPotentialFieldConfigKeysFilter, phoneAndLabelSectionField, phoneField, phoneListField, pickableItemChipField, pickableItemListField, propsForFieldConfig, propsValueForFieldConfig, provideDbxForm, provideDbxMutableForm, provideFormlyContext, repeatArrayField, searchableChipField, searchableStringChipField, searchableTextField, sectionWrapper, sortPickableItemsByLabel, stateField, styleWrapper, subsectionWrapper, textAreaField, textEditorField, textField, 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_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, DbxFormFormlyFieldModule, DbxFormFormlyNumberFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySelectionModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyTextFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule, DbxFormInfoWrapperComponent, DbxFormIoModule, DbxFormLayoutModule, DbxFormLoadingSourceDirective, DbxFormModule, DbxFormRepeatArrayTypeComponent, DbxFormSectionWrapperComponent, DbxFormSourceDirective, DbxFormSpacerComponent, DbxFormState, DbxFormSubsectionWrapperComponent, DbxFormToggleWrapperComponent, DbxFormValueChangesDirective, DbxFormWorkingWrapperComponent, DbxFormlyContext, DbxFormlyFieldsContextDirective, DbxFormlyFormComponent, DbxFormlyModule, 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, addWrapperToFormlyFieldConfig, addressField, addressFormlyFields, addressLineField, addressListField, autoTouchWrapper, checkIsFieldFlexLayoutGroupFieldConfig, checkboxField, checklistItemField, chipTextField, cityField, componentField, countryField, dateRangeField, dateTimeField, dbxDateTimeInputValueParseFactory, dbxDateTimeOutputValueFactory, dbxFormSourceObservable, defaultValidationMessages, disableFormlyFieldAutofillAttributes, 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, propsAndConfigForFieldConfig, propsForFieldConfig, propsValueForFieldConfig, provideDbxForm, provideDbxMutableForm, provideFormlyContext, repeatArrayField, searchableChipField, searchableStringChipField, searchableTextField, sectionWrapper, sortPickableItemsByLabel, 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