@dereekb/dbx-form 9.23.20 → 9.23.22

package/fesm2015/dereekb-dbx-form.mjs

@@ -4,9 +4,9 @@ import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 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, isSameMinute, startOfDay, isSameDay, addMinutes, addDays } from 'date-fns';
-import { BehaviorSubject, switchMap, first, exhaustMap, of, catchError, delay, filter, combineLatest, map, distinctUntilChanged, shareReplay, Subject, tap, takeUntil, EMPTY, mergeMap, startWith, debounceTime, skipWhile, scan, interval, merge, throttleTime, timer } from 'rxjs';
-import { LockSet, SubscriptionObject, asObservable, cleanup, loadingStateHasFinishedLoading, switchMapMaybeObs, filterMaybe, switchMapMaybeDefault, SimpleLoadingContext, distinctUntilHasDifferentValues, startWithBeginLoading, mapLoadingStateResults, successResult, ListLoadingStateContextInstance, isListLoadingStateEmpty, LoadingStateContextInstance, loadingStateHasValue, loadingStateIsLoading, beginLoading, mapLoadingStateValueWithOperator, valueFromLoadingState, loadingStateContext, skipFirstMaybe, asyncPusherCache, scanCount } from '@dereekb/rxjs';
+import { isPast, addSeconds, startOfDay, addMinutes, addDays } from 'date-fns';
+import { BehaviorSubject, switchMap, first, exhaustMap, of, catchError, delay, filter, combineLatest, map, distinctUntilChanged, shareReplay, Subject, tap, takeUntil, EMPTY, mergeMap, startWith, debounceTime, skipWhile, scan, combineLatestWith, throttleTime, interval, merge, timer } from 'rxjs';
+import { LockSet, SubscriptionObject, asObservable, cleanup, loadingStateHasFinishedLoading, switchMapMaybeObs, filterMaybe, switchMapMaybeDefault, SimpleLoadingContext, distinctUntilHasDifferentValues, startWithBeginLoading, mapLoadingStateResults, successResult, ListLoadingStateContextInstance, isListLoadingStateEmpty, LoadingStateContextInstance, loadingStateHasValue, loadingStateIsLoading, beginLoading, mapLoadingStateValueWithOperator, valueFromLoadingState, loadingStateContext, skipFirstMaybe, asObservableFromGetter, asyncPusherCache, scanCount } from '@dereekb/rxjs';
 import * as i2 from '@dereekb/dbx-core';
 import { AbstractSubscriptionDirective, safeDetectChanges, DbxInjectionComponentModule, DbxDatePipeModule, mergeDbxInjectionComponentConfigs, tapDetectChanges } from '@dereekb/dbx-core';
 import * as i3 from '@uirouter/core';
@@ -44,7 +44,7 @@ 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, formatToISO8601DayString, formatToISO8601DateString, safeToJsDate, guessCurrentTimezone, toReadableTimeString, utcDayForDate, readableTimeStringToDate, findMinDate, findMaxDate, dateTimeMinuteDecisionFunction, DateTimeMinuteInstance, isSameDateHoursAndMinutes, toLocalReadableTimeString, allTimezoneInfos, timezoneInfoForSystem, searchTimezoneInfos } from '@dereekb/date';
+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 { 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';
@@ -3609,11 +3609,13 @@ var DbxDateTimeValueMode;
      */
     DbxDateTimeValueMode[DbxDateTimeValueMode["DAY_STRING"] = 2] = "DAY_STRING";
 })(DbxDateTimeValueMode || (DbxDateTimeValueMode = {}));
