Socket
Socket
Sign inDemoInstall

ember-phone-input

Package Overview
Dependencies
596
Maintainers
2
Versions
38
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 3.0.0 to 3.1.0

docs/pull_request_template.md

124

addon/components/phone-input.js

@@ -1,10 +0,6 @@

/* global intlTelInputUtils */
import Component from '@ember/component';
import { assert } from '@ember/debug';
import { inject as service } from '@ember/service';
import { isPresent } from '@ember/utils';
import Component from '@ember/component'
import { assert } from '@ember/debug'
const { intlTelInput } = window
const PHONE_NUMBER_FORMAT = 'E164' // https://en.wikipedia.org/wiki/E.164
/**

@@ -14,3 +10,5 @@ A phone-input component. Usage:

{{phone-input
allowDropdown=false
autoPlaceholder='aggressive'
disabled=true
initialCountry='fr'

@@ -31,11 +29,21 @@ number='123'

attributeBindings: ['type'],
attributeBindings: ['type', 'disabled'],
type: 'tel',
phoneInput: service(),
init() {
this._super(...arguments)
this._super(...arguments);
this._iti = this._iti || null
this._iti = this._iti || null;
/**
* Setting this to true will disabled the input and the country dropdown.
* Defaults to `false`
* @argument disabled
* @type {boolean}
*/
this.disabled = this.disabled || false;
/**
The international phone number. This is the main data supposed

@@ -47,5 +55,16 @@ to be persisted / handled.

*/
this.number = this.number || null
this.number = this.number || null;
/**
Whether or not to allow the dropdown. If disabled, there is no dropdown arrow, and the selected flag is not clickable. Also we display the selected flag on the right instead because it is just a marker of state.
@argument allowDropdown
@type {boolean}
*/
this.allowDropdown = isPresent(this.allowDropdown)
? this.allowDropdown
: true;
/**
Add or remove input placeholder with an example number for the selected

@@ -58,3 +77,3 @@ country. Possible values are 'polite', 'aggressive' and 'off'. Defaults to

*/
this.autoPlaceholder = this.autoPlaceholder || 'polite'
this.autoPlaceholder = this.autoPlaceholder || 'polite';

@@ -68,3 +87,3 @@ /**

*/
this.initialCountry = this.initialCountry || ''
this.initialCountry = this.initialCountry || '';

@@ -80,3 +99,3 @@ /**

*/
this.country = this.country || ''
this.country = this.country || '';

@@ -90,3 +109,3 @@ /**

*/
this.onlyCountries = this.onlyCountries || []
this.onlyCountries = this.onlyCountries || [];

@@ -99,3 +118,3 @@ /**

*/
this.preferredCountries = this.preferredCountries || ['us', 'gb']
this.preferredCountries = this.preferredCountries || ['us', 'gb'];

@@ -108,3 +127,3 @@ /**

*/
this.separateDialCode = this.separateDialCode || false
this.separateDialCode = this.separateDialCode || false;

@@ -121,7 +140,7 @@ /**

*/
this.update = this.update || function() {}
this.update = this.update || function() {};
const validAutoPlaceholer = ['polite', 'aggressive', 'off'].includes(
this.autoPlaceholder
)
);

