@mvf/external-components 3.31.1-dev.7 → 3.31.1-dev.8

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 (99) hide show
  1. package/Components/Atoms/FormControl/FormControl.js +3 -1
  2. package/Components/Atoms/FormControl/FormControl.js.map +1 -1
  3. package/Components/Atoms/FormControl/makeFormControlStyles.d.ts +3 -1
  4. package/Components/Atoms/FormControl/makeFormControlStyles.js +1 -2
  5. package/Components/Atoms/FormControl/makeFormControlStyles.js.map +1 -1
  6. package/Components/Atoms/Input/IInputProps.d.ts +5 -0
  7. package/Components/Atoms/Input/Input.js +3 -2
  8. package/Components/Atoms/Input/Input.js.map +1 -1
  9. package/Components/Molecules/PhoneNumberTextField/PhoneNumberTextField.js +5 -3
  10. package/Components/Molecules/PhoneNumberTextField/PhoneNumberTextField.js.map +1 -1
  11. package/Components/Molecules/PhoneNumberTextFieldCustom/IPhoneNumberTextFieldProps.d.ts +57 -0
  12. package/Components/Molecules/PhoneNumberTextFieldCustom/IPhoneNumberTextFieldProps.js +3 -0
  13. package/Components/Molecules/PhoneNumberTextFieldCustom/IPhoneNumberTextFieldProps.js.map +1 -0
  14. package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberCallbacks.d.ts +33 -0
  15. package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberCallbacks.js +3 -0
  16. package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberCallbacks.js.map +1 -0
  17. package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextField.d.ts +7 -0
  18. package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextField.js +216 -0
  19. package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextField.js.map +1 -0
  20. package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextField.test.d.ts +1 -0
  21. package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextField.test.js +596 -0
  22. package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextField.test.js.map +1 -0
  23. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/demo/AutofillDemo.d.ts +7 -0
  24. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/demo/AutofillDemo.js +28 -0
  25. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/demo/AutofillDemo.js.map +1 -0
  26. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/display/ErrorDisplay.d.ts +8 -0
  27. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/display/ErrorDisplay.js +17 -0
  28. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/display/ErrorDisplay.js.map +1 -0
  29. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/forms/PhoneInput.d.ts +22 -0
  30. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/forms/PhoneInput.js +56 -0
  31. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/forms/PhoneInput.js.map +1 -0
  32. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/forms/PhoneInput.test.d.ts +1 -0
  33. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/forms/PhoneInput.test.js +159 -0
  34. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/forms/PhoneInput.test.js.map +1 -0
  35. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryDropdown.d.ts +12 -0
  36. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryDropdown.js +206 -0
  37. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryDropdown.js.map +1 -0
  38. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryDropdown.test.d.ts +1 -0
  39. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryDropdown.test.js +187 -0
  40. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryDropdown.test.js.map +1 -0
  41. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryModal.d.ts +10 -0
  42. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryModal.js +229 -0
  43. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryModal.js.map +1 -0
  44. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryModal.test.d.ts +1 -0
  45. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryModal.test.js +281 -0
  46. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountryModal.test.js.map +1 -0
  47. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountrySelector.d.ts +11 -0
  48. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountrySelector.js +34 -0
  49. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/CountrySelector.js.map +1 -0
  50. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/FlagIcon.d.ts +10 -0
  51. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/FlagIcon.js +114 -0
  52. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/components/ui/FlagIcon.js.map +1 -0
  53. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/useAutofillDetection.d.ts +10 -0
  54. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/useAutofillDetection.js +105 -0
  55. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/useAutofillDetection.js.map +1 -0
  56. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/useCountrySelector.d.ts +12 -0
  57. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/useCountrySelector.js +36 -0
  58. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/useCountrySelector.js.map +1 -0
  59. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/usePhoneNumber.d.ts +38 -0
  60. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/usePhoneNumber.js +181 -0
  61. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/usePhoneNumber.js.map +1 -0
  62. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/stories/PhoneNumberTextFieldStory.d.ts +21 -0
  63. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/stories/PhoneNumberTextFieldStory.js +41 -0
  64. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/stories/PhoneNumberTextFieldStory.js.map +1 -0
  65. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/styling/makeFormControlPhoneNumberStyling.d.ts +10 -0
  66. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/styling/makeFormControlPhoneNumberStyling.js +144 -0
  67. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/styling/makeFormControlPhoneNumberStyling.js.map +1 -0
  68. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/utils/countryData.d.ts +12 -0
  69. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/utils/countryData.js +509 -0
  70. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/utils/countryData.js.map +1 -0
  71. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/utils/defaultProps.d.ts +21 -0
  72. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/utils/defaultProps.js +33 -0
  73. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/utils/defaultProps.js.map +1 -0
  74. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/utils/phoneValidation.d.ts +15 -0
  75. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/utils/phoneValidation.js +130 -0
  76. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/utils/phoneValidation.js.map +1 -0
  77. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/utils/phoneValidation.test.d.ts +1 -0
  78. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/utils/phoneValidation.test.js +157 -0
  79. package/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/utils/phoneValidation.test.js.map +1 -0
  80. package/Components/Molecules/PhoneNumberTextFieldCustom/defaultProps.d.ts +21 -0
  81. package/Components/Molecules/PhoneNumberTextFieldCustom/defaultProps.js +33 -0
  82. package/Components/Molecules/PhoneNumberTextFieldCustom/defaultProps.js.map +1 -0
  83. package/Components/Molecules/PhoneNumberTextFieldCustom/index.d.ts +10 -0
  84. package/Components/Molecules/PhoneNumberTextFieldCustom/index.js +21 -0
  85. package/Components/Molecules/PhoneNumberTextFieldCustom/index.js.map +1 -0
  86. package/Components/Molecules/ScrollContainer/ScrollContainer.js +0 -25
  87. package/Components/Molecules/ScrollContainer/ScrollContainer.js.map +1 -1
  88. package/Components/Molecules/index.d.ts +1 -0
  89. package/Components/Molecules/index.js +3 -1
  90. package/Components/Molecules/index.js.map +1 -1
  91. package/Components/index.d.ts +1 -1
  92. package/Components/index.js +2 -1
  93. package/Components/index.js.map +1 -1
  94. package/Themes/auroraTheme.js +1 -1
  95. package/Themes/auroraTheme.js.map +1 -1
  96. package/index.d.ts +1 -1
  97. package/index.js +2 -1
  98. package/index.js.map +1 -1
  99. package/package.json +3 -1