-function dbxDateTimeInputValueParseFactory(mode) {
+function dbxDateTimeInputValueParseFactory(mode, timezoneInstance) {
     let factory;
+    let useTimezoneInstance = true;
     switch (mode) {
         case DbxDateTimeValueMode.DAY_STRING:
             factory = (x) => (typeof x === 'string' ? parseISO8601DayStringToDate(x) : x);
+            useTimezoneInstance = false; // day strings do not use timezones
             break;
         case DbxDateTimeValueMode.DATE_STRING:
         case DbxDateTimeValueMode.DATE:
@@ -3621,22 +3623,40 @@ function dbxDateTimeInputValueParseFactory(mode) {
             factory = (x) => (x != null ? toJsDate(x) : x);
             break;
     }
+    if (timezoneInstance && useTimezoneInstance) {
+        const originalFactory = factory;
+        factory = (input) => {
+            const date = originalFactory(input);
+            const result = date ? timezoneInstance.systemDateToTargetDate(date) : date;
+            return result;
+        };
+    }
     return factory;
 }
-function dbxDateTimeOutputValueFactory(mode) {
+function dbxDateTimeOutputValueFactory(mode, timezoneInstance) {
     let factory;
+    let useTimezoneInstance = true;
     switch (mode) {
-        case DbxDateTimeValueMode.DATE_STRING:
-            factory = (x) => (x != null ? formatToISO8601DateString(x) : x);
-            break;
         case DbxDateTimeValueMode.DAY_STRING:
             factory = (x) => (x != null ? formatToISO8601DayString(x) : x);
+            useTimezoneInstance = false; // day strings do not use timezones
+            break;
+        case DbxDateTimeValueMode.DATE_STRING:
+            factory = (x) => (x != null ? formatToISO8601DateString(x) : x);
             break;
         case DbxDateTimeValueMode.DATE:
         default:
             factory = (x) => x;
             break;
     }
+    if (timezoneInstance && useTimezoneInstance) {
+        const originalFactory = factory;
+        factory = (input) => {
+            const date = input ? timezoneInstance.targetDateToSystemDate(input) : input;
+            const result = originalFactory(date);
+            return result;
+        };
+    }
     return factory;
 }
 function syncConfigValueObs(parseConfigsObs, type) {
@@ -3653,29 +3673,38 @@ function syncConfigValueObs(parseConfigsObs, type) {
         return result;
     }), distinctUntilChanged(), shareReplay(1));
 }
-const TIME_OUTPUT_THROTTLE_TIME = 10; // 10 ms
+function isSameDateTimeFieldValue(a, b) {
+    return a && b ? (typeof a === 'string' ? a === b : isSameDateHoursAndMinutes(a, b)) : a == b;
+}
+const TIME_OUTPUT_THROTTLE_TIME = 10;
 class DbxDateTimeFieldComponent extends FieldType$1 {
     constructor(cdRef) {
         super();
         this.cdRef = cdRef;
         this._sub = new SubscriptionObject();
         this._valueSub = new SubscriptionObject();
+        this._defaultTimezone = new BehaviorSubject(undefined);
+        this._customTimezone = new BehaviorSubject(undefined);
         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.value$ = this.formControl$.pipe(switchMap((control) => control.valueChanges.pipe(startWith(control.value), map(dbxDateTimeInputValueParseFactory(this.valueMode)))), distinctUntilChanged((a, b) => (a != null && b != null ? isSameMinute(a, b) : a === b)), shareReplay(1));
+        this.timezone$ = combineLatest([this._defaultTimezone.pipe(switchMapMaybeDefault(), distinctUntilChanged()), this._customTimezone]).pipe(map(([defaultTimezone, customTimezone]) => {
+            var _a;
+            return (_a = customTimezone !== null && customTimezone !== void 0 ? customTimezone : defaultTimezone) !== null && _a !== void 0 ? _a : guessCurrentTimezone();
+        }), distinctUntilChanged(), shareReplay(1));
+        this.timezoneInstance$ = this.timezone$.pipe(map((timezone) => (Boolean(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
+        distinctUntilChanged(isSameDateHoursAndMinutes), shareReplay(1));
         /**
          * Used to trigger/display visual updates (specifically on timeDistance, etc.).
          */
-        this.displayValue$ = interval(10 * 1000).pipe(startWith(0), map(() => new Date().getMinutes()), distinctUntilChanged(), tap(() => this.cdRef.markForCheck()), switchMap(() => this.value$), shareReplay(1));
-        this.timeString$ = this.value$.pipe(filterMaybe(), map((x) => {
-            const timezone = guessCurrentTimezone();
-            const timeString = toReadableTimeString(x, timezone);
-            return timeString;
-        }));
+        this.displayValue$ = interval(10 * 1000).pipe(startWith(0), map(() => new Date().getMinutes()), distinctUntilChanged(), tap(() => this.cdRef.markForCheck()), switchMap(() => this.valueInSystemTimezone$), shareReplay(1));
+        this.timeString$ = this.valueInSystemTimezone$.pipe(map((x) => (x ? toLocalReadableTimeString(x) : '')), distinctUntilChanged(), shareReplay(1));
         this.dateInputCtrl = new FormControl(new Date(), {
             validators: []
         });
@@ -3688,7 +3717,8 @@ class DbxDateTimeFieldComponent extends FieldType$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));
         this.date$ = this.dateInputCtrl.valueChanges.pipe(startWith(this.dateInputCtrl.value), filterMaybe(), shareReplay(1));
-        this.dateValue$ = merge(this.date$, this.value$.pipe(skipFirstMaybe())).pipe(map((x) => (x ? startOfDay(x) : null)), distinctUntilChanged((a, b) => a != null && b != null && isSameDay(a, b)), shareReplay(1));
+        this.timezoneAbbreviation$ = combineLatest([this.date$, this.timezone$]).pipe(map(([date, timezone]) => getTimezoneAbbreviation(timezone, date)), distinctUntilChanged(), shareReplay(1));
+        this.dateValue$ = merge(this.date$, this.valueInSystemTimezone$.pipe(skipFirstMaybe())).pipe(map((x) => (x ? startOfDay(x) : null)), distinctUntilChanged(isSameDateDay), shareReplay(1));
         this.timeInput$ = this._updateTime.pipe(debounceTime(5), map(() => this.timeInputCtrl.value || ''), distinctUntilChanged());
         this.syncConfigObs$ = this._syncConfigObs.pipe(switchMapMaybeDefault(), shareReplay(1));
         this.parsedSyncConfigs$ = this.syncConfigObs$.pipe(map((x) => {
@@ -3717,6 +3747,9 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
         this.rawDateTime$ = combineLatest([this.dateValue$, this.timeInput$.pipe(startWith(null)), this.fullDay$]).pipe(map(([date, timeString, fullDay]) => {
             var _a;
             let result;
+            if (!date && this.timeOnly) {
+                date = new Date();
+            }
             if (date) {
                 if (fullDay) {
                     if (this.dateTimeField.fullDayInUTC) {
@@ -3738,7 +3771,7 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
                 }
             }
             return result;
-        }), distinctUntilChanged((a, b) => a != null && b != null && isSameMinute(a, b)), shareReplay(1));
+        }), distinctUntilChanged(isSameDateHoursAndMinutes), shareReplay(1));
         this.config$ = combineLatest([this._config.pipe(switchMapMaybeDefault(), shareReplay(1)), this.dateInputMin$, this.dateInputMax$]).pipe(map(([x, dateInputMin, dateInputMax]) => {
             var _a;
             let result = x;
@@ -3824,18 +3857,26 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
         var _a;
         return (_a = this.field.props.hideDatePicker) !== null && _a !== void 0 ? _a : false;
     }
+    get timezone() {
+        return this.field.props.timezone;
+    }
+    get showTimezone() {
+        var _a;
+        return (_a = this.field.props.showTimezone) !== null && _a !== void 0 ? _a : true;
+    }
+    get allowChangeTimezone() {
+        return false; // unused
+    }
     ngOnInit() {
         var _a, _b, _c, _d;
         this._formControlObs.next(this.formControl);
         this._config.next((_b = (_a = this.dateTimeField).getConfigObs) === null || _b === void 0 ? void 0 : _b.call(_a));
         this._syncConfigObs.next((_d = (_c = this.dateTimeField).getSyncFieldsObs) === null || _d === void 0 ? void 0 : _d.call(_c));
-        const valueFactory = dbxDateTimeOutputValueFactory(this.valueMode);
-        this._sub.subscription = this.value$
-            .pipe(switchMap(() => {
-            return this.timeOutput$.pipe(throttleTime(TIME_OUTPUT_THROTTLE_TIME * 2, undefined, { leading: false, trailing: true }), skipFirstMaybe());
-        }), distinctUntilChanged(isSameDateHoursAndMinutes))
-            .subscribe((dateValue) => {
-            const value = valueFactory(dateValue);
+        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)));
+        }))
+            .subscribe((value) => {
             this.formControl.setValue(value);
             this.formControl.markAsDirty();
             this.formControl.markAsTouched();
@@ -3847,6 +3888,10 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
             }
             this.setTime(x);
         });
+        // Set default timezone if provided.
+        if (this.timezone && !this.dateTimeField.fullDayInUTC) {
+            this._defaultTimezone.next(asObservableFromGetter(this.timezone));
+        }
         // Watch for disabled changes so we can propogate them properly.
         this.formControl.registerOnDisabledChange((disabled) => {
             if (disabled) {
@@ -3886,6 +3931,8 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
     }
     ngOnDestroy() {
         super.ngOnDestroy();
+        this._defaultTimezone.complete();
+        this._customTimezone.complete();
         this._fullDayControlObs.complete();
         this._offset.complete();
         this._formControlObs.complete();
@@ -3904,14 +3951,17 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
     setLogicalTime(time) {
         const date = dateFromLogicalDate(time);
         if (date) {
-            const timeString = toLocalReadableTimeString(date);
-            this.setTime(timeString);
+            this.setTimeFromDate(date);
         }
     }
     setDateInputValue(date) {
         this.dateInputCtrl.setValue(date);
         this._updateTime.next();
     }
+    setTimeFromDate(timeDate) {
+        const timeString = toLocalReadableTimeString(timeDate);
+        this.setTime(timeString);
+    }
     setTime(time) {
         this.timeInputCtrl.setValue(time);
         this._offset.next(0);
@@ -3990,10 +4040,10 @@ 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' }} ({{ displayValue$ | async | dateDistance }})\n      </small>\n      <small *ngSwitchCase=\"false\">\n        <ng-container *ngIf=\"value$ | async\">\n          <b class=\"dbx-ok\">{{ atTimeLabel }}</b>\n          {{ displayValue$ | async | date: 'medium' }} ({{ displayValue$ | async | timeDistance }})\n        </ng-container>\n      </small>\n    </div>\n  </div>\n</div>\n\n<!-- Date Input Template -->\n<ng-template #dateInputTemplate>\n  <button 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  </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  </mat-form-field>\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: 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.TimeDistancePipe, name: "timeDistance" }, { kind: "pipe", type: i2.DateDistancePipe, name: "dateDistance" }] });
+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" }] });
 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' }} ({{ displayValue$ | async | dateDistance }})\n      </small>\n      <small *ngSwitchCase=\"false\">\n        <ng-container *ngIf=\"value$ | async\">\n          <b class=\"dbx-ok\">{{ atTimeLabel }}</b>\n          {{ displayValue$ | async | date: 'medium' }} ({{ displayValue$ | async | timeDistance }})\n        </ng-container>\n      </small>\n    </div>\n  </div>\n</div>\n\n<!-- Date Input Template -->\n<ng-template #dateInputTemplate>\n  <button 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  </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  </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    <!-- 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 }]; } });
 
 class DbxFormFormlyDateFieldModule {
@@ -4071,13 +4121,15 @@ function timeOnlyField(config = {}) {
     return dateTimeField(Object.assign(Object.assign({}, config), { timeMode: DbxDateTimeFieldTimeMode.REQUIRED, timeOnly: true }));
 }
 function dateTimeField(config = {}) {
-    const { key = 'date', dateLabel, timeLabel, allDayLabel, atTimeLabel, 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, getConfigObs, getSyncFieldsObs, hideDatePicker, hideDateHint, timeOnly = false, materialFormField } = config;
     const fieldConfig = formlyField(Object.assign({ key, type: 'datetime' }, propsAndConfigForFieldConfig(config, Object.assign(Object.assign({}, materialFormField), { appearance: 'standard', dateLabel,
         timeLabel,
         allDayLabel,
         atTimeLabel,
         valueMode,
-        timeOnly, timeMode: timeOnly ? DbxDateTimeFieldTimeMode.REQUIRED : timeMode, fullDayFieldName,
+        timeOnly, timeMode: timeOnly ? DbxDateTimeFieldTimeMode.REQUIRED : timeMode, timezone,
+        showTimezone,
+        fullDayFieldName,
         fullDayInUTC,
         hideDatePicker,
         hideDateHint,
@@ -4089,12 +4141,16 @@ function dateTimeField(config = {}) {
 }
 function dateRangeField(config = {}) {
     var _a, _b, _c;
-    const { required: inputRequired, start, end } = config;
+    const { required: inputRequired, start, end, timezone, showTimezone } = config;
     const required = (_a = inputRequired !== null && inputRequired !== void 0 ? inputRequired : start === null || start === void 0 ? void 0 : start.required) !== null && _a !== void 0 ? _a : false;
     const startFieldKey = (_b = start === null || start === void 0 ? void 0 : start.key) !== null && _b !== void 0 ? _b : 'start';
     const endFieldKey = (_c = end === null || end === void 0 ? void 0 : end.key) !== null && _c !== void 0 ? _c : 'end';
-    const startField = dateTimeField(Object.assign(Object.assign({ dateLabel: 'Start' }, start), { timeMode: DbxDateTimeFieldTimeMode.NONE, getSyncFieldsObs: () => of([{ syncWith: endFieldKey, syncType: 'after' }]), required, key: startFieldKey }));
-    const endField = dateTimeField(Object.assign(Object.assign({ dateLabel: 'End' }, end), { timeMode: DbxDateTimeFieldTimeMode.NONE, getSyncFieldsObs: () => of([{ syncWith: startFieldKey, syncType: 'before' }]), required, key: endFieldKey }));
+    const startField = dateTimeField(Object.assign(Object.assign({ dateLabel: 'Start', timeMode: DbxDateTimeFieldTimeMode.NONE, getSyncFieldsObs: () => of([{ syncWith: endFieldKey, syncType: 'after' }]) }, start), { timezone,
+        showTimezone,
+        required, key: startFieldKey }));
+    const endField = dateTimeField(Object.assign(Object.assign({ dateLabel: 'End', timeMode: DbxDateTimeFieldTimeMode.NONE, getSyncFieldsObs: () => of([{ syncWith: startFieldKey, syncType: 'before' }]) }, end), { timezone,
+        showTimezone,
+        required, key: endFieldKey }));
     return {
         key: undefined,
         fieldGroup: [flexLayoutWrapper([startField, endField], { size: 1, relative: true })]
@@ -4102,15 +4158,17 @@ function dateRangeField(config = {}) {
 }
 function dateTimeRangeField(inputConfig = {}) {
     var _a, _b;
-    const { required = false, start: inputStart, end: inputEnd } = inputConfig;
+    const { required = false, start: inputStart, end: inputEnd, timezone, showTimezone } = inputConfig;
     function dateTimeRangeFieldConfig(config) {
-        return Object.assign(Object.assign({}, config), { required, timeOnly: true, hideDateHint: true });
+        return Object.assign(Object.assign({}, config), { required, timeMode: DbxDateTimeFieldTimeMode.REQUIRED, getSyncFieldsObs: undefined, timeOnly: true, hideDateHint: true });
     }
     const startKey = (_a = inputStart === null || inputStart === void 0 ? void 0 : inputStart.key) !== null && _a !== void 0 ? _a : 'start';
     const endKey = (_b = inputEnd === null || inputEnd === void 0 ? void 0 : inputEnd.key) !== null && _b !== void 0 ? _b : 'end';
     const start = Object.assign(Object.assign({ label: 'Start Time' }, dateTimeRangeFieldConfig(inputStart)), { key: startKey });
     const end = Object.assign(Object.assign({ label: 'End Time' }, dateTimeRangeFieldConfig(inputEnd)), { key: endKey });
     const config = {
+        timezone,
+        showTimezone,
         start,
         end
     };
@@ -4888,9 +4946,7 @@ class DbxFormlyFormComponent extends AbstractSubscriptionDirective {
             else {
                 return of(state);
             }
-        })
-        // tapLog('Change: ')
-        )), shareReplay(1));
+        }))), shareReplay(1));
     }
     ngOnInit() {
         this.context.setDelegate(this);
@@ -5203,18 +5259,23 @@ function timezoneStringSearchFunction() {
     };
 }
 const DISPLAY_FOR_TIMEZONE_STRING_VALUE = (values) => {
-    const displayValues = values.map((x) => { var _a, _b; return (Object.assign(Object.assign({}, x), { label: x.value, sublabel: (_b = (_a = x.meta) === null || _a === void 0 ? void 0 : _a.abbreviation) !== null && _b !== void 0 ? _b : 'Unknown' })); });
+    const timezoneInfos = allTimezoneInfos();
+    const displayValues = values.map((x) => {
+        var _a, _b;
+        const meta = (_a = x.meta) !== null && _a !== void 0 ? _a : timezoneInfos.find((y) => x.value === y.timezone); // attempt to find the metadata in the timeInfos if it isn't provided.
+        return Object.assign(Object.assign({}, x), { label: x.value, sublabel: (_b = meta === null || meta === void 0 ? void 0 : meta.abbreviation) !== null && _b !== void 0 ? _b : 'Unknown' });
+    });
     const obs = of(displayValues);
     return obs;
 };
 /**
- * Template for login field that takes in a username and password.
+ * Template for a searchable text field for a timezone.
  *
  * @param param0
  * @returns
  */
 function timezoneStringField(config = {}) {
-    return searchableTextField(Object.assign(Object.assign({ key: 'timezone', label: 'Timezone', asArrayValue: false }, config), { searchOnEmptyText: true, search: timezoneStringSearchFunction(), displayForValue: DISPLAY_FOR_TIMEZONE_STRING_VALUE }));
+    return searchableTextField(Object.assign(Object.assign({ key: 'timezone', label: 'Timezone', asArrayValue: false, required: false }, config), { searchOnEmptyText: true, allowStringValues: false, showClearValue: true, search: timezoneStringSearchFunction(), displayForValue: DISPLAY_FOR_TIMEZONE_STRING_VALUE }));
 }
 
 /**