@@ -131,19 +150,19 @@ assert(

validAutoPlaceholer
)
);
},
input() {
const format = intlTelInputUtils.numberFormat[PHONE_NUMBER_FORMAT]
const internationalPhoneNumber = this._iti.getNumber(format)
const internationalPhoneNumber = this._iti.getNumber();
var meta = this._metaData(this._iti)
this.update(internationalPhoneNumber, meta)
var meta = this._metaData(this._iti);
this.update(internationalPhoneNumber, meta);
return true
return true;
},
didInsertElement() {
this._super(...arguments)
this._super(...arguments);
const {
allowDropdown,
autoPlaceholder,

@@ -154,8 +173,9 @@ initialCountry,

separateDialCode
} = this
} = this;
var input = document.getElementById(this.elementId)
var _iti = intlTelInput(input, {
var input = document.getElementById(this.elementId);
var _iti = this.phoneInput.intlTelInput(input, {
autoHideDialCode: true,
nationalMode: true,
allowDropdown,
autoPlaceholder,

@@ -166,21 +186,21 @@ initialCountry,

separateDialCode
})
});
const number = this.number
const number = this.number;
if (number) {
_iti.setNumber(number)
_iti.setNumber(number);
}
this._iti = _iti
this._iti = _iti;
if (this.initialCountry) {
this._iti.setCountry(this.initialCountry)
this._iti.setCountry(this.initialCountry);
}
this.update(number, this._metaData(_iti))
this.update(number, this._metaData(_iti));
this.onCountryChange = () => {
this._iti.setCountry(this._iti.getSelectedCountryData().iso2)
this.input()
}
this.element.addEventListener('countrychange', this.onCountryChange)
this._iti.setCountry(this._iti.getSelectedCountryData().iso2);
this.input();
};
this.element.addEventListener('countrychange', this.onCountryChange);
},

@@ -190,14 +210,14 @@

didRender() {
this._super(...arguments)
this._super(...arguments);
if (!this._iti) {
return
return;
}
if (this.country) {
this._iti.setCountry(this.country)
this._iti.setCountry(this.country);
}
if (this.number) {
this._iti.setNumber(this.number)
this._iti.setNumber(this.number);
}

@@ -207,12 +227,12 @@ },

willDestroyElement() {
this._iti.destroy()
this.element.removeEventListener('countrychange', this.onCountryChange)
this._iti.destroy();
this.element.removeEventListener('countrychange', this.onCountryChange);
this._super(...arguments)
this._super(...arguments);
},
_metaData(iti) {
const extension = iti.getExtension()
const selectedCountryData = iti.getSelectedCountryData()
const isValidNumber = iti.isValidNumber()
const extension = iti.getExtension();
const selectedCountryData = iti.getSelectedCountryData();
const isValidNumber = iti.isValidNumber();

@@ -223,4 +243,4 @@ return {

isValidNumber
}
};
}
})
});

51

addon/services/phone-input.js

@@ -1,21 +0,18 @@

import Service from '@ember/service'
import { getOwner } from '@ember/application'
import loadScript from 'ember-phone-input/utils/load-script'
import RSVP from 'rsvp'
import Service from '@ember/service';
import { getOwner } from '@ember/application';
import RSVP from 'rsvp';
export default Service.extend({
didLoad: false,
intlTelInput: null,
init() {
this._super(...arguments)
this._super(...arguments);
const config = getOwner(this).resolveRegistration('config:environment')
const { lazyLoad, hasPrepend } = config.phoneInput
const config = getOwner(this).resolveRegistration('config:environment');
const { lazyLoad } = config.phoneInput;
this.hasPrepend = hasPrepend
if (!lazyLoad) {
// if lazyLoad is disabled, load them now
// that is to say at the app boot
this.load()
this.load();
}

@@ -25,27 +22,13 @@ },

load() {
const doLoadScript1 = this.didLoad
? RSVP.resolve()
: loadScript(
this._loadUrl('assets/ember-phone-input/scripts/intlTelInput.min.js')
)
if (this.intlTelInput) return;
const doLoadScript2 = this.didLoad
? RSVP.resolve()
: loadScript(this._loadUrl('assets/ember-phone-input/scripts/utils.js'))
return RSVP.all([doLoadScript1, doLoadScript2]).then(() => {
if (this.isDestroyed) {
return
return RSVP.all([
import('intl-tel-input/build/js/intlTelInput.js'),
import('intl-tel-input/build/js/utils.js')
]).then(([intlTelInput]) => {
if (!this.isDestroying && !this.isDestroyed) {
this.set('intlTelInput', intlTelInput.default);
}
this.set('didLoad', true)
})
},
_loadUrl(url) {
const { rootURL } = getOwner(this).resolveRegistration('config:environment')
const prependUrl = this.hasPrepend ? '' : rootURL
return `${prependUrl}${url}`
});
}
})
});

2

app/components/phone-input.js

@@ -1,1 +0,1 @@

export { default } from 'ember-phone-input/components/phone-input'
export { default } from 'ember-phone-input/components/phone-input';

