diff --git a/addon/components/phone-input.hbs b/addon/components/phone-input.hbs
index 52f1950..d5cc94d 100644
--- a/addon/components/phone-input.hbs
+++ b/addon/components/phone-input.hbs
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/addon/components/phone-input.js b/addon/components/phone-input.js
index 99fbb46..2a9c309 100644
--- a/addon/components/phone-input.js
+++ b/addon/components/phone-input.js
@@ -10,20 +10,33 @@ export default class PhoneInputComponent extends Component {
@action setupIntlTelInput(element) {
this.iti = intlTelInput(element, {
- customContainer: `w-full ${this.args.wrapperClass ?? ''}`,
+ containerClass: `w-full ${this.args.wrapperClass ?? ''}`,
initialCountry: 'auto',
- geoIpLookup: (success) => {
- this.fetch.get('lookup/whois').then((response) => {
- success(response.country_code);
- });
+ separateDialCode: true,
+ formatAsYouType: true,
+ geoIpLookup: (success, failure) => {
+ this.fetch
+ .get('lookup/whois')
+ .then((response) => {
+ success(response.country_code);
+ })
+ .catch(failure);
},
utilsScript: '/assets/libphonenumber/utils.js',
});
+
+ if (typeof this.args.onInit === 'function') {
+ this.args.onInit(this.iti);
+ }
+
+ element.addEventListener('countrychange', this.args.onCountryChange);
}
@action onInput() {
const { onInput } = this.args;
- const number = this.iti.getNumber();
+ const number = this.iti.getNumber(intlTelInput.utils.numberFormat.E164);
+
+ console.log(number);
if (typeof onInput === 'function') {
onInput(number, ...arguments);
diff --git a/addon/components/select.js b/addon/components/select.js
index 9d8547a..c7c4d47 100644
--- a/addon/components/select.js
+++ b/addon/components/select.js
@@ -1,7 +1,6 @@
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
-import { computed, action } from '@ember/object';
-import { isBlank } from '@ember/utils';
+import { action } from '@ember/object';
export default class SelectComponent extends Component {
@tracked value;
diff --git a/addon/styles/components/basic-dropdown.css b/addon/styles/components/basic-dropdown.css
index 1172d0c..7425caf 100644
--- a/addon/styles/components/basic-dropdown.css
+++ b/addon/styles/components/basic-dropdown.css
@@ -4,6 +4,12 @@
padding-left: 0.5rem;
}
+.ember-basic-dropdown-trigger[aria-disabled='true'],
+.ember-power-select-trigger[aria-disabled='true'] {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
.ember-power-select-multiple-option {
margin: 0 0 0 3px;
line-height: 1.45;
diff --git a/addon/styles/components/input.css b/addon/styles/components/input.css
index 4885550..5b18fd7 100644
--- a/addon/styles/components/input.css
+++ b/addon/styles/components/input.css
@@ -485,10 +485,34 @@ body[data-theme='dark'] .emberTagInput-tag {
@apply bg-gray-900 shadow-sm;
}
-body[data-theme='dark'] .iti__country-list {
+body[data-theme='dark'] .iti__dropdown-content {
@apply bg-gray-900 rounded-md shadow-sm border-gray-700 mt-1;
}
+.iti__search-input {
+ border: 0px;
+ border-top-left-radius: 0.375rem;
+ border-top-right-radius: 0.375rem;
+}
+
+.iti__selected-dial-code {
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+}
+
+body[data-theme="dark"] .iti__selected-dial-code {
+ color: #fff;
+}
+
+body[data-theme='dark'] .iti__search-input {
+ background-color: #111827;
+ border-bottom: 1px #374151 solid;
+}
+
+body[data-theme='dark'] .iti__divider {
+ border-bottom: 1px solid #374151;
+}
+
.ui-money-input .ember-basic-dropdown > .ember-basic-dropdown-trigger {
border: 0px;
background: transparent;
diff --git a/addon/styles/layout/next.css b/addon/styles/layout/next.css
index c3e764e..b5ef64a 100644
--- a/addon/styles/layout/next.css
+++ b/addon/styles/layout/next.css
@@ -12,6 +12,14 @@ a,
cursor: default;
}
+a[disabled='true'],
+button[disabled='true'],
+input[disabled='true'],
+select[disabled='true'],
+textarea[disabled='true'] {
+ cursor: not-allowed;
+}
+
.next-content-overlay .new-order-overlay-body {
@apply px-4 pt-4 space-y-4;
}
diff --git a/index.js b/index.js
index b2b75fc..8525748 100644
--- a/index.js
+++ b/index.js
@@ -64,7 +64,7 @@ module.exports = {
const publicTree = this._super.treeForPublic.apply(this, arguments);
// Use a Funnel to copy the `utils.js` file to `assets/libphonenumber`
- const intlTelInputPath = path.dirname(require.resolve('intl-tel-input'));
+ const intlTelInputPath = path.dirname(require.resolve('intl-tel-input')).replace(/build\/js$/, '');
const addonTree = [
new Funnel(`${intlTelInputPath}/build/js`, {
include: ['utils.js'],
diff --git a/package.json b/package.json
index 84145aa..c44b138 100644
--- a/package.json
+++ b/package.json
@@ -86,7 +86,7 @@
"ember-window-mock": "^0.9.0",
"ember-wormhole": "^0.6.0",
"imask": "^6.4.3",
- "intl-tel-input": "^18.1.3",
+ "intl-tel-input": "^22.0.2",
"postcss-at-rules-variables": "^0.3.0",
"postcss-conditionals-renewed": "^1.0.0",
"postcss-each": "^1.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 76d6d55..4f5b68d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -158,8 +158,8 @@ dependencies:
specifier: ^6.4.3
version: 6.4.3
intl-tel-input:
- specifier: ^18.1.3
- version: 18.1.3
+ specifier: ^22.0.2
+ version: 22.0.2
postcss-at-rules-variables:
specifier: ^0.3.0
version: 0.3.0(postcss@8.4.32)
@@ -9367,8 +9367,8 @@ packages:
hasown: 2.0.0
side-channel: 1.0.4
- /intl-tel-input@18.1.3:
- resolution: {integrity: sha512-5pyt4HA5fZewCnmjIbNJg1bLVWgePlcbga6ilr7KfdIYUYUtAAJmhK+FWS3Y7Hoz5cbAw/q1rdihNSzOvw16xw==}
+ /intl-tel-input@22.0.2:
+ resolution: {integrity: sha512-FYDLp56aCVE+G7TJGmKCeU8LlfSztINiv54TALquMhMJumlUP1d48I6fEssbcq325vcXOrqdOO7Bbi1U/WRCcw==}
dev: false
/invariant@2.2.4: