@dereekb/dbx-form 9.24.16 → 9.24.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/calendar/lib/calendar.module.d.ts +1 -1
  2. package/calendar/lib/calendar.schedule.selection.dialog.button.component.d.ts +2 -1
  3. package/calendar/lib/calendar.schedule.selection.range.component.d.ts +6 -1
  4. package/calendar/lib/field/schedule/calendar.schedule.field.component.d.ts +23 -0
  5. package/calendar/lib/field/schedule/calendar.schedule.module.d.ts +10 -9
  6. package/esm2020/calendar/lib/calendar.module.mjs +8 -2
  7. package/esm2020/calendar/lib/calendar.schedule.selection.component.mjs +24 -8
  8. package/esm2020/calendar/lib/calendar.schedule.selection.dialog.button.component.mjs +8 -6
  9. package/esm2020/calendar/lib/calendar.schedule.selection.popover.content.component.mjs +17 -12
  10. package/esm2020/calendar/lib/calendar.schedule.selection.range.component.mjs +45 -5
  11. package/esm2020/calendar/lib/field/schedule/calendar.schedule.field.component.mjs +23 -9
  12. package/esm2020/calendar/lib/field/schedule/calendar.schedule.field.mjs +5 -3
  13. package/esm2020/calendar/lib/field/schedule/calendar.schedule.module.mjs +7 -3
  14. package/esm2020/lib/formly/config/validation.mjs +3 -2
  15. package/esm2020/lib/formly/field/value/number/number.field.mjs +34 -1
  16. package/esm2020/lib/formly/field/value/number/number.field.module.mjs +5 -4
  17. package/esm2020/lib/formly/field/value/phone/phone.field.component.mjs +84 -5
  18. package/esm2020/lib/formly/field/value/phone/phone.field.mjs +9 -3
  19. package/esm2020/lib/validator/index.mjs +2 -1
  20. package/esm2020/lib/validator/phone.mjs +61 -0
  21. package/fesm2015/dereekb-dbx-form-calendar.mjs +123 -39
  22. package/fesm2015/dereekb-dbx-form-calendar.mjs.map +1 -1
  23. package/fesm2015/dereekb-dbx-form.mjs +171 -11
  24. package/fesm2015/dereekb-dbx-form.mjs.map +1 -1
  25. package/fesm2020/dereekb-dbx-form-calendar.mjs +124 -41
  26. package/fesm2020/dereekb-dbx-form-calendar.mjs.map +1 -1
  27. package/fesm2020/dereekb-dbx-form.mjs +182 -10
  28. package/fesm2020/dereekb-dbx-form.mjs.map +1 -1
  29. package/lib/extension/calendar/_calendar.scss +13 -0
  30. package/lib/formly/config/validation.d.ts +4 -0
  31. package/lib/formly/field/value/date/_date.scss +4 -0
  32. package/lib/formly/field/value/number/number.field.d.ts +27 -0
  33. package/lib/formly/field/value/number/number.field.module.d.ts +3 -2
  34. package/lib/formly/field/value/phone/_phone.scss +22 -13
  35. package/lib/formly/field/value/phone/phone.field.component.d.ts +19 -0
  36. package/lib/validator/index.d.ts +1 -0
  37. package/lib/validator/phone.d.ts +16 -0
  38. package/mapbox/package.json +4 -4
  39. package/package.json +4 -4
@@ -26,7 +26,7 @@ import * as i1$1 from '@angular/material/button';
26
26
  import { MatButtonModule } from '@angular/material/button';
27
27
  import * as i3$2 from '@angular/flex-layout/flex';
28
28
  import { FlexLayoutModule } from '@angular/flex-layout';
29
- import { objectIsEmpty, mergeObjectsFunction, filterFromPOJOFunction, mergeObjects, filterFromPOJO, asArray, objectHasNoKeys, addPlusPrefixToNumber, convertMaybeToArray, isSelectedDecisionFunctionFactory, readKeysFrom, hasDifferentValues, makeValuesGroupMap, separateValues, filterUniqueValues, searchStringFilterFunction, caseInsensitiveFilterByIndexOfDecisionFactory, sortByStringFunction, mergeIntoArray, lastValue, arrayToMap, setContainsAllValues, addToSetCopy, setsAreEquivalent, filterMaybeValues, mergeArrays, cachedGetter, makeGetter, asDecisionFunction, getValueFromGetter, asGetter, MS_IN_MINUTE, isMonthDaySlashDate, WEBSITE_DOMAIN_NAME_REGEX, KeyValueTypleValueFilter, valuesFromPOJO, allObjectsAreEqual, isNumberDivisibleBy, nearestDivisibleValues, mapMaybeFunction, transformNumberFunction, concatArrays, transformStringFunction, US_STATE_CODE_STRING_REGEX, ZIP_CODE_STRING_REGEX, LAT_LNG_PATTERN, BooleanStringKeyArrayUtilityInstance, capitalizeFirstLetter } from '@dereekb/util';
29
+ import { objectIsEmpty, mergeObjectsFunction, filterFromPOJOFunction, mergeObjects, filterFromPOJO, asArray, objectHasNoKeys, addPlusPrefixToNumber, convertMaybeToArray, isSelectedDecisionFunctionFactory, readKeysFrom, hasDifferentValues, makeValuesGroupMap, separateValues, filterUniqueValues, searchStringFilterFunction, caseInsensitiveFilterByIndexOfDecisionFactory, sortByStringFunction, mergeIntoArray, lastValue, arrayToMap, setContainsAllValues, addToSetCopy, setsAreEquivalent, filterMaybeValues, mergeArrays, cachedGetter, makeGetter, asDecisionFunction, getValueFromGetter, asGetter, MS_IN_MINUTE, isMonthDaySlashDate, WEBSITE_DOMAIN_NAME_REGEX, KeyValueTypleValueFilter, valuesFromPOJO, allObjectsAreEqual, isNumberDivisibleBy, nearestDivisibleValues, isE164PhoneNumber as isE164PhoneNumber$1, isValidPhoneExtensionNumber, e164PhoneNumberExtensionPair, mapMaybeFunction, transformNumberFunction, concatArrays, e164PhoneNumberFromE164PhoneNumberExtensionPair, transformStringFunction, US_STATE_CODE_STRING_REGEX, ZIP_CODE_STRING_REGEX, LAT_LNG_PATTERN, BooleanStringKeyArrayUtilityInstance, capitalizeFirstLetter } from '@dereekb/util';
30
30
  import * as i2$2 from '@angular/material/slide-toggle';
31
31
  import { MatSlideToggleModule } from '@angular/material/slide-toggle';
32
32
  import * as i2$3 from '@angular/flex-layout/extended';
@@ -56,7 +56,8 @@ import * as i4$5 from 'ngx-editor';
56
56
  import { Editor, NgxEditorModule } from 'ngx-editor';
57
57
  import * as i4$6 from '@angular/cdk/drag-drop';
58
58
  import { DragDropModule } from '@angular/cdk/drag-drop';
59
- import * as i2$4 from 'ngx-mat-intl-tel-input';
59
+ import { FormlyMatSliderModule } from '@ngx-formly/material/slider';
60
+ import * as i3$4 from 'ngx-mat-intl-tel-input';
60
61
  import { NgxMatIntlTelInputComponent } from 'ngx-mat-intl-tel-input';
61
62
  import { ADDRESS_CITY_MAX_LENGTH, ADDRESS_STATE_CODE_MAX_LENGTH, ADDRESS_STATE_MAX_LENGTH, ADDRESS_COUNTRY_MAX_LENGTH, ADDRESS_ZIP_MAX_LENGTH, ADDRESS_LINE_MAX_LENGTH } from '@dereekb/model';
62
63
  import { cloneDeep } from 'lodash';
