improvements and fixes to base components and stylings

addon/components/phone-input.hbs

@@ -1 +1 @@
-<Input @type="tel" @value={{@value}} {{did-insert this.setupIntlTelInput}} {{on "keyup" this.onInput}} ...attributes />
+<Input @type="tel" @value={{@value}} {{did-insert this.setupIntlTelInput}} class="phone-input" {{on "keyup" this.onInput}} ...attributes />

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);

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;

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;

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;

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;
 }

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'],

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",