diff --git a/corehq/apps/analytics/static/analytix/js/cta_forms.js b/corehq/apps/analytics/static/analytix/js/cta_forms.js index 2971f5c947c9..7658f14b2c55 100644 --- a/corehq/apps/analytics/static/analytix/js/cta_forms.js +++ b/corehq/apps/analytics/static/analytix/js/cta_forms.js @@ -5,14 +5,15 @@ hqDefine('analytix/js/cta_forms', [ 'underscore', 'hqwebapp/js/initial_page_data', 'hqwebapp/js/assert_properties', - 'hqwebapp/js/bootstrap3/validators.ko', // needed for validation of startDate and endDate 'intl-tel-input/build/js/intlTelInput.min', + 'hqwebapp/js/bootstrap3/validators.ko', // needed for validation of startDate and endDate ], function ( $, ko, _, initialPageData, assertProperties, + intlTelInput, ) { let hubspotCtaForm = function (config) { let self = {}; @@ -126,9 +127,10 @@ hqDefine('analytix/js/cta_forms', [ return !!self.errorMessage(); }); - config.phoneNumberSelector.intlTelInput({ + var phoneNumberWidget = intlTelInput(config.phoneNumberSelector.get(0), { + containerClass: "w-100", separateDialCode: true, - utilsScript: initialPageData.get('number_utils_script'), + loadUtils: () => import("intl-tel-input/utils"), initialCountry: "auto", geoIpLookup: function (success) { $.get("https://ipinfo.io", function () {}, "jsonp").always(function (resp) { @@ -142,7 +144,7 @@ hqDefine('analytix/js/cta_forms', [ }); self.getFullPhoneNumber = function () { - return config.phoneNumberSelector.intlTelInput("getNumber"); + return phoneNumberWidget.getNumber(); }; self.submitForm = function () { diff --git a/corehq/apps/hqwebapp/static/hqwebapp/less/b5-compatibility.less b/corehq/apps/hqwebapp/static/hqwebapp/less/b5-compatibility.less new file mode 100644 index 000000000000..c0cbe809fc79 --- /dev/null +++ b/corehq/apps/hqwebapp/static/hqwebapp/less/b5-compatibility.less @@ -0,0 +1,3 @@ +.w-100 { + width: 100%; +} diff --git a/corehq/apps/hqwebapp/static/hqwebapp/less/style.less b/corehq/apps/hqwebapp/static/hqwebapp/less/style.less index f987d726b025..f9440037418d 100644 --- a/corehq/apps/hqwebapp/static/hqwebapp/less/style.less +++ b/corehq/apps/hqwebapp/static/hqwebapp/less/style.less @@ -2,3 +2,4 @@ @b3-import-mixins: '../../../../../../../../node_modules/bootstrap/less/mixins'; @import 'style-imports'; +@import 'b5-compatibility'; diff --git a/corehq/apps/hqwebapp/templates/hqwebapp/base.html b/corehq/apps/hqwebapp/templates/hqwebapp/base.html index e5e5c4437c73..55edb6eb2590 100644 --- a/corehq/apps/hqwebapp/templates/hqwebapp/base.html +++ b/corehq/apps/hqwebapp/templates/hqwebapp/base.html @@ -256,7 +256,6 @@ {# for get demo and get trial forms #} - {% initial_page_data 'number_utils_script' 'intl-tel-input/build/js/utils.js'|static %} {% initial_page_data 'ace_base_path' 'ace-builds/src-min-noconflict'|static %} {% if demo_workflow_ab_v2 %} diff --git a/corehq/apps/registration/static/registration/js/new_user.ko.js b/corehq/apps/registration/static/registration/js/new_user.ko.js index cd945e3079b2..34fa93d33365 100644 --- a/corehq/apps/registration/static/registration/js/new_user.ko.js +++ b/corehq/apps/registration/static/registration/js/new_user.ko.js @@ -6,9 +6,9 @@ hqDefine('registration/js/new_user.ko', [ 'analytix/js/kissmetrix', 'analytix/js/appcues', 'hqwebapp/js/initial_page_data', + 'intl-tel-input/build/js/intlTelInput.min', 'jquery-ui/ui/effect', 'jquery-ui/ui/effects/effect-slide', - 'intl-tel-input/build/js/intlTelInput.min', 'hqwebapp/js/password_validators.ko', ], function ( $, @@ -18,6 +18,7 @@ hqDefine('registration/js/new_user.ko', [ kissmetrics, appcues, initialPageData, + intlTelInput, ) { var module = {}; @@ -430,21 +431,22 @@ hqDefine('registration/js/new_user.ko', [ module.submitAttemptFn = callback; }, setPhoneNumberInput: function (inputSelector) { - var $number = $(inputSelector); - $number.intlTelInput({ - separateDialCode: true, - utilsScript: initialPageData.get('number_utils_script'), - initialCountry: "auto", - geoIpLookup: function (success) { - $.get("https://ipinfo.io", function () {}, "jsonp").always(function (resp) { - var countryCode = (resp && resp.country) ? resp.country : ""; - if (!countryCode) { - countryCode = "us"; - } - success(countryCode); - }); - }, - }); + var $number = $(inputSelector), + numberWidget = intlTelInput($number[0], { + containerClass: "w-100", + separateDialCode: true, + loadUtils: () => import("intl-tel-input/utils"), + initialCountry: "auto", + geoIpLookup: function (success) { + $.get("https://ipinfo.io", function () {}, "jsonp").always(function (resp) { + var countryCode = (resp && resp.country) ? resp.country : ""; + if (!countryCode) { + countryCode = "us"; + } + success(countryCode); + }); + }, + }); $number.keydown(function (e) { // prevents non-numeric numbers from being entered. // from http://stackoverflow.com/questions/995183/how-to-allow-only-numeric-0-9-in-html-inputbox-using-jquery @@ -465,7 +467,7 @@ hqDefine('registration/js/new_user.ko', [ } }); module.getPhoneNumberFn = function () { - return $number.intlTelInput("getNumber"); + return numberWidget.getNumber(); }; }, initRMI: function (rmiUrl) { diff --git a/package.json b/package.json index e87c15061baf..87184a667987 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,7 @@ "exports-loader": "5.0.0", "fast-levenshtein": "2.0.6", "htmx.org": "2.0.3", - "intl-tel-input": "9.0.7", + "intl-tel-input": "25.3.0", "jquery": "3.5.1", "jquery-memoized-ajax": "0.5.0", "jquery-textchange": "jmalonzo/bower-jquery-textchange#0.2.3", diff --git a/yarn.lock b/yarn.lock index 615ae7b30999..a7a73ba6efe3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4510,12 +4510,10 @@ interpret@~1.1.0: resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614" integrity sha1-ftGxQQxqDg94z5XTuEQMY/eLhhQ= -intl-tel-input@9.0.7: - version "9.0.7" - resolved "https://registry.yarnpkg.com/intl-tel-input/-/intl-tel-input-9.0.7.tgz#2e33f5c3c65162909c72efc5d545c49073972911" - integrity sha1-LjP1w8ZRYpCccu/F1UXEkHOXKRE= - dependencies: - jquery ">=1.7" +intl-tel-input@25.3.0: + version "25.3.0" + resolved "https://registry.yarnpkg.com/intl-tel-input/-/intl-tel-input-25.3.0.tgz#a22fcb0c8058f9d9ef071849d86e205283df14b8" + integrity sha512-w45O+cMpltGvZPdq36wkcpgCGIuOsihqrklJdvV2hYwKOT1rQuLjX8wjFQXLIs7ku0HK0qAU0MT6+DMh659qBw== ip-address@^9.0.5: version "9.0.5" @@ -7235,7 +7233,16 @@ string-template@~0.2.1: resolved "https://registry.yarnpkg.com/string-template/-/string-template-0.2.1.tgz#42932e598a352d01fc22ec3367d9d84eec6c9add" integrity sha1-QpMuWYo1LQH8IuwzZ9nYTuxsmt0= -"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0": + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + +"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -7281,7 +7288,7 @@ string_decoder@~1.1.1: dependencies: safe-buffer "~5.1.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -7295,6 +7302,13 @@ strip-ansi@^6.0.0: dependencies: ansi-regex "^5.0.0" +strip-ansi@^6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + strip-ansi@^7.0.1, strip-ansi@^7.1.0: version "7.1.0" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45" @@ -7931,7 +7945,7 @@ workerpool@^6.5.1: resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.5.1.tgz#060f73b39d0caf97c6db64da004cd01b4c099544" integrity sha512-Fs4dNYcsdpYSAfVxhnl1L5zTksjvOJxtC5hzMNl+1t9B8hTJTdKDyZ5ju7ztgPy+ft9tBFXoOlDNiOT9WUXZlA== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -7949,6 +7963,15 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" +wrap-ansi@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== + dependencies: + ansi-styles "^4.0.0" + string-width "^4.1.0" + strip-ansi "^6.0.0" + wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"