qonto / ember-phone-input Goto Github PK

Is it possible to override the styles? I am not seeing any documentation on it and would love to be able to customize the look of this input. Thank you!

I'm using ember octane, with ember-phone-input 2.0.7; when you enter a phone it doesn't get formatted, it stays visually as 3824234225 instead (382) 423-4225

Would it be possible to implement this as specified here (getNumberType function).

I would submit a pull request myself but I'm on a really tight schedule these days.

Thanks in advance.

How can I get separated number and country code ?

+12015552103

CountryCode
+1
Number
2015552103

thanks.

I noticed there are quite a few missing options, but I think this is the most important one that is missing.

https://intl-tel-input.com/examples/localise-countries.html

Creating this ticket to track it, I may attempt to do it myself at some point if it's not already on the roadmap.

this._iti can be null, so destroy() method doesn't exist.

The issue origin probably comes from the didInsertElement because component's hooks aren't async.

didInsertElement() {
    this._super(...arguments);

    this._loadAndSetup(); // This is an async function
},
// ...
willDestroyElement() {
    this._iti.destroy();
    // ...
},

didInsertElement is not waiting the this._loadAndSetup() end, the willDestroyElement hook can be run before this._loadAndSetup() has finished.

Hi,

number parameter in the update action isn't in a consistent format.
This issue is exaggerated with separateDialCode option enabled.

The following examples are taken from https://qonto.github.io/ember-phone-input

• With an incomplete french number -> number is formatted
  

• With a complete french number -> number is not formatted
  

• With a french number > valid number -> number is formatted
  

You can also reproduce the issue with separateDialCode disabled but you have to type a number which has: length > valid number length.

I think update action should provide number in 2 versions (without formatting & with formatting).

Great add-on. I have one issue, and maybe there's a good work-around.

If a user selects a country and then enters a phone number, the number and metadata arguments are passed to the action handler appropriately.

However, if a user selects an initial country, then enters their number, and then goes back and toggles their country selection to a different country, while the number argument updates in the action handler, the metaData argument will not. This could lead to a user accidentally saving their number with the wrong country code.

Example:
{{phone-input number=user.phoneNumber update=(action 'updatePhoneNumber')}}

    updatePhoneNumber(number, metaData) {
      console.log('number', number) // always logs the correct, updated number
      console.log('countryCode', metaData) // only logs first selection
    }

Am I missing something here?

We would like to convert to Embroider addon v2

Some resources:
https://github.com/embroider-build/embroider/blob/main/PORTING-ADDONS-TO-V2.md
https://github.com/NullVoxPopuli/ember-addon-migrator
https://www.kaliber5.de/en/blog/v2-addon_en

I noticed that between v3.1.0 and v3.2.0 the build size grown up by 50KB. Is that expected?

Uncaught SyntaxError: Unexpected token '<' for chunk.js file. We are using ember-cli v3.7.1 and node 10.13.0

After an upgrade from 3.0.0 to 3.1.0 i get this error : this.phoneInput.intlTelInput is not a function
This method is called in the phone-input component.

https://github.com/qonto/ember-phone-input/tree/v1.1.1 -> 404

Also looking at the code in the NPM version of 1.1.1 aggresive is still there.

I could open another PR however master is correct!

Cheers
Dave

I use pnpm in within a workspace/monorepo, and when I run ember s I get:

Cannot find module 'intl-tel-input/package.json' from '/Users/machty/code/exc/fpr-ember/packages/@futureproofretail/shopper-app'

I am able to solve this by adding intl-tel-input as a dependency to my ember app. I could probably solve this some other pnpm-specific way, perhaps with shamefully-hoist.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

• WARN: RepoCacheS3.read() - failure

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update babel monorepo to v7.23.7 (patch) (@babel/core, @babel/plugin-proposal-decorators)
• Update dependency @glint/core to v1.2.2
• Update dependency @glint/environment-ember-loose to v1.2.2
• Update dependency @glint/template to v1.2.2
• Update dependency ember-auto-import to v2.7.2
• Update dependency eslint-plugin-prettier to v5.1.2
• Update dependency rollup to v4.9.4
• Update embroider monorepo (patch) (@embroider/addon-dev, @embroider/test-setup)
• Update dependency ember-page-title to v8.2.0
• Update dependency eslint-plugin-n to v16.6.2
• Update dependency typescript to v5.3.3
• Update typescript-eslint monorepo to v6.18.1 (minor) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• Update Node.js to v20
• Update actions/checkout action to v4
• Update dependency eslint-plugin-qunit to v8
• Update dependency release-it to v17
• Lock file maintenance
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• Update dependency ember-cli to v5

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Hi all! Probably I am missing something pretty obvious here, but for some reason, after installing ember-phone-input in a newly created ember app with Ember 5, my app is not compiling any more. I have the following error from ember-auto-import:

ERROR in ./node_modules/intl-tel-input/build/img/flags.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./node_modules/css-loader/dist/cjs.js!./node_modules/ember-phone-input/dist/styles/styles.css 4:0-88 7:73-102
 @ ./node_modules/ember-phone-input/dist/styles/styles.css 2:12-81 9:17-24 13:15-29
 @ ./node_modules/ember-phone-input/dist/components/phone-input.js 1:368-397
 @ ../../../../../private/var/folders/z6/9q3xj7zn60n2xm64z68t868m0000gn/T/broccoli-69888Etfv1hkx9N2x/cache-238-webpack_bundler_ember_auto_import_webpack/app.cjs 20:144-195

Should I add any specific loader in my ember-cli-build.js file to be able to handle the flag.png files? Any recommendations?

Thanks!

Alejandro

In this line https://github.com/qonto/ember-phone-input/blob/master/addon/services/phone-input.js#L46 we have only two states.
But I need to use custom.
I use S3 for images and I have a problem with the flag images

When using this input, it's not possible to clear or reset the input. Example usage:

{{phone-input initialCountry="us" number=phone update=(action "phoneUpdated")}}

On form submit, I call this.set("phone", null), but the input field maintains its value. I couldn't find a way to clear it without resorting to jQuery.

We should use Embroider build system for this addon
See https://github.com/embroider-build/embroider#how-to-try-it

ember-beta and ember-canary CI scenarios run the test suite against ember@4 (as of today). To fix these test scenarios, we will have to rewrite the doc to remove addon-docs or at least to remove our pods usage (see #361 (comment) for details).

Here is a checklist to help you add a new option.

We've been adding options quite a few times in the past months. So, I'll write down the checklist here to help you either to implement the option or to review the changes.

Checklist:

• obvisously, add your option
• do not forget to write inline documentation for your code in addon/components/phone-input
• add a test, probably in tests/integration/components/phone-input-test.js
• add a playground example in tests/dummy/app/pods/docs/components/phone-input/all-options/template

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected]
I noticed that there is feature enhancement already (#318), but here is the diff that works for me:

diff --git a/node_modules/ember-phone-input/addon/components/phone-input.js b/node_modules/ember-phone-input/addon/components/phone-input.js
index 40393b2..566ea48 100644
--- a/node_modules/ember-phone-input/addon/components/phone-input.js
+++ b/node_modules/ember-phone-input/addon/components/phone-input.js
@@ -98,6 +98,8 @@ export default Component.extend({
     */
     this.autoPlaceholder = this.autoPlaceholder || 'polite';
 
+    this.customPlaceholder = this.customPlaceholder || null;
+
     /**
       It will just be the first country in the list. Set the initial country by
       it's country code. Defaults to ''.
@@ -226,6 +228,7 @@ export default Component.extend({
     const {
       allowDropdown,
       autoPlaceholder,
+      customPlaceholder,
       initialCountry,
       onlyCountries,
       preferredCountries,
@@ -237,6 +240,7 @@ export default Component.extend({
       nationalMode: true,
       allowDropdown,
       autoPlaceholder,
+      customPlaceholder: customPlaceholder ? () => { return customPlaceholder } : null,
       initialCountry,
       onlyCountries,
       preferredCountries,

This issue body was partially generated by patch-package.

I have PR to add separateDialCode option, but don't have permissions to commit in this repo.

It would be useful to be able to pass in a custom placeholder value to apply to the phone number <input> field. 👍

ERROR in ./node_modules/intl-tel-input/build/img/flags.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
@ ./node_modules/css-loader/dist/cjs.js!./node_modules/intl-tel-input/build/css/intlTelInput.css 4:0-61 7:73-102
@ ./node_modules/intl-tel-input/build/css/intlTelInput.css 2:12-87 9:17-24 13:15-29
@ ./node_modules/ember-phone-input/dist/components/phone-input.js 1:144-194

ERROR in ./node_modules/intl-tel-input/build/img/[email protected] 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
@ ./node_modules/css-loader/dist/cjs.js!./node_modules/intl-tel-input/build/css/intlTelInput.css 5:0-64 8:73-102
@ ./node_modules/intl-tel-input/build/css/intlTelInput.css 2:12-87 9:17-24 13:15-29
@ ./node_modules/ember-phone-input/dist/components/phone-input.js 1:144-194

cleaning up...
Build Error (WebpackBundler)

webpack returned errors to ember-auto-import

v8 works just fine. Haven't tried with embroider.