');
+ this.picker = new Picker({
+ parent: picker_wrapper,
+ countries: frappe.boot.country_codes
+ });
+
+ this.$wrapper.popover({
+ trigger: 'manual',
+ offset: `${-this.$wrapper.width() / 4.5}, 5`,
+ boundary: 'viewport',
+ placement: 'bottom',
+ template: `
+
+ `,
+ content: () => picker_wrapper,
+ html: true
+ }).on('show.bs.popover', () => {
+ setTimeout(() => {
+ this.picker.refresh();
+ }, 10);
+ }).on('hidden.bs.popover', () => {
+ $('body').off('click.phone-popover');
+ $(window).off('hashchange.phone-popover');
+ });
+
+ // Default icon when nothing is selected.
+ this.selected_icon = this.$wrapper.find('.selected-phone');
+ let input_value = this.get_input_value()
+ if (!this.selected_icon.length) {
+ this.selected_icon = $(`
${frappe.utils.icon("down", "sm")}
`);
+ this.selected_icon.insertAfter(this.$input);
+ this.selected_icon.append($(`
`))
+ this.$isd = this.selected_icon.find('.country');
+ if(input_value && input_value.split("-").length == 2) {
+ this.$isd.text(this.value.split("-")[0])
+ }
+ }
+ }
+
+ refresh() {
+ super.refresh();
+
+ // Previously opened doc values get fetched.
+ if(!this.value && this.frm.is_new()) {
+ this.$input.val("");
+ this.$wrapper.find('.country').text("")
+ this.selected_icon.find('use').attr('href', '#icon-down')
+ this.flag = this.selected_icon.find('svg');
+ let has_flag = this.flag.hasClass('flag-md');
+ if (has_flag) {
+ this.flag.toggleClass('flag-md');
+ this.flag.toggleClass('icon-sm');
+ }
+ }
+
+ if(this.value && this.value.split("-").length == 2) {
+ let isd = this.value.split("-")[0];
+ let country_data = frappe.boot.country_codes;
+
+ for (const country in country_data) {
+ if (Object.values(country_data[country]).includes(isd)) {
+ let code = country_data[country].code;
+ this.change_flag(code);
+ }
+ }
+ this.picker.set_country(isd);
+ this.picker.refresh();
+ if (this.picker.country && this.picker.country !== this.$isd.text()) {
+ this.$isd.length && this.$isd.text(isd)
+ }
+ }
+ }
+
+
+ set_formatted_input(value) {
+ if(value && value.includes('-')) {
+ this.set_model_value(value)
+ } else if(this.$isd.text().trim() && this.value) {
+ let code_number = this.$isd.text() + '-' + value;
+ this.set_model_value(code_number)
+ }
+ this.$input && value && this.$input.val(value.split("-").pop())
+ }
+
+ reset_icon() {
+
+ }
+
+ change_flag(country_code) {
+ this.selected_icon.find('use').attr('href', '#'+country_code)
+ this.$icon = this.selected_icon.find('svg');
+ if (this.$icon.hasClass('icon-sm')) {
+ this.$icon.removeClass('icon-sm');
+ this.selected_icon.find('svg').addClass('flag-md')
+ }
+ }
+
+ get_country(country=null) {
+ const country_codes = frappe.boot.country_codes;
+ return country_codes[country].isd;
+ }
+ get_country_flag(country) {
+ const country_codes = frappe.boot.country_codes;
+ let code = country_codes[country].code;
+ return frappe.utils.flag(code, "md")
+ }
+};
diff --git a/frappe/public/js/frappe/phone_picker/phone_picker.js b/frappe/public/js/frappe/phone_picker/phone_picker.js
new file mode 100644
index 0000000000..12285cca7e
--- /dev/null
+++ b/frappe/public/js/frappe/phone_picker/phone_picker.js
@@ -0,0 +1,92 @@
+class Picker {
+ constructor(opts) {
+ this.parent = opts.parent;
+ this.width = opts.width;
+ this.height = opts.height;
+ this.country = opts.country;
+ opts.country && this.set_country(opts.country);
+ this.countries = opts.countries;
+ this.setup_picker();
+ }
+
+ refresh() {
+ this.update_icon_selected(true);
+ }
+
+ setup_picker() {
+ this.icon_picker_wrapper = $(`
+
+
+
+ ${frappe.utils.icon('search', "sm")}
+
+
+
+ `);
+ this.parent.append(this.icon_picker_wrapper);
+ this.icon_wrapper = this.icon_picker_wrapper.find('.phones');
+ this.search_input = this.icon_picker_wrapper.find('.search-phones > input');
+ this.refresh();
+ this.setup_icons();
+ }
+
+ setup_icons() {
+
+ Object.entries(this.countries).forEach(([country, info]) => {
+ let $country = $(`
${frappe.utils.flag(info.code, "md")}${country}
`);
+ this.icon_wrapper.append($country);
+ const set_values = () => {
+ this.set_country(country);
+ this.update_icon_selected();
+ };
+ $country.on('click', () => {
+ set_values();
+ });
+ $country.hover(() => {
+ $country.toggleClass("bg-gray-100");
+ });
+ this.search_input.keydown((e) => {
+ const key_code = e.keyCode;
+ if ([13, 32].includes(key_code)) {
+ e.preventDefault();
+ set_values();
+ }
+ });
+ this.search_input.keyup((e) => {
+ e.preventDefault();
+ this.filter_icons();
+ });
+
+ this.search_input.on('search', () => {
+ this.filter_icons();
+ });
+ });
+ }
+
+ filter_icons() {
+ let value = this.search_input.val();
+ if (!value) {
+ this.icon_wrapper.find(".phone-wrapper").removeClass('hidden');
+ } else {
+ this.icon_wrapper.find(".phone-wrapper").addClass('hidden');
+ this.icon_wrapper.find(`.phone-wrapper[id*='${value}']`).removeClass('hidden');
+ }
+ }
+
+ update_icon_selected(silent) {
+ !silent && this.on_change && this.on_change(this.get_country());
+ }
+
+ set_country(country) {
+ this.country = country || '';
+ }
+
+ get_country() {
+ if (!this.country) return frappe.utils.icon("down", "sm")
+ return this.country;
+ }
+}
+
+export default Picker;
diff --git a/frappe/public/js/frappe/utils/utils.js b/frappe/public/js/frappe/utils/utils.js
index 2baff996c6..8b3dc80ce6 100644
--- a/frappe/public/js/frappe/utils/utils.js
+++ b/frappe/public/js/frappe/utils/utils.js
@@ -1156,6 +1156,19 @@ Object.assign(frappe.utils, {
`;
},
+ flag(icon_name, size="sm", icon_class="", icon_style="", svg_class="") {
+ let size_class = "";
+
+ if (typeof size == "object") {
+ icon_style += ` width: ${size.width}; height: ${size.height}`;
+ } else {
+ size_class = `flag-${size}`;
+ }
+ return `
`;
+ },
+
make_chart(wrapper, custom_options={}) {
let chart_args = {
type: 'bar',
diff --git a/frappe/public/scss/common/controls.scss b/frappe/public/scss/common/controls.scss
index 954916c911..15fd493096 100644
--- a/frappe/public/scss/common/controls.scss
+++ b/frappe/public/scss/common/controls.scss
@@ -2,6 +2,7 @@
@import "color_picker";
@import "icon_picker";
@import "datepicker";
+@import "phone_picker";
// password
.form-control[data-fieldtype="Password"] {
diff --git a/frappe/public/scss/common/phone_picker.scss b/frappe/public/scss/common/phone_picker.scss
new file mode 100644
index 0000000000..74a61cbbe8
--- /dev/null
+++ b/frappe/public/scss/common/phone_picker.scss
@@ -0,0 +1,119 @@
+.phone-picker {
+ font-size: var(--text-xs);
+ color: var(--text-muted);
+ --phone-picker-width: 210px;
+ width: var(--phone-picker-width);
+ .phones {
+ margin-top: 10px;
+ display: flex;
+ flex-wrap: wrap;
+ overflow-y: scroll;
+ max-height: 210px;
+ cursor: pointer;
+
+ /* Hide scrollbar for IE, Edge and Firefox */
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+
+ /* Hide scrollbar for Chrome, Safari and Opera */
+ &::-webkit-scrollbar {
+ display: none;
+ }
+
+ .phone-wrapper {
+ display: flex;
+ width: 210px;
+ height: 30px;
+ text-align: center;
+ align-items: center;
+ border-radius: 0.375rem;
+ padding: 0.5rem;
+
+ .country {
+ display: flex;
+ margin-left: 0.6rem;
+ flex-grow: 1;
+ }
+ }
+ }
+
+ .search-phones {
+ position: relative;
+
+ input[type='search'] {
+ height: inherit;
+ padding-left: 30px;
+ }
+
+ .search-phone {
+ position: absolute;
+ top: 7px;
+ left: 7px;
+ }
+ }
+}
+.phone-picker-popover {
+ left: -20px !important;
+ .picker-arrow {
+ left: 15px !important;
+ }
+}
+.frappe-control[data-fieldtype='Phone']
+ {
+ input {
+ padding-left: 70px;
+ }
+ .selected-phone {
+ display: flex;
+ cursor: pointer;
+ width: 52px;
+ height: 18px;
+ border-radius: 5px;
+ position: absolute;
+ top: calc(50% + 2.6px);
+ left: 8px;
+ content: ' ';
+
+ .country {
+ display: flex;
+ margin-left: 0.6rem;
+ flex-grow: 1;
+ }
+
+ }
+ .like-disabled-input {
+ .phone-value {
+ padding-left: 25px;
+ }
+ .selected-phone {
+ top: 20%;
+ cursor: default;
+ }
+ }
+}
+
+.data-row.row {
+ .selected-phone {
+ top: calc(50% - 11px);
+ z-index: 2;
+ }
+}
+
+.bg-gray-100 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(244,245,246,var(--tw-bg-opacity));
+}
+
+.dt-cell__content {
+ .selected-phone {
+ display: contents;
+ }
+}
+
+.dt-cell__edit, .filter-field {
+ .selected-phone {
+ top: 5px !important;
+ }
+}
+
+