2

app/services/phone-input.js

@@ -1,1 +0,1 @@

export { default } from 'ember-phone-input/services/phone-input'
export { default } from 'ember-phone-input/services/phone-input';

23

CHANGELOG.md
# Change Log
## v3.1.0 (2019-11-27)
#### :rocket: Enhancement
* [#134](https://github.com/qonto/ember-phone-input/pull/134) [FEATURE] Add allowDropdown option ([@evanlouden](https://github.com/evanlouden))
* [#151](https://github.com/qonto/ember-phone-input/pull/151) Replace custom script loading code with `ember-auto-import` ([@Turbo87](https://github.com/Turbo87))
* [#144](https://github.com/qonto/ember-phone-input/pull/144) Feature add attribute biding for disabled ([@vsergiu93](https://github.com/vsergiu93))
#### :memo: Documentation
* [#148](https://github.com/qonto/ember-phone-input/pull/148) 📝 add pull request template ([@dbendaou](https://github.com/dbendaou))
#### :house: Internal
* [#153](https://github.com/qonto/ember-phone-input/pull/153) prettier: Set `semi: true` ([@Turbo87](https://github.com/Turbo87))
* [#152](https://github.com/qonto/ember-phone-input/pull/152) package.json: Move `babel-eslint` into `devDependencies` ([@Turbo87](https://github.com/Turbo87))
* [#150](https://github.com/qonto/ember-phone-input/pull/150) Remove obsolete `tough-cookie` resolution ([@Turbo87](https://github.com/Turbo87))
* [#145](https://github.com/qonto/ember-phone-input/pull/145) Remove ember-cli-htmlbars-inline-precompile to get rid of the deprecation warning while building ([@vsergiu93](https://github.com/vsergiu93))
#### Committers: 5
- Djamel B. ([@dbendaou](https://github.com/dbendaou))
- Evan Louden ([@evanlouden](https://github.com/evanlouden))
- Sergiu ([@vsergiu93](https://github.com/vsergiu93))
- Tobias Bieniek ([@Turbo87](https://github.com/Turbo87))
- [@dependabot-preview[bot]](https://github.com/apps/dependabot-preview)
## v3.0.0 (2019-09-23)

@@ -4,0 +27,0 @@

6

config/addon-docs.js

@@ -1,4 +0,4 @@

'use strict'
'use strict';
const AddonDocsConfig = require('ember-cli-addon-docs/lib/config')
const AddonDocsConfig = require('ember-cli-addon-docs/lib/config');

@@ -8,2 +8,2 @@ module.exports = class extends AddonDocsConfig {

// for details on configuration you can override here.
}
};

14

config/deploy.js

@@ -1,2 +0,2 @@

'use strict'
'use strict';

@@ -7,6 +7,6 @@ module.exports = function(deployTarget) {

// include other plugin configuration that applies to all deploy targets here
}
};
if (deployTarget === 'development') {
ENV.build.environment = 'development'
ENV.build.environment = 'development';
// configure other plugins for development deploy target here

@@ -16,3 +16,3 @@ }

if (deployTarget === 'staging') {
ENV.build.environment = 'production'
ENV.build.environment = 'production';
// configure other plugins for staging deploy target here

@@ -22,3 +22,3 @@ }

if (deployTarget === 'production') {
ENV.build.environment = 'production'
ENV.build.environment = 'production';
// configure other plugins for production deploy target here

@@ -30,3 +30,3 @@ }

// ENV object synchronously.
return ENV
}
return ENV;
};

6

config/environment.js

@@ -1,5 +0,5 @@

'use strict'
'use strict';
module.exports = function(/* environment, appConfig */) {
return {}
}
return {};
};

2

config/release.js

@@ -21,2 +21,2 @@ /* jshint node:true */

// }
}
};

44

index.js

@@ -1,10 +0,10 @@

'use strict'
'use strict';
const Funnel = require('broccoli-funnel')
const MergeTrees = require('broccoli-merge-trees')
const path = require('path')
const Funnel = require('broccoli-funnel');
const MergeTrees = require('broccoli-merge-trees');
const path = require('path');
const scriptsDestDir = 'assets/ember-phone-input/scripts/'
const intlTelInputScriptName = 'intlTelInput.min.js'
const utilsScriptName = 'utils.js'
const scriptsDestDir = 'assets/ember-phone-input/scripts/';
const intlTelInputScriptName = 'intlTelInput.min.js';
const utilsScriptName = 'utils.js';

@@ -14,4 +14,10 @@ module.exports = {

options: {
babel: {
plugins: [require.resolve('ember-auto-import/babel-plugin')]
}
},
included(app) {
this._super.included.apply(this, app)
this._super.included.apply(this, app);

@@ -22,11 +28,11 @@ // images

destDir: 'assets/ember-phone-input/images'
})
});
app.import('node_modules/intl-tel-input/build/img/flags@2x.png', {
destDir: 'assets/ember-phone-input/images'
})
});
// intlTelInputUtils style
// it get merged into vendor.css
app.import('node_modules/intl-tel-input/build/css/intlTelInput.css')
app.import('vendor/ember-phone-input.css')
app.import('node_modules/intl-tel-input/build/css/intlTelInput.css');
app.import('vendor/ember-phone-input.css');
},

@@ -40,3 +46,3 @@

'..'
)
);
const intlTelInputFiles = new Funnel(intlTelInputPath, {

@@ -46,10 +52,10 @@ srcDir: '/build/js',

destDir: `/${scriptsDestDir}`
})
});
return new MergeTrees([intlTelInputFiles])
return new MergeTrees([intlTelInputFiles]);
},
contentFor(type, config) {
const { phoneInput, rootURL } = config
const shouldLazyLoad = phoneInput ? phoneInput.lazyLoad : false
const { phoneInput, rootURL } = config;
const shouldLazyLoad = phoneInput ? phoneInput.lazyLoad : false;

@@ -60,5 +66,5 @@ if (type === 'body-footer' && !shouldLazyLoad) {

<script type="text/javascript" src="${rootURL}${scriptsDestDir}${utilsScriptName}"></script>
`
`;
}
}
}
};

18

package.json
{
"name": "ember-phone-input",
"version": "3.0.0",
"version": "3.1.0",
"description": "A component to input / validate / submit phone numbers",

@@ -30,3 +30,2 @@ "keywords": [

"build": "ember build",
"changelog": "lerna-changelog",
"format:md": "prettier --write **/*.md",

@@ -40,13 +39,14 @@ "lint:js": "eslint . --cache",

"dependencies": {
"babel-eslint": "^10.0.1",
"ember-auto-import": "^1.5.3",
"ember-cli-babel": "^7.1.4",
"ember-cli-htmlbars": "^3.0.1",
"ember-cli-htmlbars": "^4.0.8",
"intl-tel-input": "^15.0.2"
},
"devDependencies": {
"@ember/optional-features": "^0.7.0",
"@ember/optional-features": "^1.0.0",
"babel-eslint": "^10.0.1",
"broccoli-asset-rev": "^3.0.0",
"broccoli-funnel": "^2.0.1",
"broccoli-merge-trees": "^3.0.1",
"ember-cli": "~3.12.0",
"ember-cli": "~3.13.1",
"ember-cli-addon-docs": "^0.6.1",

@@ -56,7 +56,6 @@ "ember-cli-addon-docs-yuidoc": "^0.2.1",

"ember-cli-deploy": "^1.0.2",
"ember-cli-deploy-build": "^1.1.1",
"ember-cli-deploy-build": "^2.0.0",
"ember-cli-deploy-git": "^1.3.3",
"ember-cli-deploy-git-ci": "^1.0.1",
"ember-cli-favicon": "^2.2.0",
"ember-cli-htmlbars-inline-precompile": "^3.0.0",
"ember-cli-inject-live-reload": "^2.0.1",

@@ -86,5 +85,2 @@ "ember-cli-qunit": "^4.3.2",

},
"resolutions": {
"**/tough-cookie": "~2.4.0"
},
"engines": {

@@ -91,0 +87,0 @@ "node": "8.* || >= 10.*"

addon/utils/load-script.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc