@dereekb/dbx-form 9.23.20 → 9.23.22

package/lib/formly/_formly.scss

@@ -8,6 +8,11 @@
   .mat-form-field-appearance-standard .mat-form-field-appearance-outline .mat-form-field-flex {
     padding-top: unset;
   }
+
+  .mat-form-field-appearance-standard .mat-form-field-appearance-outline .mat-form-field-prefix,
+  .mat-form-field-appearance-standard .mat-form-field-appearance-outline .mat-form-field-suffix {
+    top: unset;
+  }
 }
 
 @mixin color($theme-config) {

package/lib/formly/field/value/date/_date.scss

@@ -9,6 +9,8 @@ $dbx-datetime-row-width: 40px + ($dbx-datetime-button-spacing * 2); // times 2 f
 // MARK: Mixin
 @mixin core() {
   .dbx-mat-form-date-time-field-wrapper {
+    padding-top: 10px; // padding for label
+
     > formly-wrapper-mat-form-field {
       > .mat-form-field > .mat-form-field-wrapper {
         > .mat-form-field-flex {
@@ -36,6 +38,15 @@ $dbx-datetime-row-width: 40px + ($dbx-datetime-button-spacing * 2); // times 2 f
 
   .dbx-datetime-field {
     width: 100%;
+
+    .dbx-datetime-timezone {
+      padding: 0 6px;
+      pointer-events: none;
+    }
+
+    .dbx-datetime-timezone-button .mat-button {
+      font-size: 18px;
+    }
   }
 
   .dbx-datetime-row {

package/lib/formly/field/value/date/datetime.field.component.d.ts

@@ -1,11 +1,12 @@
-import { LogicalDateStringCode, Maybe, ReadableTimeString, ArrayOrValue, ISO8601DateString, DecisionFunction } from '@dereekb/util';
-import { DateTimeMinuteConfig } from '@dereekb/date';
+import { LogicalDateStringCode, Maybe, ReadableTimeString, ArrayOrValue, ISO8601DateString, DecisionFunction, TimezoneString } from '@dereekb/util';
+import { DateTimeMinuteConfig, DateTimezoneUtcNormalInstance } from '@dereekb/date';
 import { Observable } from 'rxjs';
 import { ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
 import { AbstractControl, FormControl } from '@angular/forms';
 import { FieldType } from '@ngx-formly/material';
 import { FieldTypeConfig, FormlyFieldProps } from '@ngx-formly/core';
 import { MatDatepickerInputEvent } from '@angular/material/datepicker';
+import { ObservableOrValueGetter } from '@dereekb/rxjs';
 import * as i0 from "@angular/core";
 export declare enum DbxDateTimeFieldTimeMode {
     /**
@@ -35,8 +36,8 @@ export declare enum DbxDateTimeValueMode {
      */
     DAY_STRING = 2
 }
-export declare function dbxDateTimeInputValueParseFactory(mode: DbxDateTimeValueMode): (date: Maybe<Date | string>) => Maybe<Date>;
-export declare function dbxDateTimeOutputValueFactory(mode: DbxDateTimeValueMode): (date: Maybe<Date>) => Maybe<Date | string>;
+export declare function dbxDateTimeInputValueParseFactory(mode: DbxDateTimeValueMode, timezoneInstance: Maybe<DateTimezoneUtcNormalInstance>): (date: Maybe<Date | string>) => Maybe<Date>;
+export declare function dbxDateTimeOutputValueFactory(mode: DbxDateTimeValueMode, timezoneInstance: Maybe<DateTimezoneUtcNormalInstance>): (date: Maybe<Date>) => Maybe<Date | string>;
 export declare type DateTimePickerConfiguration = Omit<DateTimeMinuteConfig, 'date'>;
 export declare type DbxDateTimeFieldSyncType = 'before' | 'after';
 export interface DbxDateTimeFieldSyncField {
@@ -101,7 +102,7 @@ export interface DbxDateTimeFieldProps extends FormlyFieldProps {
     /**
      * Whether or not ot hide the date hint info content.
      *
-     * False by  default
+     * False by default
      */
     hideDateHint?: boolean;
     /**
@@ -116,6 +117,16 @@ export interface DbxDateTimeFieldProps extends FormlyFieldProps {
      * Used for syncing with one or more fields with a Date value.
      */
     getSyncFieldsObs?: () => Observable<ArrayOrValue<DbxDateTimeFieldSyncField>>;
+    /**
+     * (Optional) The input timezone to default to.
+     *
+     * Ignored if fullDayInUTC is true.
+     */
+    timezone?: Maybe<ObservableOrValueGetter<Maybe<TimezoneString>>>;
+    /**
+     * Whether or not to display the timezone. True by default.
+     */
+    showTimezone?: boolean;
 }
 export interface DbxDateTimeFieldSyncParsedField extends Pick<DbxDateTimeFieldSyncField, 'syncType'> {
     control: AbstractControl<Maybe<Date | ISO8601DateString>>;
@@ -125,19 +136,23 @@ export declare class DbxDateTimeFieldComponent extends FieldType<FieldTypeConfig
     private readonly cdRef;
     private _sub;
     private _valueSub;
+    private _defaultTimezone;
+    private _customTimezone;
     private _fullDayInputCtrl?;
     private _fullDayControlObs;
-    readonly fullDayControl$: Observable<AbstractControl<any, any>>;
+    readonly fullDayControl$: Observable<AbstractControl<boolean, boolean>>;
     private _offset;
     private _formControlObs;
-    readonly formControl$: Observable<AbstractControl<any, any>>;
+    readonly formControl$: Observable<AbstractControl<Maybe<Date>, Maybe<Date>>>;
     private _updateTime;
-    readonly value$: Observable<Maybe<Date>>;
+    readonly timezone$: Observable<Maybe<TimezoneString>>;
+    readonly timezoneInstance$: Observable<Maybe<DateTimezoneUtcNormalInstance>>;
+    readonly valueInSystemTimezone$: Observable<Maybe<Date>>;
     /**
      * Used to trigger/display visual updates (specifically on timeDistance, etc.).
      */
     readonly displayValue$: Observable<Maybe<Date>>;
-    readonly timeString$: Observable<ReadableTimeString>;
+    readonly timeString$: Observable<ReadableTimeString | ''>;
     readonly dateInputCtrl: FormControl<Date | null>;
     readonly timeInputCtrl: FormControl<string | null>;
     private _config;
@@ -155,11 +170,15 @@ export declare class DbxDateTimeFieldComponent extends FieldType<FieldTypeConfig
     get description(): Maybe<string>;
     get hideDateHint(): boolean;
     get hideDatePicker(): boolean;
+    get timezone(): Maybe<ObservableOrValueGetter<Maybe<string>>>;
+    get showTimezone(): boolean;
+    get allowChangeTimezone(): boolean;
     readonly fullDay$: Observable<boolean>;
     readonly showTimeInput$: Observable<boolean>;
     readonly showAddTime$: Observable<boolean>;
     readonly date$: Observable<Date>;
-    readonly dateValue$: Observable<Date | null>;
+    readonly timezoneAbbreviation$: Observable<string>;
+    readonly dateValue$: Observable<Maybe<Date>>;
     readonly timeInput$: Observable<ReadableTimeString>;
     readonly syncConfigObs$: Observable<Maybe<DbxDateTimeFieldSyncField | DbxDateTimeFieldSyncField[]>>;
     readonly parsedSyncConfigs$: Observable<DbxDateTimeFieldSyncParsedField[]>;
@@ -178,6 +197,7 @@ export declare class DbxDateTimeFieldComponent extends FieldType<FieldTypeConfig
     datePicked(event: MatDatepickerInputEvent<Date>): void;
     setLogicalTime(time: LogicalDateStringCode): void;
     setDateInputValue(date: Date): void;
+    setTimeFromDate(timeDate: Date): void;
     setTime(time: ReadableTimeString): void;
     keydownOnDateInput(event: KeyboardEvent): void;
     keydownOnTimeInput(event: KeyboardEvent): void;

package/lib/formly/field/value/date/datetime.field.d.ts

@@ -11,15 +11,15 @@ export declare const TAKE_NEXT_UPCOMING_TIME_CONFIG_OBS: () => Observable<DateTi
  */
 export declare function timeOnlyField(config?: Partial<TimeFieldConfig>): FormlyFieldConfig;
 export declare function dateTimeField(config?: Partial<DateTimeFieldConfig>): import("../../wrapper/wrapper").WrapperFormlyFieldConfig<import("../../wrapper/style.wrapper.component").DbxFormStyleWrapperConfig, FormlyFieldConfig<DbxDateTimeFieldProps>>;
-export declare type DateDateRangeFieldDateConfig = Omit<DateTimeFieldConfig, 'dateLabel' | 'timeOnly' | 'timeMode' | 'getSyncFieldsObs'>;
-export interface DateDateRangeFieldConfig {
+export declare type DateDateRangeFieldDateConfig = Omit<DateTimeFieldConfig, 'dateLabel' | 'timeOnly' | 'timeMode' | 'getSyncFieldsObs' | 'timezone' | 'showTimezone'>;
+export interface DateDateRangeFieldConfig extends Pick<DateTimeFieldConfig, 'timezone' | 'showTimezone'> {
     required?: boolean;
     start?: Partial<DateDateRangeFieldDateConfig>;
     end?: Partial<DateDateRangeFieldDateConfig>;
 }
 export declare function dateRangeField(config?: DateDateRangeFieldConfig): FormlyFieldConfig;
-export declare type DateTimeRangeFieldTimeConfig = Omit<DateDateRangeFieldDateConfig, 'allDayLabel' | 'fullDayFieldName' | 'fullDayInUTC'>;
-export interface DateDateTimeRangeFieldConfig {
+export declare type DateTimeRangeFieldTimeConfig = Omit<DateDateRangeFieldDateConfig, 'allDayLabel' | 'fullDayFieldName' | 'fullDayInUTC' | 'timezone' | 'showTimezone'>;
+export interface DateDateTimeRangeFieldConfig extends Pick<DateTimeFieldConfig, 'timezone' | 'showTimezone'> {
     required?: boolean;
     start?: Partial<DateTimeRangeFieldTimeConfig>;
     end?: Partial<DateTimeRangeFieldTimeConfig>;

package/lib/formly/template/timezone.d.ts

@@ -12,7 +12,7 @@ export declare const DISPLAY_FOR_TIMEZONE_STRING_VALUE: SearchableValueFieldDisp
 export interface TimezoneStringFieldConfig extends Omit<SearchableTextFieldConfig<TimezoneString, TimezoneInfo>, 'inputType' | 'searchOnEmptyText' | 'search' | 'displayForValue' | 'key'>, Partial<Pick<SearchableTextFieldConfig<TimezoneString, TimezoneInfo>, 'key' | 'materialFormField'>> {
 }
 /**
- * Template for login field that takes in a username and password.
+ * Template for a searchable text field for a timezone.
  *
  * @param param0
  * @returns

package/mapbox/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@dereekb/dbx-form/mapbox",
-  "version": "9.23.20",
+  "version": "9.23.22",
   "peerDependencies": {
     "@angular/common": "^14.1.0",
     "@angular/core": "^14.1.0",
     "@angular/forms": "^14.2.0",
-    "@dereekb/dbx-web": "9.23.20",
+    "@dereekb/dbx-web": "9.23.22",
     "@ngx-formly/core": "^6.0.0",
     "@ngx-formly/material": "^6.0.0",
     "@ng-web-apis/geolocation": "^2.0.0",
     "mapbox-gl": "^2.9.2",
-    "@dereekb/dbx-web/mapbox": "9.23.20",
-    "@dereekb/dbx-form": "9.23.20"
+    "@dereekb/dbx-web/mapbox": "9.23.22",
+    "@dereekb/dbx-form": "9.23.22"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@dereekb/dbx-form",
-  "version": "9.23.20",
+  "version": "9.23.22",
   "peerDependencies": {
     "@angular/common": "^14.0.0",
     "@angular/core": "^14.0.0",
     "lodash.clonedeep": "^4.5.0",
-    "@dereekb/dbx-core": "9.23.20",
+    "@dereekb/dbx-core": "9.23.22",
     "@angular/material": "^14.2.0",
-    "@dereekb/dbx-web": "9.23.20",
+    "@dereekb/dbx-web": "9.23.22",
     "@angular/forms": "^14.2.0",
     "@ngx-formly/core": "^6.0.0",
     "@ngx-formly/material": "^6.0.0",
     "ngx-editor": "^15.0.0",
     "ngx-mat-intl-tel-input": "^5.0.0",
-    "@dereekb/model": "9.23.20"
+    "@dereekb/model": "9.23.22"
   },
   "dependencies": {
     "tslib": "^2.3.0"