@dereekb/dbx-form 9.24.16 → 9.24.18

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;
@@ -103,6 +109,13 @@
 }
 
 @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');
+
+  .dbx-schedule-selection-calendar-date-range-field .mat-datepicker-toggle .mat-icon-button {
+    background-color: rgba($background-color, 0.08);
+  }
 }
 
 @mixin typography($typography-config) {

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

@@ -113,6 +113,10 @@ $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;
   }
 }

package/lib/formly/field/value/number/number.field.d.ts

@@ -13,6 +13,33 @@ export interface NumberFieldConfig extends LabeledFieldConfig, DescriptionFieldC
 }
 export declare function numberFieldTransformParser(config: Partial<FieldConfigParsersRef> & Partial<TransformNumberFunctionConfigRef>): FormlyValueParser<any, any>[] | undefined;
 export declare function numberField(config: NumberFieldConfig): FormlyFieldConfig;
+export interface NumberSliderFieldConfig extends NumberFieldConfig {
+    /**
+     * Max value. Required for the slider.
+     */
+    max: number;
+    /**
+     * Whether or not to show the thumb label while sliding. Defaults to true.
+     */
+    thumbLabel?: boolean;
+    /**
+     * Whether or not to invert the selection line.
+     */
+    invertSelectionColoring?: boolean;
+    /**
+     * Tick interval. If not provided defaults to the step value, if provided. If false, the ticks are disabled.
+     *
+     * The tick interval is the number of "steps" to show between ticks.
+     *
+     * For example, a tick interval of 5 show a tick every 5 steps. If steps are 10, it will show a tick at every number divisible by 50 (5 * 10).
+     */
+    tickInterval?: false | number;
+    /**
+     * Custom display with function for the thumbLabel.
+     */
+    displayWith?: (value: number) => string;
+}
+export declare function numberSliderField(config: NumberSliderFieldConfig): FormlyFieldConfig;
 export declare type DollarAmountFieldConfig = Omit<NumberFieldConfig, 'roundToStep' | 'precision'>;
 export declare function dollarAmountField(config: DollarAmountFieldConfig): FormlyFieldConfig<import("@ngx-formly/core").FormlyFieldProps & {
     [additionalProperties: string]: any;

package/lib/formly/field/value/number/number.field.module.d.ts

@@ -1,8 +1,9 @@
 import * as i0 from "@angular/core";
 import * as i1 from "@ngx-formly/material";
-import * as i2 from "../../wrapper/form.wrapper.module";
+import * as i2 from "@ngx-formly/material/slider";
+import * as i3 from "../../wrapper/form.wrapper.module";
 export declare class DbxFormFormlyNumberFieldModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormFormlyNumberFieldModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlyNumberFieldModule, never, [typeof i1.FormlyMaterialModule], [typeof i2.DbxFormFormlyWrapperModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlyNumberFieldModule, never, [typeof i1.FormlyMaterialModule, typeof i2.FormlyMatSliderModule], [typeof i3.DbxFormFormlyWrapperModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxFormFormlyNumberFieldModule>;
 }

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.16",
+  "version": "9.24.18",
   "peerDependencies": {
     "@angular/common": "^14.1.0",
     "@angular/core": "^14.1.0",
     "@angular/forms": "^14.2.0",
-    "@dereekb/dbx-web": "9.24.16",
+    "@dereekb/dbx-web": "9.24.18",
     "@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.16",
-    "@dereekb/dbx-form": "9.24.16"
+    "@dereekb/dbx-web/mapbox": "9.24.18",
+    "@dereekb/dbx-form": "9.24.18"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/package.json

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