@@ -544,8 +545,9 @@ const MAX_LENGTH_VALIDATION_MESSAGE = { name: 'maxLength', message: maxLengthVal
544
545
  const MIN_VALIDATION_MESSAGE = { name: 'min', message: minValidationMessage };
545
546
  const MAX_VALIDATION_MESSAGE = { name: 'max', message: maxValidationMessage };
546
547
  const INVALID_PHONE_NUMBER_MESSAGE = { name: 'validatePhoneNumber', message: 'This is not a valid phone number.' };
548
+ const INVALID_PHONE_NUMBER_EXTENSION_MESSAGE = { name: 'validatePhoneNumberExtension', message: 'This is not a valid phone number extension.' };
547
549
  function defaultValidationMessages() {
548
- return [REQUIRED_VALIDATION_MESSAGE, MIN_LENGTH_VALIDATION_MESSAGE, MAX_LENGTH_VALIDATION_MESSAGE, MIN_VALIDATION_MESSAGE, MAX_VALIDATION_MESSAGE, INVALID_PHONE_NUMBER_MESSAGE];
550
+ return [REQUIRED_VALIDATION_MESSAGE, MIN_LENGTH_VALIDATION_MESSAGE, MAX_LENGTH_VALIDATION_MESSAGE, MIN_VALIDATION_MESSAGE, MAX_VALIDATION_MESSAGE, INVALID_PHONE_NUMBER_MESSAGE, INVALID_PHONE_NUMBER_EXTENSION_MESSAGE];
549
551
  }
550
552
 
551
553
  // MARK: Default
@@ -4894,6 +4896,65 @@ function fieldValueIsAvailableValidator(config) {
4894
4896
  })), first());
4895
4897
  }
4896
4898
 
4899
+ /**
4900
+ * Angular Form ValidationFn for checking isE164PhoneNumber the input divisor.
4901
+ *
4902
+ * @param divisor
4903
+ * @returns
4904
+ */
4905
+ function isE164PhoneNumber(allowExtension) {
4906
+ return (control) => {
4907
+ const value = control.value;
4908
+ if (value != null && !isE164PhoneNumber$1(value, allowExtension)) {
4909
+ return {
4910
+ [INVALID_PHONE_NUMBER_MESSAGE.name]: true
4911
+ };
4912
+ }
4913
+ return {};
4914
+ };
4915
+ }
4916
+ /**
4917
+ * Angular Form ValidationFn for checking the input is a valid phone extension. Empty values return true.
4918
+ *
4919
+ * @param divisor
4920
+ * @returns
4921
+ */
4922
+ function isPhoneExtension() {
4923
+ return (control) => {
4924
+ const value = control.value;
4925
+ if (value != null) {
4926
+ const asString = value.toString();
4927
+ if (asString.length > 0 && !isValidPhoneExtensionNumber(asString)) {
4928
+ return {
4929
+ [INVALID_PHONE_NUMBER_EXTENSION_MESSAGE.name]: true
4930
+ };
4931
+ }
4932
+ }
4933
+ return {};
4934
+ };
4935
+ }
4936
+ function isE164PhoneNumberWithValidExtension() {
4937
+ return (control) => {
4938
+ const value = control.value;
4939
+ if (value != null) {
4940
+ if (isE164PhoneNumber$1(value, true)) {
4941
+ const pair = e164PhoneNumberExtensionPair(value);
4942
+ if (pair.extension && !isValidPhoneExtensionNumber(pair.extension)) {
4943
+ return {
4944
+ [INVALID_PHONE_NUMBER_EXTENSION_MESSAGE.name]: true
4945
+ };
4946
+ }
4947
+ }
4948
+ else {
4949
+ return {
4950
+ [INVALID_PHONE_NUMBER_MESSAGE.name]: true
4951
+ };
4952
+ }
4953
+ }
4954
+ return {};
4955
+ };
4956
+ }
4957
+
4897
4958
  function numberFieldTransformParser(config) {
4898
4959
  const { parsers: inputParsers, transform } = config;
4899
4960
  let parsers;
@@ -4920,6 +4981,27 @@ function numberField(config) {
4920
4981
  validators
4921
4982
  })), { parsers }));
4922
4983
  }
