Simplify/improve padding logic by moving to js

jackocnr · Aug 23, 2024 · cf56a22 · cf56a22
1 parent 8b6a614
commit cf56a22
Show file tree

Hide file tree

Showing 20 changed files with 314 additions and 272 deletions.
diff --git a/build/css/intlTelInput.css b/build/css/intlTelInput.css
@@ -12,9 +12,6 @@
   --iti-triangle-border: calc(var(--iti-arrow-width) / 2);
   --iti-arrow-padding: 6px;
   --iti-arrow-color: #555;
-  --iti-input-padding: 6px;
-  --iti-right-hand-selected-country-padding: calc(var(--iti-spacer-horizontal) + var(--iti-spacer-horizontal) + var(--iti-flag-width));
-  --iti-selected-country-arrow-padding: calc(var(--iti-arrow-padding) + var(--iti-arrow-padding) + var(--iti-flag-width) + var(--iti-spacer-horizontal) + var(--iti-arrow-width) + var(--iti-input-padding));
   --iti-path-flags-1x: url("../img/flags.webp");
   --iti-path-flags-2x: url("../img/[email protected]");
   --iti-path-globe-1x: url("../img/globe.webp");
@@ -49,16 +46,12 @@
 .iti input.iti__tel-input[type=tel] {
   position: relative;
   z-index: 0;
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-  padding-right: var(--iti-right-hand-selected-country-padding);
-  margin-right: 0;
+  margin: 0 !important;
 }
 .iti__country-container {
   position: absolute;
   top: 0;
   bottom: 0;
-  right: 0;
   padding: var(--iti-border-width);
 }
 .iti__selected-country {
@@ -158,28 +151,6 @@
   margin-right: 0;
   margin-left: var(--iti-spacer-horizontal);
 }
-.iti--allow-dropdown input.iti__tel-input,
-.iti--allow-dropdown input.iti__tel-input[type=text],
-.iti--allow-dropdown input.iti__tel-input[type=tel] {
-  padding-right: var(--iti-input-padding);
-  padding-left: var(--iti-selected-country-arrow-padding);
-  margin-left: 0;
-}
-[dir=rtl] .iti--allow-dropdown input.iti__tel-input,
-[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=text],
-[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=tel] {
-  padding-right: var(--iti-selected-country-arrow-padding);
-  padding-left: var(--iti-input-padding);
-  margin-right: 0;
-}
-.iti--allow-dropdown .iti__country-container {
-  right: auto;
-  left: 0;
-}
-[dir=rtl] .iti--allow-dropdown .iti__country-container {
-  right: 0;
-  left: auto;
-}
 .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])):hover, .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])):hover button {
   cursor: pointer;
 }

diff --git a/build/css/intlTelInput.min.css b/build/css/intlTelInput.min.css
diff --git a/build/js/intlTelInput.d.ts b/build/js/intlTelInput.d.ts
@@ -364,6 +364,7 @@ declare module "intl-tel-input" {
         private options;
         private hadInitialPlaceholder;
         private isRTL;
+        private showSelectedCountryOnLeft;
         private isAndroid;
         private selectedCountryData;
         private countries;
@@ -435,6 +436,7 @@ declare module "intl-tel-input" {
         private _highlightListItem;
         private _getCountryData;
         private _setCountry;
+        private _updateInputPadding;
         private _updateMaxLength;
         private _setSelectedCountryTitleAttribute;
         private _getHiddenSelectedCountryWidth;

diff --git a/build/js/intlTelInput.js b/build/js/intlTelInput.js
@@ -1937,12 +1937,16 @@ var factoryOutput = (() => {
       if (!useFullscreenPopup) {
         parentClass += " iti--inline-dropdown";
       }
+      this.showSelectedCountryOnLeft = allowDropdown && !this.isRTL || !allowDropdown && this.isRTL;
       const wrapper = createEl("div", { class: parentClass });
       this.telInput.parentNode?.insertBefore(wrapper, this.telInput);
       if (allowDropdown || showFlags) {
         this.countryContainer = createEl(
           "div",
-          { class: "iti__country-container" },
+          {
+            class: "iti__country-container",
+            style: this.showSelectedCountryOnLeft ? "left: 0" : "right: 0"
+          },
           wrapper
         );
         if (allowDropdown) {
@@ -2047,6 +2051,7 @@ var factoryOutput = (() => {
         }
       }
       wrapper.appendChild(this.telInput);
+      this._updateInputPadding();
       if (hiddenInput) {
         const telInputName = this.telInput.getAttribute("name") || "";
         const names = hiddenInput(telInputName);
@@ -2623,18 +2628,22 @@ var factoryOutput = (() => {
       if (separateDialCode) {
         const dialCode = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : "";
         this.selectedDialCode.innerHTML = dialCode;
-        const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
-        const inputPadding = selectedCountryWidth + 8;
-        if (this.isRTL) {
-          this.telInput.style.paddingRight = `${inputPadding}px`;
-        } else {
-          this.telInput.style.paddingLeft = `${inputPadding}px`;
-        }
+        this._updateInputPadding();
       }
       this._updatePlaceholder();
       this._updateMaxLength();
       return prevCountry.iso2 !== iso2;
     }
+    //* Update the input padding to make space for the selected country/dial code.
+    _updateInputPadding() {
+      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
+      const inputPadding = selectedCountryWidth + 6;
+      if (this.showSelectedCountryOnLeft) {
+        this.telInput.style.paddingLeft = `${inputPadding}px`;
+      } else {
+        this.telInput.style.paddingRight = `${inputPadding}px`;
+      }
+    }
     //* Update the maximum valid number length for the currently selected country.
     _updateMaxLength() {
       const { strictMode, placeholderNumberType, validationNumberType } = this.options;

diff --git a/build/js/intlTelInput.min.js b/build/js/intlTelInput.min.js
diff --git a/build/js/intlTelInputWithUtils.js b/build/js/intlTelInputWithUtils.js
@@ -1936,12 +1936,16 @@ var factoryOutput = (() => {
       if (!useFullscreenPopup) {
         parentClass += " iti--inline-dropdown";
       }
+      this.showSelectedCountryOnLeft = allowDropdown && !this.isRTL || !allowDropdown && this.isRTL;
       const wrapper = createEl("div", { class: parentClass });
       this.telInput.parentNode?.insertBefore(wrapper, this.telInput);
       if (allowDropdown || showFlags) {
         this.countryContainer = createEl(
           "div",
-          { class: "iti__country-container" },
+          {
+            class: "iti__country-container",
+            style: this.showSelectedCountryOnLeft ? "left: 0" : "right: 0"
+          },
           wrapper
         );
         if (allowDropdown) {
@@ -2046,6 +2050,7 @@ var factoryOutput = (() => {
         }
       }
       wrapper.appendChild(this.telInput);
+      this._updateInputPadding();
       if (hiddenInput) {
         const telInputName = this.telInput.getAttribute("name") || "";
         const names = hiddenInput(telInputName);
@@ -2622,18 +2627,22 @@ var factoryOutput = (() => {
       if (separateDialCode) {
         const dialCode = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : "";
         this.selectedDialCode.innerHTML = dialCode;
-        const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
-        const inputPadding = selectedCountryWidth + 8;
-        if (this.isRTL) {
-          this.telInput.style.paddingRight = `${inputPadding}px`;
-        } else {
-          this.telInput.style.paddingLeft = `${inputPadding}px`;
-        }
+        this._updateInputPadding();
       }
       this._updatePlaceholder();
       this._updateMaxLength();
       return prevCountry.iso2 !== iso2;
     }
+    //* Update the input padding to make space for the selected country/dial code.
+    _updateInputPadding() {
+      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
+      const inputPadding = selectedCountryWidth + 6;
+      if (this.showSelectedCountryOnLeft) {
+        this.telInput.style.paddingLeft = `${inputPadding}px`;
+      } else {
+        this.telInput.style.paddingRight = `${inputPadding}px`;
+      }
+    }
     //* Update the maximum valid number length for the currently selected country.
     _updateMaxLength() {
       const { strictMode, placeholderNumberType, validationNumberType } = this.options;
@@ -3045,7 +3054,7 @@ var factoryOutput = (() => {
     if (!intlTelInput.utils && !intlTelInput.startedLoadingUtilsScript) {
       intlTelInput.startedLoadingUtilsScript = true;
       return new Promise((resolve, reject) => {
-        import_INTENTIONALLY_BROKEN(
+        import(
           /* webpackIgnore: true */
           /* @vite-ignore */
           path

diff --git a/build/js/intlTelInputWithUtils.min.js b/build/js/intlTelInputWithUtils.min.js
diff --git a/react/build/IntlTelInput.cjs b/react/build/IntlTelInput.cjs
@@ -1932,12 +1932,16 @@ var Iti = class {
     if (!useFullscreenPopup) {
       parentClass += " iti--inline-dropdown";
     }
+    this.showSelectedCountryOnLeft = allowDropdown && !this.isRTL || !allowDropdown && this.isRTL;
     const wrapper = createEl("div", { class: parentClass });
     this.telInput.parentNode?.insertBefore(wrapper, this.telInput);
     if (allowDropdown || showFlags) {
       this.countryContainer = createEl(
         "div",
-        { class: "iti__country-container" },
+        {
+          class: "iti__country-container",
+          style: this.showSelectedCountryOnLeft ? "left: 0" : "right: 0"
+        },
         wrapper
       );
       if (allowDropdown) {
@@ -2042,6 +2046,7 @@ var Iti = class {
       }
     }
     wrapper.appendChild(this.telInput);
+    this._updateInputPadding();
     if (hiddenInput) {
       const telInputName = this.telInput.getAttribute("name") || "";
       const names = hiddenInput(telInputName);
@@ -2618,18 +2623,22 @@ var Iti = class {
     if (separateDialCode) {
       const dialCode = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : "";
       this.selectedDialCode.innerHTML = dialCode;
-      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
-      const inputPadding = selectedCountryWidth + 8;
-      if (this.isRTL) {
-        this.telInput.style.paddingRight = `${inputPadding}px`;
-      } else {
-        this.telInput.style.paddingLeft = `${inputPadding}px`;
-      }
+      this._updateInputPadding();
     }
     this._updatePlaceholder();
     this._updateMaxLength();
     return prevCountry.iso2 !== iso2;
   }
+  //* Update the input padding to make space for the selected country/dial code.
+  _updateInputPadding() {
+    const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
+    const inputPadding = selectedCountryWidth + 8;
+    if (this.showSelectedCountryOnLeft) {
+      this.telInput.style.paddingLeft = `${inputPadding}px`;
+    } else {
+      this.telInput.style.paddingRight = `${inputPadding}px`;
+    }
+  }
   //* Update the maximum valid number length for the currently selected country.
   _updateMaxLength() {
     const { strictMode, placeholderNumberType, validationNumberType } = this.options;

diff --git a/react/build/IntlTelInput.d.ts b/react/build/IntlTelInput.d.ts
@@ -364,6 +364,7 @@ declare module "intl-tel-input" {
         private options;
         private hadInitialPlaceholder;
         private isRTL;
+        private showSelectedCountryOnLeft;
         private isAndroid;
         private selectedCountryData;
         private countries;
@@ -435,6 +436,7 @@ declare module "intl-tel-input" {
         private _highlightListItem;
         private _getCountryData;
         private _setCountry;
+        private _updateInputPadding;
         private _updateMaxLength;
         private _setSelectedCountryTitleAttribute;
         private _getHiddenSelectedCountryWidth;

diff --git a/react/build/IntlTelInput.js b/react/build/IntlTelInput.js
@@ -1896,12 +1896,16 @@ var Iti = class {
     if (!useFullscreenPopup) {
       parentClass += " iti--inline-dropdown";
     }
+    this.showSelectedCountryOnLeft = allowDropdown && !this.isRTL || !allowDropdown && this.isRTL;
     const wrapper = createEl("div", { class: parentClass });
     this.telInput.parentNode?.insertBefore(wrapper, this.telInput);
     if (allowDropdown || showFlags) {
       this.countryContainer = createEl(
         "div",
-        { class: "iti__country-container" },
+        {
+          class: "iti__country-container",
+          style: this.showSelectedCountryOnLeft ? "left: 0" : "right: 0"
+        },
         wrapper
       );
       if (allowDropdown) {
@@ -2006,6 +2010,7 @@ var Iti = class {
       }
     }
     wrapper.appendChild(this.telInput);
+    this._updateInputPadding();
     if (hiddenInput) {
       const telInputName = this.telInput.getAttribute("name") || "";
       const names = hiddenInput(telInputName);
@@ -2582,18 +2587,22 @@ var Iti = class {
     if (separateDialCode) {
       const dialCode = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : "";
       this.selectedDialCode.innerHTML = dialCode;
-      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
-      const inputPadding = selectedCountryWidth + 8;
-      if (this.isRTL) {
-        this.telInput.style.paddingRight = `${inputPadding}px`;
-      } else {
-        this.telInput.style.paddingLeft = `${inputPadding}px`;
-      }
+      this._updateInputPadding();
     }
     this._updatePlaceholder();
     this._updateMaxLength();
     return prevCountry.iso2 !== iso2;
   }
+  //* Update the input padding to make space for the selected country/dial code.
+  _updateInputPadding() {
+    const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
+    const inputPadding = selectedCountryWidth + 8;
+    if (this.showSelectedCountryOnLeft) {
+      this.telInput.style.paddingLeft = `${inputPadding}px`;
+    } else {
+      this.telInput.style.paddingRight = `${inputPadding}px`;
+    }
+  }
   //* Update the maximum valid number length for the currently selected country.
   _updateMaxLength() {
     const { strictMode, placeholderNumberType, validationNumberType } = this.options;

diff --git a/react/build/IntlTelInputWithUtils.cjs b/react/build/IntlTelInputWithUtils.cjs
@@ -1932,12 +1932,16 @@ var Iti = class {
     if (!useFullscreenPopup) {
       parentClass += " iti--inline-dropdown";
     }
+    this.showSelectedCountryOnLeft = allowDropdown && !this.isRTL || !allowDropdown && this.isRTL;
     const wrapper = createEl("div", { class: parentClass });
     this.telInput.parentNode?.insertBefore(wrapper, this.telInput);
     if (allowDropdown || showFlags) {
       this.countryContainer = createEl(
         "div",
-        { class: "iti__country-container" },
+        {
+          class: "iti__country-container",
+          style: this.showSelectedCountryOnLeft ? "left: 0" : "right: 0"
+        },
         wrapper
       );
       if (allowDropdown) {
@@ -2042,6 +2046,7 @@ var Iti = class {
       }
     }
     wrapper.appendChild(this.telInput);
+    this._updateInputPadding();
     if (hiddenInput) {
       const telInputName = this.telInput.getAttribute("name") || "";
       const names = hiddenInput(telInputName);
@@ -2618,18 +2623,22 @@ var Iti = class {
     if (separateDialCode) {
       const dialCode = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : "";
       this.selectedDialCode.innerHTML = dialCode;
-      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
-      const inputPadding = selectedCountryWidth + 8;
-      if (this.isRTL) {
-        this.telInput.style.paddingRight = `${inputPadding}px`;
-      } else {
-        this.telInput.style.paddingLeft = `${inputPadding}px`;
-      }
+      this._updateInputPadding();
     }
     this._updatePlaceholder();
     this._updateMaxLength();
     return prevCountry.iso2 !== iso2;
   }
+  //* Update the input padding to make space for the selected country/dial code.
+  _updateInputPadding() {
+    const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
+    const inputPadding = selectedCountryWidth + 8;
+    if (this.showSelectedCountryOnLeft) {
+      this.telInput.style.paddingLeft = `${inputPadding}px`;
+    } else {
+      this.telInput.style.paddingRight = `${inputPadding}px`;
+    }
+  }
   //* Update the maximum valid number length for the currently selected country.
   _updateMaxLength() {
     const { strictMode, placeholderNumberType, validationNumberType } = this.options;