@@ -0,0 +1,36 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useCountrySelector = void 0;
4
+ var react_1 = require("react");
5
+ var useCountrySelector = function (_a) {
6
+ var _b = _a === void 0 ? {} : _a, _c = _b.enableCountryChange, enableCountryChange = _c === void 0 ? true : _c, _d = _b.disabled, disabled = _d === void 0 ? false : _d;
7
+ var _e = (0, react_1.useState)(false), isCountryMenuOpen = _e[0], setIsCountryMenuOpen = _e[1];
8
+ var openCountryMenu = (0, react_1.useCallback)(function () {
9
+ if (enableCountryChange && !disabled) {
10
+ setIsCountryMenuOpen(true);
11
+ }
12
+ }, [enableCountryChange, disabled]);
13
+ var closeCountryMenu = (0, react_1.useCallback)(function () {
14
+ setIsCountryMenuOpen(false);
15
+ }, []);
16
+ var handleCountrySelectClick = (0, react_1.useCallback)(function () {
17
+ openCountryMenu();
18
+ }, [openCountryMenu]);
19
+ var handleKeyDown = (0, react_1.useCallback)(function (e) {
20
+ if (enableCountryChange &&
21
+ !disabled &&
22
+ (e.key === 'Enter' || e.key === ' ')) {
23
+ e.preventDefault();
24
+ openCountryMenu();
25
+ }
26
+ }, [enableCountryChange, disabled, openCountryMenu]);
27
+ return {
28
+ isCountryMenuOpen: isCountryMenuOpen,
29
+ openCountryMenu: openCountryMenu,
30
+ closeCountryMenu: closeCountryMenu,
31
+ handleCountrySelectClick: handleCountrySelectClick,
32
+ handleKeyDown: handleKeyDown,
33
+ };
34
+ };
35
+ exports.useCountrySelector = useCountrySelector;
36
+ //# sourceMappingURL=useCountrySelector.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useCountrySelector.js","sourceRoot":"","sources":["../../../../../../src/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/useCountrySelector.ts"],"names":[],"mappings":";;;AAAA,+BAA8C;AAevC,IAAM,kBAAkB,GAAG,UAAC,EAGF;QAHE,qBAGJ,EAAE,KAAA,EAF/B,2BAA0B,EAA1B,mBAAmB,mBAAG,IAAI,KAAA,EAC1B,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA;IAEV,IAAA,KAA4C,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAA1D,iBAAiB,QAAA,EAAE,oBAAoB,QAAmB,CAAC;IAElE,IAAM,eAAe,GAAG,IAAA,mBAAW,EAAC;QAClC,IAAI,mBAAmB,IAAI,CAAC,QAAQ,EAAE,CAAC;YACrC,oBAAoB,CAAC,IAAI,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC,EAAE,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEpC,IAAM,gBAAgB,GAAG,IAAA,mBAAW,EAAC;QACnC,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,wBAAwB,GAAG,IAAA,mBAAW,EAAC;QAC3C,eAAe,EAAE,CAAC;IACpB,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,IAAM,aAAa,GAAG,IAAA,mBAAW,EAC/B,UAAC,CAAsB;QACrB,IACE,mBAAmB;YACnB,CAAC,QAAQ;YACT,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,EACpC,CAAC;YACD,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,eAAe,EAAE,CAAC;QACpB,CAAC;IACH,CAAC,EACD,CAAC,mBAAmB,EAAE,QAAQ,EAAE,eAAe,CAAC,CACjD,CAAC;IAEF,OAAO;QACL,iBAAiB,mBAAA;QACjB,eAAe,iBAAA;QACf,gBAAgB,kBAAA;QAChB,wBAAwB,0BAAA;QACxB,aAAa,eAAA;KACd,CAAC;AACJ,CAAC,CAAC;AAzCW,QAAA,kBAAkB,sBAyC7B"}
@@ -0,0 +1,38 @@
1
+ import { CountryData } from '../utils/countryData';
2
+ import { PhoneValidationResult } from '../utils/phoneValidation';
3
+ export interface UsePhoneNumberOptions {
4
+ initialCountry?: string;
5
+ initialValue?: string;
6
+ enableCountryChange?: boolean;
7
+ onPhoneNumberChange?: (params: {
8
+ phoneNumber: string;
9
+ e164Number: string;
10
+ }) => void;
11
+ onCountryChange?: (params: {
12
+ selectedCountry: CountryData;
13
+ previousCountry: CountryData;
14
+ }) => void;
15
+ onValidationChange?: (params: {
16
+ isValid: boolean;
17
+ validationResult: PhoneValidationResult;
18
+ phoneNumber: string;
19
+ }) => void;
20
+ }
21
+ export interface UsePhoneNumberReturn {
22
+ phoneNumber: string;
23
+ selectedCountry: CountryData;
24
+ validationResult: PhoneValidationResult | null;
25
+ countries: CountryData[];
26
+ setPhoneNumber: (value: string) => void;
27
+ setSelectedCountry: (country: CountryData) => void;
28
+ autoDetectedCountryChange: {
29
+ newCountry: CountryData;
30
+ previousCountry: CountryData;
31
+ } | null;
32
+ clearAutoDetectedCountryChange: () => void;
33
+ isValid: boolean;
34
+ errorMessage?: string;
35
+ formattedE164: string;
36
+ phoneNumberType?: string;
37
+ }
38
+ export declare const usePhoneNumber: ({ initialCountry, initialValue, enableCountryChange, }?: Omit<UsePhoneNumberOptions, "onPhoneNumberChange" | "onCountryChange" | "onValidationChange">) => UsePhoneNumberReturn;
@@ -0,0 +1,181 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.usePhoneNumber = void 0;
4
+ var react_1 = require("react");
5
+ var google_libphonenumber_1 = require("google-libphonenumber");
6
+ var countryData_1 = require("../utils/countryData");
7
+ var phoneValidation_1 = require("../utils/phoneValidation");
8
+ var usePhoneNumber = function (_a) {
9
+ var _b, _c;
10
+ var _d = _a === void 0 ? {} : _a, initialCountry = _d.initialCountry, _e = _d.initialValue, initialValue = _e === void 0 ? '' : _e, _f = _d.enableCountryChange, enableCountryChange = _f === void 0 ? true : _f;
11
+ // Memoize countries data to prevent unnecessary recalculations
12
+ var countries = (0, react_1.useMemo)(function () { return (0, countryData_1.getCountryData)(); }, []);
13
+ // Initialize selected country
14
+ var _g = (0, react_1.useState)(function () {
15
+ if (initialCountry) {
16
+ var initialCountryData = countries.find(function (c) { return c.code === initialCountry; });
17
+ if (initialCountryData)
18
+ return initialCountryData;
19
+ }
20
+ return countries[0]; // Fallback to first country
21
+ }), selectedCountry = _g[0], setSelectedCountryState = _g[1];
22
+ var _h = (0, react_1.useState)(''), phoneNumber = _h[0], setPhoneNumberState = _h[1];
23
+ var _j = (0, react_1.useState)(null), validationResult = _j[0], setValidationResult = _j[1];
24
+ var _k = (0, react_1.useState)(null), autoDetectedCountryChange = _k[0], setAutoDetectedCountryChange = _k[1];
25
+ var previousValueRef = (0, react_1.useRef)('');
26
+ // Process phone number with country-specific formatting and validation
27
+ var processPhoneNumber = (0, react_1.useCallback)(function (phoneValue, countryCode, useNationalFormat) {
28
+ if (useNationalFormat === void 0) { useNationalFormat = true; }
29
+ var validation = (0, phoneValidation_1.validatePhoneNumber)(phoneValue, countryCode);
30
+ if (useNationalFormat && validation.nationalFormatted) {
31
+ return { formattedNumber: validation.nationalFormatted, validation: validation };
32
+ }
33
+ var formattedNumber = (0, phoneValidation_1.formatAsYouType)(phoneValue, countryCode, true);
34
+ return { formattedNumber: formattedNumber, validation: validation };
35
+ }, []);
36
+ // Update country if different from current
37
+ var updateCountryIfDifferent = (0, react_1.useCallback)(function (detectedCountryCode) {
38
+ var detectedCountry = countries.find(function (c) { return c.code === detectedCountryCode; });
39
+ if (detectedCountry && detectedCountry.code !== selectedCountry.code) {
40
+ return detectedCountry;
41
+ }
42
+ return null;
43
+ }, [countries, selectedCountry.code]);
44
+ // Handle external value changes (controlled component behavior)
45
+ (0, react_1.useEffect)(function () {
46
+ if (previousValueRef.current === initialValue)
47
+ return;
48
+ previousValueRef.current = initialValue || '';
49
+ if (!initialValue) {
50
+ setPhoneNumberState('');
51
+ setValidationResult(null);
52
+ return;
53
+ }
54
+ // Try to extract country code from the input value
55
+ var detectedCountryCode = (0, phoneValidation_1.extractCountryCodeFromNumber)(initialValue, selectedCountry.code);
56
+ if (detectedCountryCode && enableCountryChange) {
57
+ // Update country if different and country change is enabled
58
+ var newCountry = updateCountryIfDifferent(detectedCountryCode);
59
+ if (newCountry) {
60
+ var previousCountry = selectedCountry;
61
+ setSelectedCountryState(newCountry);
62
+ // Trigger auto-detected country change notification
63
+ setAutoDetectedCountryChange({
64
+ newCountry: newCountry,
65
+ previousCountry: previousCountry,
66
+ });
67
+ }
68
+ // Process with detected country
69
+ var _a = processPhoneNumber(initialValue, detectedCountryCode, true), formattedNumber = _a.formattedNumber, validation = _a.validation;
70
+ setPhoneNumberState(formattedNumber);
71
+ setValidationResult(validation);
72
+ }
73
+ else {
74
+ // Use current selected country
75
+ var _b = processPhoneNumber(initialValue, selectedCountry.code, false), formattedNumber = _b.formattedNumber, validation = _b.validation;
76
+ setPhoneNumberState(formattedNumber);
77
+ setValidationResult(validation);
78
+ }
79
+ }, [
80
+ initialValue,
81
+ selectedCountry.code,
82
+ enableCountryChange,
83
+ processPhoneNumber,
84
+ updateCountryIfDifferent,
85
+ ]);
86
+ // Handle phone number changes
87
+ var setPhoneNumber = (0, react_1.useCallback)(function (newPhoneNumber) {
88
+ // Format as you type using the selected country
89
+ var formattedNumber = (0, phoneValidation_1.formatAsYouType)(newPhoneNumber, selectedCountry.code, enableCountryChange);
90
+ setPhoneNumberState(formattedNumber);
91
+ // Validate based on enableCountryChange setting
92
+ var validation;
93
+ if (enableCountryChange) {
94
+ // Auto-detection enabled: validate with auto-detection first, then fallback to selected country
95
+ validation = (0, phoneValidation_1.validatePhoneNumber)(formattedNumber);
96
+ if (!validation.countryCode || !validation.isValid) {
97
+ validation = (0, phoneValidation_1.validatePhoneNumber)(formattedNumber, selectedCountry.code);
98
+ }
99
+ // Auto-update country if detected and different from current
100
+ if (validation.countryCode &&
101
+ validation.countryCode !== selectedCountry.code) {
102
+ var detectedCountry = countries.find(function (c) { return c.code === validation.countryCode; });
103
+ if (detectedCountry) {
104
+ var previousCountry = selectedCountry;
105
+ setSelectedCountryState(detectedCountry);
106
+ // Trigger auto-detected country change notification
107
+ setAutoDetectedCountryChange({
108
+ newCountry: detectedCountry,
109
+ previousCountry: previousCountry,
110
+ });
111
+ }
112
+ }
113
+ }
114
+ else {
115
+ // Auto-detection disabled: only validate against the selected country
116
+ // If input starts with +, treat it as invalid for the selected country
117
+ // unless it matches the selected country's international prefix
118
+ var phoneUtil = google_libphonenumber_1.PhoneNumberUtil.getInstance();
119
+ var countryCallingCode = phoneUtil.getCountryCodeForRegion(selectedCountry.code);
120
+ var expectedPrefix = "+".concat(countryCallingCode);
121
+ if (formattedNumber.startsWith('+') &&
122
+ !formattedNumber.startsWith(expectedPrefix)) {
123
+ // International number that doesn't match the selected country
124
+ validation = {
125
+ isValid: false,
126
+ formattedNumber: formattedNumber,
127
+ countryCode: selectedCountry.code,
128
+ nationalNumber: formattedNumber,
129
+ nationalFormatted: formattedNumber,
130
+ errorMessage: 'Please enter a valid phone number for the selected country',
131
+ };
132
+ }
133
+ else {
134
+ // National number or correct international prefix - validate against selected country
135
+ validation = (0, phoneValidation_1.validatePhoneNumber)(formattedNumber, selectedCountry.code);
136
+ }
137
+ }
138
+ setValidationResult(validation);
139
+ }, [selectedCountry, countries, enableCountryChange]);
140
+ // Handle country changes
141
+ var setSelectedCountry = (0, react_1.useCallback)(function (country) {
142
+ setSelectedCountryState(country);
143
+ // Reformat existing phone number with new country's rules
144
+ if (phoneNumber) {
145
+ var reformattedNumber = (0, phoneValidation_1.formatAsYouType)(phoneNumber, country.code, true); // Allow international formatting when manually changing country
146
+ setPhoneNumberState(reformattedNumber);
147
+ // Re-validate with new country
148
+ var validation = (0, phoneValidation_1.validatePhoneNumber)(reformattedNumber, country.code);
149
+ setValidationResult(validation);
150
+ }
151
+ else {
152
+ setValidationResult(null);
153
+ }
154
+ }, [selectedCountry, phoneNumber]);
155
+ // Clear auto-detected country change
156
+ var clearAutoDetectedCountryChange = (0, react_1.useCallback)(function () {
157
+ setAutoDetectedCountryChange(null);
158
+ }, []);
159
+ return {
160
+ // State
161
+ phoneNumber: phoneNumber,
162
+ selectedCountry: selectedCountry,
163
+ validationResult: validationResult,
164
+ countries: countries,
165
+ // Actions
166
+ setPhoneNumber: setPhoneNumber,
167
+ setSelectedCountry: setSelectedCountry,
168
+ // Auto-detection
169
+ autoDetectedCountryChange: autoDetectedCountryChange,
170
+ clearAutoDetectedCountryChange: clearAutoDetectedCountryChange,
171
+ // Computed
172
+ isValid: (_b = validationResult === null || validationResult === void 0 ? void 0 : validationResult.isValid) !== null && _b !== void 0 ? _b : false,
173
+ errorMessage: validationResult === null || validationResult === void 0 ? void 0 : validationResult.errorMessage,
174
+ formattedE164: (_c = validationResult === null || validationResult === void 0 ? void 0 : validationResult.formattedNumber) !== null && _c !== void 0 ? _c : '',
175
+ phoneNumberType: (validationResult === null || validationResult === void 0 ? void 0 : validationResult.phoneNumberType) !== undefined
176
+ ? String(validationResult.phoneNumberType)
177
+ : undefined,
178
+ };
179
+ };
180
+ exports.usePhoneNumber = usePhoneNumber;
181
+ //# sourceMappingURL=usePhoneNumber.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"usePhoneNumber.js","sourceRoot":"","sources":["../../../../../../src/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/hooks/usePhoneNumber.ts"],"names":[],"mappings":";;;AAAA,+BAA0E;AAC1E,+DAAwD;AACxD,oDAAgF;AAChF,4DAKkC;AA8C3B,IAAM,cAAc,GAAG,UAAC,EAOzB;;QAPyB,qBAO3B,EAAE,KAAA,EANJ,cAAc,oBAAA,EACd,oBAAiB,EAAjB,YAAY,mBAAG,EAAE,KAAA,EACjB,2BAA0B,EAA1B,mBAAmB,mBAAG,IAAI,KAAA;IAK1B,+DAA+D;IAC/D,IAAM,SAAS,GAAG,IAAA,eAAO,EAAC,cAAM,OAAA,IAAA,4BAAc,GAAE,EAAhB,CAAgB,EAAE,EAAE,CAAC,CAAC;IAEtD,8BAA8B;IACxB,IAAA,KAA6C,IAAA,gBAAQ,EACzD;QACE,IAAI,cAAc,EAAE,CAAC;YACnB,IAAM,kBAAkB,GAAG,SAAS,CAAC,IAAI,CACvC,UAAC,CAAc,IAAK,OAAA,CAAC,CAAC,IAAI,KAAK,cAAc,EAAzB,CAAyB,CAC9C,CAAC;YACF,IAAI,kBAAkB;gBAAE,OAAO,kBAAkB,CAAC;QACpD,CAAC;QACD,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,4BAA4B;IACnD,CAAC,CACF,EAVM,eAAe,QAAA,EAAE,uBAAuB,QAU9C,CAAC;IAEI,IAAA,KAAqC,IAAA,gBAAQ,EAAC,EAAE,CAAC,EAAhD,WAAW,QAAA,EAAE,mBAAmB,QAAgB,CAAC;IAClD,IAAA,KACJ,IAAA,gBAAQ,EAA+B,IAAI,CAAC,EADvC,gBAAgB,QAAA,EAAE,mBAAmB,QACE,CAAC;IACzC,IAAA,KAA4D,IAAA,gBAAQ,EAGhE,IAAI,CAAC,EAHR,yBAAyB,QAAA,EAAE,4BAA4B,QAG/C,CAAC;IAChB,IAAM,gBAAgB,GAAG,IAAA,cAAM,EAAS,EAAE,CAAC,CAAC;IAE5C,uEAAuE;IACvE,IAAM,kBAAkB,GAAG,IAAA,mBAAW,EACpC,UAAC,UAAkB,EAAE,WAAmB,EAAE,iBAAwB;QAAxB,kCAAA,EAAA,wBAAwB;QAChE,IAAM,UAAU,GAAG,IAAA,qCAAmB,EACpC,UAAU,EACV,WAA0B,CAC3B,CAAC;QACF,IAAI,iBAAiB,IAAI,UAAU,CAAC,iBAAiB,EAAE,CAAC;YACtD,OAAO,EAAE,eAAe,EAAE,UAAU,CAAC,iBAAiB,EAAE,UAAU,YAAA,EAAE,CAAC;QACvE,CAAC;QAED,IAAM,eAAe,GAAG,IAAA,iCAAe,EACrC,UAAU,EACV,WAA0B,EAC1B,IAAI,CACL,CAAC;QAEF,OAAO,EAAE,eAAe,iBAAA,EAAE,UAAU,YAAA,EAAE,CAAC;IACzC,CAAC,EACD,EAAE,CACH,CAAC;IAEF,2CAA2C;IAC3C,IAAM,wBAAwB,GAAG,IAAA,mBAAW,EAC1C,UAAC,mBAA2B;QAC1B,IAAM,eAAe,GAAG,SAAS,CAAC,IAAI,CACpC,UAAC,CAAc,IAAK,OAAA,CAAC,CAAC,IAAI,KAAK,mBAAmB,EAA9B,CAA8B,CACnD,CAAC;QACF,IAAI,eAAe,IAAI,eAAe,CAAC,IAAI,KAAK,eAAe,CAAC,IAAI,EAAE,CAAC;YACrE,OAAO,eAAe,CAAC;QACzB,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC,EACD,CAAC,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,CAClC,CAAC;IAEF,gEAAgE;IAChE,IAAA,iBAAS,EAAC;QACR,IAAI,gBAAgB,CAAC,OAAO,KAAK,YAAY;YAAE,OAAO;QACtD,gBAAgB,CAAC,OAAO,GAAG,YAAY,IAAI,EAAE,CAAC;QAE9C,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,mBAAmB,CAAC,EAAE,CAAC,CAAC;YACxB,mBAAmB,CAAC,IAAI,CAAC,CAAC;YAC1B,OAAO;QACT,CAAC;QAED,mDAAmD;QACnD,IAAM,mBAAmB,GAAG,IAAA,8CAA4B,EACtD,YAAY,EACZ,eAAe,CAAC,IAAI,CACrB,CAAC;QAEF,IAAI,mBAAmB,IAAI,mBAAmB,EAAE,CAAC;YAC/C,4DAA4D;YAC5D,IAAM,UAAU,GAAG,wBAAwB,CAAC,mBAAmB,CAAC,CAAC;YACjE,IAAI,UAAU,EAAE,CAAC;gBACf,IAAM,eAAe,GAAG,eAAe,CAAC;gBACxC,uBAAuB,CAAC,UAAU,CAAC,CAAC;gBACpC,oDAAoD;gBACpD,4BAA4B,CAAC;oBAC3B,UAAU,YAAA;oBACV,eAAe,iBAAA;iBAChB,CAAC,CAAC;YACL,CAAC;YAED,gCAAgC;YAC1B,IAAA,KAAkC,kBAAkB,CACxD,YAAY,EACZ,mBAAmB,EACnB,IAAI,CACL,EAJO,eAAe,qBAAA,EAAE,UAAU,gBAIlC,CAAC;YACF,mBAAmB,CAAC,eAAe,CAAC,CAAC;YACrC,mBAAmB,CAAC,UAAU,CAAC,CAAC;QAClC,CAAC;aAAM,CAAC;YACN,+BAA+B;YACzB,IAAA,KAAkC,kBAAkB,CACxD,YAAY,EACZ,eAAe,CAAC,IAAI,EACpB,KAAK,CACN,EAJO,eAAe,qBAAA,EAAE,UAAU,gBAIlC,CAAC;YACF,mBAAmB,CAAC,eAAe,CAAC,CAAC;YACrC,mBAAmB,CAAC,UAAU,CAAC,CAAC;QAClC,CAAC;IACH,CAAC,EAAE;QACD,YAAY;QACZ,eAAe,CAAC,IAAI;QACpB,mBAAmB;QACnB,kBAAkB;QAClB,wBAAwB;KACzB,CAAC,CAAC;IAEH,8BAA8B;IAC9B,IAAM,cAAc,GAAG,IAAA,mBAAW,EAChC,UAAC,cAAsB;QACrB,gDAAgD;QAChD,IAAM,eAAe,GAAG,IAAA,iCAAe,EACrC,cAAc,EACd,eAAe,CAAC,IAAI,EACpB,mBAAmB,CACpB,CAAC;QACF,mBAAmB,CAAC,eAAe,CAAC,CAAC;QAErC,gDAAgD;QAChD,IAAI,UAAiC,CAAC;QAEtC,IAAI,mBAAmB,EAAE,CAAC;YACxB,gGAAgG;YAChG,UAAU,GAAG,IAAA,qCAAmB,EAAC,eAAe,CAAC,CAAC;YAClD,IAAI,CAAC,UAAU,CAAC,WAAW,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;gBACnD,UAAU,GAAG,IAAA,qCAAmB,EAC9B,eAAe,EACf,eAAe,CAAC,IAAI,CACrB,CAAC;YACJ,CAAC;YAED,6DAA6D;YAC7D,IACE,UAAU,CAAC,WAAW;gBACtB,UAAU,CAAC,WAAW,KAAK,eAAe,CAAC,IAAI,EAC/C,CAAC;gBACD,IAAM,eAAe,GAAG,SAAS,CAAC,IAAI,CACpC,UAAC,CAAc,IAAK,OAAA,CAAC,CAAC,IAAI,KAAK,UAAU,CAAC,WAAW,EAAjC,CAAiC,CACtD,CAAC;gBACF,IAAI,eAAe,EAAE,CAAC;oBACpB,IAAM,eAAe,GAAG,eAAe,CAAC;oBACxC,uBAAuB,CAAC,eAAe,CAAC,CAAC;oBACzC,oDAAoD;oBACpD,4BAA4B,CAAC;wBAC3B,UAAU,EAAE,eAAe;wBAC3B,eAAe,iBAAA;qBAChB,CAAC,CAAC;gBACL,CAAC;YACH,CAAC;QACH,CAAC;aAAM,CAAC;YACN,sEAAsE;YACtE,uEAAuE;YACvE,gEAAgE;YAChE,IAAM,SAAS,GAAG,uCAAe,CAAC,WAAW,EAAE,CAAC;YAChD,IAAM,kBAAkB,GAAG,SAAS,CAAC,uBAAuB,CAC1D,eAAe,CAAC,IAAI,CACrB,CAAC;YACF,IAAM,cAAc,GAAG,WAAI,kBAAkB,CAAE,CAAC;YAEhD,IACE,eAAe,CAAC,UAAU,CAAC,GAAG,CAAC;gBAC/B,CAAC,eAAe,CAAC,UAAU,CAAC,cAAc,CAAC,EAC3C,CAAC;gBACD,+DAA+D;gBAC/D,UAAU,GAAG;oBACX,OAAO,EAAE,KAAK;oBACd,eAAe,EAAE,eAAe;oBAChC,WAAW,EAAE,eAAe,CAAC,IAAI;oBACjC,cAAc,EAAE,eAAe;oBAC/B,iBAAiB,EAAE,eAAe;oBAClC,YAAY,EACV,4DAA4D;iBAC/D,CAAC;YACJ,CAAC;iBAAM,CAAC;gBACN,sFAAsF;gBACtF,UAAU,GAAG,IAAA,qCAAmB,EAC9B,eAAe,EACf,eAAe,CAAC,IAAI,CACrB,CAAC;YACJ,CAAC;QACH,CAAC;QAED,mBAAmB,CAAC,UAAU,CAAC,CAAC;IAClC,CAAC,EACD,CAAC,eAAe,EAAE,SAAS,EAAE,mBAAmB,CAAC,CAClD,CAAC;IAEF,yBAAyB;IACzB,IAAM,kBAAkB,GAAG,IAAA,mBAAW,EACpC,UAAC,OAAoB;QACnB,uBAAuB,CAAC,OAAO,CAAC,CAAC;QAEjC,0DAA0D;QAC1D,IAAI,WAAW,EAAE,CAAC;YAChB,IAAM,iBAAiB,GAAG,IAAA,iCAAe,EACvC,WAAW,EACX,OAAO,CAAC,IAAI,EACZ,IAAI,CACL,CAAC,CAAC,gEAAgE;YACnE,mBAAmB,CAAC,iBAAiB,CAAC,CAAC;YAEvC,+BAA+B;YAC/B,IAAM,UAAU,GAAG,IAAA,qCAAmB,EAAC,iBAAiB,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;YACxE,mBAAmB,CAAC,UAAU,CAAC,CAAC;QAClC,CAAC;aAAM,CAAC;YACN,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC,EACD,CAAC,eAAe,EAAE,WAAW,CAAC,CAC/B,CAAC;IAEF,qCAAqC;IACrC,IAAM,8BAA8B,GAAG,IAAA,mBAAW,EAAC;QACjD,4BAA4B,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,QAAQ;QACR,WAAW,aAAA;QACX,eAAe,iBAAA;QACf,gBAAgB,kBAAA;QAChB,SAAS,WAAA;QAET,UAAU;QACV,cAAc,gBAAA;QACd,kBAAkB,oBAAA;QAElB,iBAAiB;QACjB,yBAAyB,2BAAA;QACzB,8BAA8B,gCAAA;QAE9B,WAAW;QACX,OAAO,EAAE,MAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,OAAO,mCAAI,KAAK;QAC3C,YAAY,EAAE,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,YAAY;QAC5C,aAAa,EAAE,MAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,eAAe,mCAAI,EAAE;QACtD,eAAe,EACb,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,eAAe,MAAK,SAAS;YAC7C,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,eAAe,CAAC;YAC1C,CAAC,CAAC,SAAS;KAChB,CAAC;AACJ,CAAC,CAAC;AAlQW,QAAA,cAAc,kBAkQzB"}
@@ -0,0 +1,21 @@
1
+ import * as React from 'react';
2
+ type StoryType = React.FunctionComponent<{
3
+ disabled: boolean;
4
+ errorMessage?: string;
5
+ isAnswered: boolean;
6
+ label: string;
7
+ placeholder?: string;
8
+ type: 'tel' | 'text';
9
+ value: string;
10
+ initialCountry?: string;
11
+ experimentName: string;
12
+ parentContainerMaxWidth: number;
13
+ isSafari: boolean;
14
+ isAutoFilledActive: boolean;
15
+ enableCountryChange: boolean;
16
+ enableCountrySearch: boolean;
17
+ useModalForCountrySelection: boolean;
18
+ strictMode?: boolean;
19
+ }>;
20
+ declare const PhoneNumberTextFieldStory: StoryType;
21
+ export default PhoneNumberTextFieldStory;
@@ -0,0 +1,41 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
7
+ var addon_actions_1 = require("@storybook/addon-actions");
8
+ var PhoneNumberTextField_1 = __importDefault(require("../../PhoneNumberTextField"));
9
+ var handlePhoneNumberChange = function (_a) {
10
+ var id = _a.id, phoneNumber = _a.phoneNumber, e164Number = _a.e164Number;
11
+ (0, addon_actions_1.action)('Phone Number Change')({ id: id, phoneNumber: phoneNumber, e164Number: e164Number });
12
+ };
13
+ var handleCountryChange = function (_a) {
14
+ var id = _a.id, selectedCountry = _a.selectedCountry, previousCountry = _a.previousCountry;
15
+ (0, addon_actions_1.action)('Country Change')({
16
+ id: id,
17
+ selectedCountry: selectedCountry.name,
18
+ previousCountry: previousCountry.name,
19
+ selectedCountryCode: selectedCountry.code,
20
+ previousCountryCode: previousCountry.code,
21
+ });
22
+ };
23
+ var handleValidationChange = function (_a) {
24
+ var id = _a.id, isValid = _a.isValid, validationResult = _a.validationResult, phoneNumber = _a.phoneNumber;
25
+ (0, addon_actions_1.action)('Validation Change')({
26
+ id: id,
27
+ isValid: isValid,
28
+ phoneNumber: phoneNumber,
29
+ errorMessage: (validationResult === null || validationResult === void 0 ? void 0 : validationResult.errorMessage) || 'No error message',
30
+ });
31
+ };
32
+ var handleFormattedValueChange = function (_a) {
33
+ var id = _a.id, formattedValue = _a.formattedValue, e164Value = _a.e164Value;
34
+ (0, addon_actions_1.action)('Formatted Value Change')({ id: id, formattedValue: formattedValue, e164Value: e164Value });
35
+ };
36
+ var PhoneNumberTextFieldStory = function (_a) {
37
+ var disabled = _a.disabled, errorMessage = _a.errorMessage, type = _a.type, isAnswered = _a.isAnswered, label = _a.label, placeholder = _a.placeholder, value = _a.value, initialCountry = _a.initialCountry, experimentName = _a.experimentName, parentContainerMaxWidth = _a.parentContainerMaxWidth, isSafari = _a.isSafari, isAutoFilledActive = _a.isAutoFilledActive, enableCountryChange = _a.enableCountryChange, enableCountrySearch = _a.enableCountrySearch, useModalForCountrySelection = _a.useModalForCountrySelection, strictMode = _a.strictMode;
38
+ return ((0, jsx_runtime_1.jsx)("div", { style: { maxWidth: parentContainerMaxWidth }, children: (0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, { disabled: disabled, errorMessage: errorMessage, onPhoneNumberChange: handlePhoneNumberChange, onCountryChange: handleCountryChange, onValidationChange: handleValidationChange, onFormattedValueChange: handleFormattedValueChange, type: type, id: "id", isAnswered: isAnswered, label: label, placeholder: placeholder, value: value, initialCountry: initialCountry, experimentName: experimentName, isSafari: isSafari, isAutoFilledActive: isAutoFilledActive, enableCountryChange: enableCountryChange, enableCountrySearch: enableCountrySearch, useModalForCountrySelection: useModalForCountrySelection, strictMode: strictMode, onBlur: function () { return (0, addon_actions_1.action)('Blur')(); }, onClick: function () { return (0, addon_actions_1.action)('Click')(); } }) }));
39
+ };
40
+ exports.default = PhoneNumberTextFieldStory;
41
+ //# sourceMappingURL=PhoneNumberTextFieldStory.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PhoneNumberTextFieldStory.js","sourceRoot":"","sources":["../../../../../../src/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/stories/PhoneNumberTextFieldStory.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,10 @@
1
+ import { Theme } from '@emotion/react';
2
+ interface IMakeFormControlPhoneNumberStylingProps {
3
+ isAnswered: boolean;
4
+ isAutoFilledActive: boolean;
5
+ isSafari: boolean;
6
+ hasError?: boolean;
7
+ theme: Theme;
8
+ }
9
+ declare const makeFormControlPhoneNumberStyling: ({ isAnswered, isAutoFilledActive, isSafari, hasError, theme, }: IMakeFormControlPhoneNumberStylingProps) => import("@emotion/react").SerializedStyles;
10
+ export default makeFormControlPhoneNumberStyling;
@@ -0,0 +1,144 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ Object.defineProperty(exports, "__esModule", { value: true });
14
+ var react_1 = require("@emotion/react");
15
+ var material_1 = require("@mui/material");
16
+ var makeFormControlPhoneNumberStyling = function (_a) {
17
+ var _b, _c;
18
+ var isAnswered = _a.isAnswered, isAutoFilledActive = _a.isAutoFilledActive, isSafari = _a.isSafari, hasError = _a.hasError, theme = _a.theme;
19
+ return (0, react_1.css)({
20
+ width: '100%',
21
+ '& .MuiInputLabel-shrink': {
22
+ marginLeft: 87,
23
+ },
24
+ '& .MuiInputBase-root input': {
25
+ paddingLeft: '1.2rem !important',
26
+ borderLeft: 'none',
27
+ borderTopLeftRadius: 0,
28
+ borderBottomLeftRadius: 0,
29
+ backgroundColor: 'transparent',
30
+ },
31
+ '& .MuiInputBase-root': {
32
+ boxShadow: 'none',
33
+ },
34
+ '& .phone-input-container': __assign(__assign(__assign(__assign(__assign({ width: '100%', display: 'flex', alignItems: 'stretch', position: 'relative', border: "1px solid ".concat(theme.mvf.palette.component.answerUnselectedColor), borderRadius: '4px', overflow: 'hidden', backgroundColor: "".concat(theme.mvf.palette.background.answerBackgroundColor, " !important") }, (isAutoFilledActive && {
35
+ backgroundColor: "".concat(isSafari ? 'rgb(250, 255, 189)' : 'rgb(232, 240, 254)', " !important"),
36
+ })), { boxShadow: theme.mvf.boxShadow.timid }), (isAnswered &&
37
+ !hasError && {
38
+ borderColor: theme.mvf.palette.component.answerSelectedColor,
39
+ })), { '@media (hover: hover)': {
40
+ '&:hover': {
41
+ borderColor: hasError
42
+ ? theme.mvf.palette.status.error
43
+ : theme.mvf.palette.component.answerSelectedColor,
44
+ '& .country-selector': {
45
+ borderRightColor: hasError
46
+ ? theme.mvf.palette.status.error
47
+ : theme.mvf.palette.component.answerSelectedColor,
48
+ },
49
+ },
50
+ }, '&:has(input:focus)': {
51
+ borderColor: hasError
52
+ ? theme.mvf.palette.status.error
53
+ : theme.mvf.palette.component.answerSelectedColor,
54
+ boxShadow: theme.mvf.boxShadow.fierce,
55
+ '& .country-selector': {
56
+ borderRightColor: hasError
57
+ ? theme.mvf.palette.status.error
58
+ : theme.mvf.palette.component.answerSelectedColor,
59
+ },
60
+ } }), (hasError && {
61
+ borderColor: theme.mvf.palette.status.error,
62
+ })),
63
+ '& .MuiInputBase-root.MuiInputBase-formControl': {
64
+ width: '100%',
65
+ flex: 1,
66
+ border: 'none',
67
+ backgroundColor: 'transparent',
68
+ boxShadow: 'none !important',
69
+ '& .MuiInputBase-input': {
70
+ border: 'none',
71
+ borderRadius: 0,
72
+ backgroundColor: 'transparent',
73
+ },
74
+ },
75
+ '& .country-selector': __assign(__assign({ paddingLeft: theme.mvf.spacing.smedium, paddingRight: theme.mvf.spacing.smedium, borderRight: "1px solid ".concat(theme.mvf.palette.component.answerUnselectedColor), backgroundColor: 'transparent' }, (isAnswered &&
76
+ !hasError && {
77
+ borderRightColor: theme.mvf.palette.component.answerSelectedColor,
78
+ })), (hasError && {
79
+ borderRightColor: theme.mvf.palette.status.error,
80
+ })),
81
+ '& .Mui-error .phone-input-container': {
82
+ borderColor: theme.mvf.palette.status.error,
83
+ '& .country-selector': {
84
+ borderRightColor: theme.mvf.palette.status.error,
85
+ },
86
+ },
87
+ '& .Mui-focused .phone-input-container .country-selector': {
88
+ borderColor: theme.mvf.palette.component.answerSelectedColor,
89
+ '& .country-selector': {
90
+ borderRightColor: theme.mvf.palette.component.answerSelectedColor,
91
+ },
92
+ },
93
+ '& .MuiSelect-root': {
94
+ position: 'absolute',
95
+ opacity: 0,
96
+ pointerEvents: 'none',
97
+ },
98
+ // Theme styling for the country picker dropdown
99
+ '& .MuiPaper-root': {
100
+ backgroundColor: theme.mvf.palette.background.answerBackgroundColor,
101
+ border: "1px solid ".concat(theme.mvf.palette.component.answerUnselectedColor),
102
+ boxShadow: theme.mvf.boxShadow.timid,
103
+ '& .MuiMenuItem-root': (_b = {
104
+ color: theme.mvf.palette.text.primaryTextColor,
105
+ fontSize: theme.mvf.fontSize.mini
106
+ },
107
+ _b[theme.breakpoints.up('mobileMedium')] = {
108
+ fontSize: theme.mvf.fontSize.small,
109
+ },
110
+ _b['&:hover'] = {
111
+ backgroundColor: (0, material_1.lighten)(theme.mvf.palette.component.answerSelectedColor, theme.mvf.filters.lighten.extreme),
112
+ },
113
+ _b['&.Mui-selected'] = {
114
+ backgroundColor: (0, material_1.lighten)(theme.mvf.palette.component.answerSelectedColor, 0.9),
115
+ color: theme.mvf.palette.component.answerSelectedColor,
116
+ fontWeight: theme.mvf.typography.weight.thick,
117
+ },
118
+ _b),
119
+ },
120
+ // Search input styling within dropdown
121
+ '& .country-search-input': {
122
+ '& .MuiInputBase-input': (_c = {
123
+ fontSize: theme.mvf.fontSize.mini
124
+ },
125
+ _c[theme.breakpoints.up('mobileMedium')] = {
126
+ fontSize: theme.mvf.fontSize.small,
127
+ },
128
+ _c.color = theme.mvf.palette.text.primaryTextColor,
129
+ _c['&::placeholder'] = {
130
+ color: theme.mvf.palette.text.secondaryTextColor,
131
+ fontWeight: theme.mvf.typography.weight.medium,
132
+ },
133
+ _c),
134
+ },
135
+ // Autofill styling support for browsers that support :has() selector
136
+ '@supports (selector(:has(*)))': {
137
+ '& .phone-input-container:has(input:-webkit-autofill) .country-selector': {
138
+ backgroundColor: "".concat(isSafari ? 'rgb(250, 255, 189)' : 'rgb(232, 240, 254)', " !important"),
139
+ },
140
+ },
141
+ });
142
+ };
143
+ exports.default = makeFormControlPhoneNumberStyling;
144
+ //# sourceMappingURL=makeFormControlPhoneNumberStyling.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"makeFormControlPhoneNumberStyling.js","sourceRoot":"","sources":["../../../../../../src/Components/Molecules/PhoneNumberTextFieldCustom/__helpers__/styling/makeFormControlPhoneNumberStyling.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,12 @@
1
+ declare const supportedCountries: readonly ["US", "GB", "CA", "AU", "DE", "FR", "IT", "ES", "NL", "BE", "SE", "NO", "DK", "FI", "CH", "AT", "IE", "NZ", "JP", "KR", "CN", "IN", "BR", "MX", "AR", "CL", "CO", "PE", "VE", "EC", "BO", "PY", "UY", "GY", "SR", "FK", "GF", "AD", "AE", "AF", "AG", "AI", "AL", "AM", "AO", "AS", "AW", "AZ", "BA", "BB", "BD", "BF", "BG", "BH", "BI", "BJ", "BL", "BM", "BN", "BS", "BT", "BW", "BY", "BZ", "CD", "CF", "CG", "CI", "CM", "CR", "CU", "CV", "CY", "CZ", "DJ", "DM", "DO", "DZ", "EG", "EH", "ER", "ET", "FJ", "FM", "FO", "GA", "GD", "GE", "GH", "GI", "GL", "GM", "GN", "GP", "GQ", "GT", "GU", "GW", "HK", "HN", "HR", "HT", "HU", "ID", "IL", "IQ", "IR", "IS", "JM", "JO", "KE", "KG", "KH", "KI", "KM", "KN", "KP", "KW", "KY", "KZ", "LA", "LB", "LC", "LI", "LK", "LR", "LS", "LT", "LU", "LV", "LY", "MA", "MC", "MD", "ME", "MF", "MG", "MH", "MK", "ML", "MM", "MN", "MO", "MP", "MQ", "MR", "MS", "MT", "MU", "MV", "MW", "MY", "MZ", "NA", "NC", "NE", "NF", "NG", "NI", "NP", "NR", "NU", "OM", "PA", "PF", "PG", "PH", "PK", "PL", "PM", "PR", "PS", "PW", "QA", "RE", "RO", "RS", "RU", "RW", "SA", "SB", "SC", "SD", "SG", "SH", "SI", "SJ", "SK", "SL", "SM", "SN", "SO", "ST", "SV", "SY", "TC", "TD", "TG", "TH", "TJ", "TK", "TL", "TM", "TN", "TO", "TR", "TT", "TV", "TW", "UA", "UG", "VA", "VC", "VG", "VI", "VN", "VU", "WF", "WS", "YE", "YT", "ZM"];
2
+ export type CountryCode = (typeof supportedCountries)[number];
3
+ export interface CountryData {
4
+ code: CountryCode;
5
+ name: string;
6
+ dialCode: string;
7
+ example: string;
8
+ }
9
+ export declare const getCountryData: () => CountryData[];
10
+ export declare const getCountryByCode: (code: CountryCode) => CountryData | undefined;
11
+ export declare const getCountryByDialCode: (dialCode: string) => CountryData | undefined;
12
+ export {};