4984
+ function numberSliderField(config) {
4985
+ var _a;
4986
+ const { key, min, max, step, enforceStep, inputType: type = 'number', materialFormField, thumbLabel: inputThumbLabel, tickInterval: inputTickInterval, invertSelectionColoring: invertedSelectionColoring = false, displayWith } = config;
4987
+ const parsers = numberFieldTransformParser(config);
4988
+ const validators = [];
4989
+ let tickIntervalFromSteps;
4990
+ if (step) {
4991
+ tickIntervalFromSteps = 1;
4992
+ if (enforceStep) {
4993
+ validators.push(isDivisibleBy(step));
4994
+ }
4995
+ }
4996
+ const tickInterval = inputTickInterval === false ? undefined : (_a = inputTickInterval !== null && inputTickInterval !== void 0 ? inputTickInterval : tickIntervalFromSteps) !== null && _a !== void 0 ? _a : undefined;
4997
+ return formlyField(Object.assign(Object.assign(Object.assign({ key, type: 'slider' }, propsAndConfigForFieldConfig(config, Object.assign(Object.assign({}, materialFormField), { type,
4998
+ min,
4999
+ max,
5000
+ step, inverted: invertedSelectionColoring, thumbLabel: inputThumbLabel !== null && inputThumbLabel !== void 0 ? inputThumbLabel : true, showTickMarks: Boolean(tickInterval), tickInterval,
5001
+ displayWith }))), validatorsForFieldConfig({
5002
+ validators
5003
+ })), { parsers }));
5004
+ }
4923
5005
  function dollarAmountField(config) {
4924
5006
  return numberField(Object.assign(Object.assign({}, config), { transform: Object.assign(Object.assign({}, config.transform), { precision: 2 }) }));
4925
5007
  }
@@ -4927,12 +5009,12 @@ function dollarAmountField(config) {
4927
5009
  class DbxFormFormlyNumberFieldModule {
4928
5010
  }
4929
5011
  DbxFormFormlyNumberFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyNumberFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
4930
- DbxFormFormlyNumberFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyNumberFieldModule, imports: [FormlyMaterialModule], exports: [DbxFormFormlyWrapperModule] });
4931
- DbxFormFormlyNumberFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyNumberFieldModule, imports: [FormlyMaterialModule, DbxFormFormlyWrapperModule] });
5012
+ DbxFormFormlyNumberFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyNumberFieldModule, imports: [FormlyMaterialModule, FormlyMatSliderModule], exports: [DbxFormFormlyWrapperModule] });
5013
+ DbxFormFormlyNumberFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyNumberFieldModule, imports: [FormlyMaterialModule, FormlyMatSliderModule, DbxFormFormlyWrapperModule] });
4932
5014
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyNumberFieldModule, decorators: [{
4933
5015
  type: NgModule,
4934
5016
  args: [{
4935
- imports: [FormlyMaterialModule],
5017
+ imports: [FormlyMaterialModule, FormlyMatSliderModule],
4936
5018
  declarations: [],
4937
5019
  exports: [DbxFormFormlyWrapperModule]
4938
5020
  }]
@@ -4940,6 +5022,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
4940
5022
 
4941
5023
  const DEFAULT_PREFERRED_COUNTRIES = ['us'];
4942
5024
  class DbxPhoneFieldComponent extends FieldType$1 {
5025
+ constructor() {
5026
+ super(...arguments);
5027
+ this.inputSync = new SubscriptionObject();
5028
+ this.outputSync = new SubscriptionObject();
5029
+ this.extensionErrorSync = new SubscriptionObject();
5030
+ this.phoneErrorSync = new SubscriptionObject();
5031
+ this.phoneCtrl = new FormControl('');
5032
+ this.extensionCtrl = new FormControl('', {
5033
+ validators: [isPhoneExtension()]
5034
+ });
5035
+ this.inputFormGroup = new FormGroup({
5036
+ phone: this.phoneCtrl,
5037
+ extension: this.extensionCtrl
5038
+ });
5039
+ }
4943
5040
  get preferredCountries() {
4944
5041
  var _a;
4945
5042
  return (_a = this.props.preferredCountries) !== null && _a !== void 0 ? _a : DEFAULT_PREFERRED_COUNTRIES;
@@ -4948,12 +5045,71 @@ class DbxPhoneFieldComponent extends FieldType$1 {
4948
5045
  var _a;
4949
5046
  return (_a = this.props.onlyCountries) !== null && _a !== void 0 ? _a : [];
4950
5047
  }
5048
+ get allowExtension() {
5049
+ var _a;
5050
+ return (_a = this.props.allowExtension) !== null && _a !== void 0 ? _a : false;
5051
+ }
5052
+ ngOnInit() {
5053
+ this.inputSync.subscription = this.formControl.valueChanges.pipe(startWith(this.formControl.value), distinctUntilChanged()).subscribe((inputValue) => {
5054
+ let phone;
5055
+ let extension;
5056
+ if (inputValue) {
5057
+ const pair = e164PhoneNumberExtensionPair(inputValue);
5058
+ phone = pair.number;
5059
+ extension = pair.extension;
5060
+ }
5061
+ // do not clear/reset if phone is undefined and the phone value is currently null
5062
+ if (phone || (!phone && this.phoneCtrl.value !== null)) {
5063
+ this.phoneCtrl.setValue(phone || '');
5064
+ this.extensionCtrl.setValue(extension || '');
5065
+ }
5066
+ });
5067
+ this.outputSync.subscription = combineLatest([this.phoneCtrl.valueChanges.pipe(distinctUntilChanged()), this.extensionCtrl.valueChanges.pipe(startWith(this.extensionCtrl.value), distinctUntilChanged())])
5068
+ .pipe(map(([phone, extension]) => {
5069
+ if (phone) {
5070
+ if (this.allowExtension) {
5071
+ return e164PhoneNumberFromE164PhoneNumberExtensionPair({
5072
+ number: phone,
5073
+ extension
5074
+ });
5075
+ }
5076
+ else {
5077
+ return phone;
5078
+ }
5079
+ }
5080
+ else {
5081
+ return undefined;
5082
+ }
5083
+ }), distinctUntilChanged())
5084
+ .subscribe((x) => {
5085
+ this.formControl.setValue(x);
5086
+ });
5087
+ /*
5088
+ * The phoneCtrl's errors are being used to drive the error matcher for this. Sync any invalid states with errors to phoneCtrl.
5089
+ * PhoneCtrl updates when the input is updated so it works.
5090
+ */
5091
+ this.extensionErrorSync.subscription = this.extensionCtrl.statusChanges.subscribe((x) => {
5092
+ if (x === 'INVALID') {
5093
+ this.phoneCtrl.setErrors(this.formControl.errors, { emitEvent: true });
5094
+ }
5095
+ });
5096
+ // sync any phoneCtrl errors with the errors of the form control.
5097
+ this.phoneErrorSync.subscription = this.inputFormGroup.statusChanges.subscribe((x) => {
5098
+ const errors = Object.assign(Object.assign({}, this.phoneCtrl.errors), this.extensionCtrl.errors);
5099
+ this.formControl.setErrors(objectHasNoKeys(errors) ? null : errors, { emitEvent: true });
5100
+ });
5101
+ }
5102
+ ngOnDestroy() {
5103
+ super.ngOnDestroy();
5104
+ this.inputSync.destroy();
5105
+ this.outputSync.destroy();
5106
+ }
4951
5107
  }
4952
5108
  DbxPhoneFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxPhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
4953
- DbxPhoneFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxPhoneFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ngx-mat-intl-tel-input class=\"dbx-form-phone-field\" [required]=\"required\" [preferredCountries]=\"preferredCountries\" [enablePlaceholder]=\"false\" name=\"phone\" [formControl]=\"formControl\"></ngx-mat-intl-tel-input>\n", dependencies: [{ kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$4.NgxMatIntlTelInputComponent, selector: "ngx-mat-intl-tel-input", inputs: ["preferredCountries", "enablePlaceholder", "inputPlaceholder", "cssClass", "name", "onlyCountries", "errorStateMatcher", "enableSearch", "searchPlaceholder", "describedBy", "format", "placeholder", "required", "disabled"], outputs: ["countryChanged"] }] });
5109
+ DbxPhoneFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxPhoneFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-form-phone-field\" [formGroup]=\"inputFormGroup\">\n <ngx-mat-intl-tel-input class=\"dbx-form-phone-field-phone-content\" [required]=\"required\" [preferredCountries]=\"preferredCountries\" [enablePlaceholder]=\"false\" name=\"phone\" [formControl]=\"phoneCtrl\"></ngx-mat-intl-tel-input>\n <div *ngIf=\"allowExtension\" class=\"dbx-form-phone-field-extension-content\">\n <span class=\"dbx-hint dbx-button-spacer\">Ext.</span>\n <input class=\"dbx-form-phone-field-extension-input\" placeholder=\"123\" minlength=\"0\" maxlength=\"6\" #extensionInput [formControl]=\"extensionCtrl\" />\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3$4.NgxMatIntlTelInputComponent, selector: "ngx-mat-intl-tel-input", inputs: ["preferredCountries", "enablePlaceholder", "inputPlaceholder", "cssClass", "name", "onlyCountries", "errorStateMatcher", "enableSearch", "searchPlaceholder", "describedBy", "format", "placeholder", "required", "disabled"], outputs: ["countryChanged"] }] });
4954
5110
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxPhoneFieldComponent, decorators: [{
4955
5111
  type: Component,
4956
- args: [{ template: "<ngx-mat-intl-tel-input class=\"dbx-form-phone-field\" [required]=\"required\" [preferredCountries]=\"preferredCountries\" [enablePlaceholder]=\"false\" name=\"phone\" [formControl]=\"formControl\"></ngx-mat-intl-tel-input>\n" }]
5112
+ args: [{ template: "<div class=\"dbx-form-phone-field\" [formGroup]=\"inputFormGroup\">\n <ngx-mat-intl-tel-input class=\"dbx-form-phone-field-phone-content\" [required]=\"required\" [preferredCountries]=\"preferredCountries\" [enablePlaceholder]=\"false\" name=\"phone\" [formControl]=\"phoneCtrl\"></ngx-mat-intl-tel-input>\n <div *ngIf=\"allowExtension\" class=\"dbx-form-phone-field-extension-content\">\n <span class=\"dbx-hint dbx-button-spacer\">Ext.</span>\n <input class=\"dbx-form-phone-field-extension-input\" placeholder=\"123\" minlength=\"0\" maxlength=\"6\" #extensionInput [formControl]=\"extensionCtrl\" />\n </div>\n</div>\n" }]
4957
5113
  }] });
