@dereekb/dbx-form 9.24.17 → 9.24.19

package/lib/extension/calendar/_calendar.scss

@@ -52,6 +52,8 @@
   }
 
   .dbx-schedule-selection-calendar-date-range-field {
+    width: 100%;
+
     &.mat-form-field-type-mat-date-range-input .mat-form-field-infix {
       display: flex;
 
@@ -74,6 +76,10 @@
     }
   }
 
+  .dbx-schedule-selection-calendar-date-range-field-content {
+    width: 100%;
+  }
+
   .dbx-schedule-selection-calendar-cell {
     display: flex;
     min-height: 56px;

package/lib/formly/config/validation.d.ts

@@ -16,4 +16,8 @@ export declare const INVALID_PHONE_NUMBER_MESSAGE: {
     name: string;
     message: string;
 };
+export declare const INVALID_PHONE_NUMBER_EXTENSION_MESSAGE: {
+    name: string;
+    message: string;
+};
 export declare function defaultValidationMessages(): ValidationMessageOption[];

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

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../../../../style/theming';
 
 // MARK: Variables
@@ -50,6 +51,10 @@ $dbx-datetime-row-width: 40px + ($dbx-datetime-button-spacing * 2); // times 2 f
   }
 
   .dbx-datetime-row {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
     .dbx-datetime-row-field {
       width: calc(100% - #{$dbx-datetime-button-width});
     }
@@ -113,11 +118,24 @@ $dbx-datetime-row-width: 40px + ($dbx-datetime-button-spacing * 2); // times 2 f
   }
 
   .dbx-form-fixed-date-range-field-wrapper .mat-form-field-appearance-outline .mat-form-field-infix {
+    padding: 4px 0;
+  }
+
+  .dbx-form-fixed-date-range-field-wrapper .mat-form-field-appearance-outline > .mat-form-field-wrapper > .mat-form-field-flex > .mat-form-field-infix {
     padding: 0;
   }
 }
 
 @mixin color($theme-config) {
+  $color-config: theming.get-color-config($theme-config);
+  $background: map.get($color-config, 'background');
+  $background-color: theming.get-color-from-palette($background, 'hover');
+
+  // affect both the direct button or a child button
+  .mat-datepicker-button-highlight .mat-icon-button,
+  .mat-datepicker-button-highlight.mat-icon-button {
+    background-color: rgba($background-color, 0.08);
+  }
 }
 
 @mixin typography($typography-config) {

package/lib/formly/field/value/phone/_phone.scss

@@ -7,22 +7,22 @@
 
 // MARK: Mixin
 @mixin core() {
-  .dbx-form-phone-field,
-  .mat-form-field {
+  .dbx-form-phone-field {
     width: 100%;
+    display: flex;
   }
 
-  .mat-form-field {
-    margin-top: 1px;
-
-    button.country-selector {
-      opacity: 100;
-      width: 105px;
-    }
+  .dbx-form-phone-field-phone-content button.country-selector {
+    opacity: 100;
+    width: 105px;
   }
 
   .dbx-form-phone-field .ngx-mat-tel-input-container input:not(.country-search) {
-    padding: 0 6px 0 110px;
+    padding: 2px 6px 0 110px;
+  }
+
+  .dbx-form-phone-field-extension-input {
+    border: 0;
   }
 }
 
@@ -31,10 +31,19 @@
   $background: map.get($color-config, 'background');
   $foreground: map.get($color-config, 'foreground');
   $text-color: theming.get-color-from-palette($foreground, 'text');
+  $border-color: theming.get-color-from-palette($foreground, 'divider');
+
+  .dbx-form-phone-field {
+    .country-selector.mat-button,
+    .country-list-button.mat-menu-item {
+      color: $text-color;
+    }
+  }
 
-  .country-selector.mat-button,
-  .country-list-button.mat-menu-item {
-    color: $text-color;
+  .dbx-form-phone-field-extension-input {
+    border: 0;
+    border-bottom: 1px solid $border-color;
+    background: none;
   }
 }
 

package/lib/formly/field/value/phone/phone.field.component.d.ts

@@ -1,15 +1,34 @@
 import { FieldType } from '@ngx-formly/material';
 import { FieldTypeConfig, FormlyFieldProps } from '@ngx-formly/core';
 import { Maybe } from '@dereekb/util';
+import { FormControl, FormGroup } from '@angular/forms';
+import { SubscriptionObject } from '@dereekb/rxjs';
 import * as i0 from "@angular/core";
 export interface InternationalPhoneFormlyFieldProps extends FormlyFieldProps {
     preferredCountries?: Maybe<string[]>;
     onlyCountries?: Maybe<string[]>;
+    /**
+     * Whether or not to allow adding an extension. False by default.
+     */
+    allowExtension?: boolean;
 }
 export declare const DEFAULT_PREFERRED_COUNTRIES: string[];
 export declare class DbxPhoneFieldComponent extends FieldType<FieldTypeConfig<InternationalPhoneFormlyFieldProps>> {
+    readonly inputSync: SubscriptionObject;
+    readonly outputSync: SubscriptionObject;
+    readonly extensionErrorSync: SubscriptionObject;
+    readonly phoneErrorSync: SubscriptionObject;
+    readonly phoneCtrl: FormControl<string | null>;
+    readonly extensionCtrl: FormControl<string | null>;
+    readonly inputFormGroup: FormGroup<{
+        phone: FormControl<string | null>;
+        extension: FormControl<string | null>;
+    }>;
     get preferredCountries(): string[];
     get onlyCountries(): string[];
+    get allowExtension(): boolean;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxPhoneFieldComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DbxPhoneFieldComponent, "ng-component", never, {}, {}, never, never, false>;
 }

package/lib/validator/index.d.ts

@@ -3,3 +3,4 @@ export * from './email';
 export * from './field';
 export * from './number';
 export * from './available';
+export * from './phone';

package/lib/validator/phone.d.ts

@@ -0,0 +1,16 @@
+import { ValidatorFn } from '@angular/forms';
+/**
+ * Angular Form ValidationFn for checking isE164PhoneNumber the input divisor.
+ *
+ * @param divisor
+ * @returns
+ */
+export declare function isE164PhoneNumber(allowExtension: boolean): ValidatorFn;
+/**
+ * Angular Form ValidationFn for checking the input is a valid phone extension. Empty values return true.
+ *
+ * @param divisor
+ * @returns
+ */
+export declare function isPhoneExtension(): ValidatorFn;
+export declare function isE164PhoneNumberWithValidExtension(): ValidatorFn;

package/mapbox/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@dereekb/dbx-form/mapbox",
-  "version": "9.24.17",
+  "version": "9.24.19",
   "peerDependencies": {
     "@angular/common": "^14.1.0",
     "@angular/core": "^14.1.0",
     "@angular/forms": "^14.2.0",
-    "@dereekb/dbx-web": "9.24.17",
+    "@dereekb/dbx-web": "9.24.19",
     "@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.24.17",
-    "@dereekb/dbx-form": "9.24.17"
+    "@dereekb/dbx-web/mapbox": "9.24.19",
+    "@dereekb/dbx-form": "9.24.19"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@dereekb/dbx-form",
-  "version": "9.24.17",
+  "version": "9.24.19",
   "peerDependencies": {
     "@angular/common": "^14.0.0",
     "@angular/core": "^14.0.0",
     "lodash.clonedeep": "^4.5.0",
-    "@dereekb/dbx-core": "9.24.17",
+    "@dereekb/dbx-core": "9.24.19",
     "@angular/material": "^14.2.0",
-    "@dereekb/dbx-web": "9.24.17",
+    "@dereekb/dbx-web": "9.24.19",
     "@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.24.17"
+    "@dereekb/model": "9.24.19"
   },
   "dependencies": {
     "tslib": "^2.3.0"