4958
5114
 
4959
5115
  class DbxFormFormlyPhoneFieldModule {
@@ -5037,11 +5193,15 @@ function textAreaField(config) {
5037
5193
  }
5038
5194
 
5039
5195
  function phoneField(config = {}) {
5040
- const { key = 'phone', label = 'Phone Number', preferredCountries, onlyCountries } = config;
5041
- const fieldConfig = formlyField(Object.assign({ key, type: 'intphone' }, propsAndConfigForFieldConfig(config, {
5196
+ const { key = 'phone', label = 'Phone Number', preferredCountries, onlyCountries, allowExtension: inputAllowExtension } = config;
5197
+ const allowExtension = inputAllowExtension !== null && inputAllowExtension !== void 0 ? inputAllowExtension : false;
5198
+ const fieldConfig = formlyField(Object.assign(Object.assign({ key, type: 'intphone' }, propsAndConfigForFieldConfig(config, {
5042
5199
  label,
5200
+ allowExtension,
5043
5201
  preferredCountries,
5044
5202
  onlyCountries
5203
+ })), validatorsForFieldConfig({
5204
+ validators: [isE164PhoneNumber(allowExtension)]
5045
5205
  })));
5046
5206
  return fieldConfig;
5047
5207
  }
@@ -5923,5 +6083,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
5923
6083
  * Generated bundle index. Do not edit.
5924
6084
  */
5925
6085
 
5926
- export { APP_ACTION_FORM_DISABLED_KEY, AUTO_TOUCH_WRAPPER_KEY, AbstractAsyncFormlyFormDirective, AbstractConfigAsyncFormlyFormDirective, AbstractDbxPickableItemFieldDirective, AbstractDbxSearchableFieldDisplayDirective, AbstractDbxSearchableValueFieldDirective, AbstractFormExpandableSectionWrapperDirective, AbstractFormlyFormDirective, AbstractSyncFormlyFormDirective, AutoTouchFieldWrapperComponent, ChecklistItemFieldDataSetBuilder, DBX_DATE_TIME_FIELD_MENU_PRESETS_TOKEN, DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN, DEFAULT_DATE_TIME_FIELD_MENU_PRESETS_PRESETS, 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, DbxDateTimeFieldMenuPresetsService, DbxDateTimeFieldTimeMode, DbxDateTimeValueMode, DbxDefaultChecklistItemFieldDisplayComponent, DbxDefaultSearchableFieldDisplayComponent, DbxForm, DbxFormActionModule, DbxFormActionTransitionModule, DbxFormComponentFieldComponent, DbxFormExpandWrapperComponent, DbxFormExtensionModule, DbxFormFlexWrapperComponent, DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyDbxListFieldModule, DbxFormFormlyFieldModule, DbxFormFormlyFormModule, DbxFormFormlyNumberFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySelectionModule, DbxFormFormlySourceSelectModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyTextFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule, DbxFormInfoWrapperComponent, DbxFormIoModule, DbxFormLayoutModule, DbxFormLoadingSourceDirective, DbxFormModule, DbxFormRepeatArrayTypeComponent, DbxFormSearchFormComponent, DbxFormSectionWrapperComponent, DbxFormSourceDirective, DbxFormSourceSelectFieldComponent, DbxFormSpacerComponent, DbxFormState, DbxFormSubsectionWrapperComponent, DbxFormToggleWrapperComponent, DbxFormValueChangesDirective, DbxFormWorkingWrapperComponent, DbxFormlyContext, DbxFormlyFieldsContextDirective, DbxFormlyFormComponent, DbxFormlyModule, DbxItemListFieldComponent, 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, addValueSelectionOptionFunction, addWrapperToFormlyFieldConfig, addressField, addressFormlyFields, addressLineField, addressListField, autoTouchWrapper, checkIsFieldFlexLayoutGroupFieldConfig, checkboxField, checklistItemField, chipTextField, cityField, componentField, countryField, dateRangeField, dateTimeField, dateTimePreset, dateTimeRangeField, dbxDateRangeIsSameDateRangeFieldValue, dbxDateTimeInputValueParseFactory, dbxDateTimeIsSameDateTimeFieldValue, dbxDateTimeOutputValueFactory, dbxFormSearchFormFields, dbxFormSourceObservable, dbxFormSourceObservableFromStream, dbxListField, defaultValidationMessages, disableFormlyFieldAutofillAttributes, dollarAmountField, emailField, expandWrapper, fieldValueIsAvailableValidator, fieldValuesAreEqualValidator, filterPartialPotentialFieldConfigValuesFromObject, filterPickableItemFieldValuesByLabel, filterPickableItemFieldValuesByLabelFilterFunction, fixedDateRangeField, 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, pickableValueFieldValuesConfigForStaticLabeledValues, propsAndConfigForFieldConfig, propsForFieldConfig, propsValueForFieldConfig, provideDbxForm, provideDbxMutableForm, provideFormlyContext, repeatArrayField, searchableChipField, searchableStringChipField, searchableTextField, sectionWrapper, sortPickableItemsByLabel, sortPickableItemsByLabelStringFunction, sourceSelectField, stateField, styleWrapper, subsectionWrapper, syncConfigValueObs, textAreaField, textEditorField, textField, textFieldTransformParser, textIsAvailableField, textPasswordField, textPasswordWithVerifyFieldGroup, textVerifyPasswordField, timeOnlyField, timezoneStringField, timezoneStringSearchFunction, toggleField, toggleWrapper, usernamePasswordLoginFields, validatorsForFieldConfig, valueSelectionField, workingWrapper, wrappedPhoneAndLabelField, zipCodeField };
6086
+ export { APP_ACTION_FORM_DISABLED_KEY, AUTO_TOUCH_WRAPPER_KEY, AbstractAsyncFormlyFormDirective, AbstractConfigAsyncFormlyFormDirective, AbstractDbxPickableItemFieldDirective, AbstractDbxSearchableFieldDisplayDirective, AbstractDbxSearchableValueFieldDirective, AbstractFormExpandableSectionWrapperDirective, AbstractFormlyFormDirective, AbstractSyncFormlyFormDirective, AutoTouchFieldWrapperComponent, ChecklistItemFieldDataSetBuilder, DBX_DATE_TIME_FIELD_MENU_PRESETS_TOKEN, DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN, DEFAULT_DATE_TIME_FIELD_MENU_PRESETS_PRESETS, 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, DbxDateTimeFieldMenuPresetsService, DbxDateTimeFieldTimeMode, DbxDateTimeValueMode, DbxDefaultChecklistItemFieldDisplayComponent, DbxDefaultSearchableFieldDisplayComponent, DbxForm, DbxFormActionModule, DbxFormActionTransitionModule, DbxFormComponentFieldComponent, DbxFormExpandWrapperComponent, DbxFormExtensionModule, DbxFormFlexWrapperComponent, DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyDbxListFieldModule, DbxFormFormlyFieldModule, DbxFormFormlyFormModule, DbxFormFormlyNumberFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySelectionModule, DbxFormFormlySourceSelectModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyTextFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule, DbxFormInfoWrapperComponent, DbxFormIoModule, DbxFormLayoutModule, DbxFormLoadingSourceDirective, DbxFormModule, DbxFormRepeatArrayTypeComponent, DbxFormSearchFormComponent, DbxFormSectionWrapperComponent, DbxFormSourceDirective, DbxFormSourceSelectFieldComponent, DbxFormSpacerComponent, DbxFormState, DbxFormSubsectionWrapperComponent, DbxFormToggleWrapperComponent, DbxFormValueChangesDirective, DbxFormWorkingWrapperComponent, DbxFormlyContext, DbxFormlyFieldsContextDirective, DbxFormlyFormComponent, DbxFormlyModule, DbxItemListFieldComponent, 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_EXTENSION_MESSAGE, 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, addValueSelectionOptionFunction, addWrapperToFormlyFieldConfig, addressField, addressFormlyFields, addressLineField, addressListField, autoTouchWrapper, checkIsFieldFlexLayoutGroupFieldConfig, checkboxField, checklistItemField, chipTextField, cityField, componentField, countryField, dateRangeField, dateTimeField, dateTimePreset, dateTimeRangeField, dbxDateRangeIsSameDateRangeFieldValue, dbxDateTimeInputValueParseFactory, dbxDateTimeIsSameDateTimeFieldValue, dbxDateTimeOutputValueFactory, dbxFormSearchFormFields, dbxFormSourceObservable, dbxFormSourceObservableFromStream, dbxListField, defaultValidationMessages, disableFormlyFieldAutofillAttributes, dollarAmountField, emailField, expandWrapper, fieldValueIsAvailableValidator, fieldValuesAreEqualValidator, filterPartialPotentialFieldConfigValuesFromObject, filterPickableItemFieldValuesByLabel, filterPickableItemFieldValuesByLabelFilterFunction, fixedDateRangeField, flexLayoutWrapper, formlyField, hiddenField, infoWrapper, isDivisibleBy, isDomain, isE164PhoneNumber, isE164PhoneNumberWithValidExtension, isInRange, isPhoneExtension, isTruthy, latLngTextField, makeMetaFilterSearchableFieldValueDisplayFn, maxLengthValidationMessage, maxValidationMessage, mergePropsValueObjects, minLengthValidationMessage, minValidationMessage, nameField, numberField, numberFieldTransformParser, numberSliderField, partialPotentialFieldConfigKeys, partialPotentialFieldConfigKeysFilter, phoneAndLabelSectionField, phoneField, phoneListField, pickableItemChipField, pickableItemListField, pickableValueFieldValuesConfigForStaticLabeledValues, propsAndConfigForFieldConfig, propsForFieldConfig, propsValueForFieldConfig, provideDbxForm, provideDbxMutableForm, provideFormlyContext, repeatArrayField, searchableChipField, searchableStringChipField, searchableTextField, sectionWrapper, sortPickableItemsByLabel, sortPickableItemsByLabelStringFunction, sourceSelectField, stateField, styleWrapper, subsectionWrapper, syncConfigValueObs, textAreaField, textEditorField, textField, textFieldTransformParser, textIsAvailableField, textPasswordField, textPasswordWithVerifyFieldGroup, textVerifyPasswordField, timeOnlyField, timezoneStringField, timezoneStringSearchFunction, toggleField, toggleWrapper, usernamePasswordLoginFields, validatorsForFieldConfig, valueSelectionField, workingWrapper, wrappedPhoneAndLabelField, zipCodeField };
5927
6087
  //# sourceMappingURL=dereekb-dbx-form.mjs.map