rebill-web-components-sdk 1.10.5 → 1.10.7-beta.0

package/dist/cjs/card-fields-wrapper_11.cjs.entry.js

@@ -4054,20 +4054,17 @@ const InputPhone = class {
         this.input.emit({ id: this.validationErrorId, value: validationResult.isValid.toString() });
     };
     emitBlurPhone = async () => {
-        await PhoneValidator.validate(this.value, {
+        const validation = await PhoneValidator.validate(this.value, {
             required: this.required,
             country: this.selectedCountry,
         });
-        // this.blurPhone.emit({
-        //   id: this.phoneNumberId,
-        //   value: this.value,
-        // });
-        // this.blurPhone.emit({
-        //   id: this.countryCodeId,
-        //   value: this.selectedCountry.dialCode,
-        // });
         this.blur.emit({ id: this.phoneNumberId, value: this.value });
         this.blur.emit({ id: this.countryCodeId, value: this.selectedCountry.dialCode });
+        // Emit also the validation flag so the form can validate the correct schema field on blur
+        this.blur.emit({
+            id: this.validationErrorId,
+            value: validation.isValid.toString(),
+        });
     };
     handleClickOutside = (event) => {
         const target = event.target;
@@ -4101,11 +4098,11 @@ const InputPhone = class {
         // Usar translateError para ambos tipos de errores
         const translatedError = this.translateError(this.error);
         const translatedValidationError = this.translateError(this.validationError);
-        const displayError = translatedError || translatedValidationError;
-        return (index.h("div", { key: '9bfb1a075b9ea338d062f260ca89e3036ad489ae', class: "input-container" }, index.h("div", { key: '60af8d6684ef5c3b576de699ba522ec0d8147bf0', class: inputClasses }, index.h("div", { key: 'f48255f3bb5fdea49bd3a6d8617939f89e111465', class: "input-combo-select country-selector", onClick: this.toggleDropdown }, index.h("span", { key: 'c824bbb3c4c14ad31f45aaf5414b4000f3364a18', class: "flag" }, this.selectedCountry.flag), index.h("span", { key: '0a1f614c791c4bd3490fb9b259d7aba5fb179210', class: "dial-code" }, this.selectedCountry.dialCode), index.h("span", { key: 'f9eb3ac4c2675afc7445dcfbc0cf0f0a70c8e721', class: `dropdown-arrow ${this.isDropdownOpen ? 'open' : ''}` }, "\u25BC")), this.isDropdownOpen && (index.h("div", { key: 'e0ef26d1fa03ccadf93955f4775f7e965f2e8988', class: "country-dropdown" }, this.searchable && (index.h("div", { key: '18bb6464cd28a58137cedbf62c5487f43daf62a8', class: "search-container", onClick: this.handleSearchClick }, index.h("div", { key: '844c66e1899ba58ce199fcb7f76a056629c8a887', class: "search-input-wrapper" }, index.h("rebill-icon", { key: '35d725f71c63307f2f62a528919723469c4584b7', name: "search", size: "16px", class: "search-icon" }), index.h("input", { key: '9b0abbc8b57424841a611dc76892979b7ae29955', ref: el => (this.searchInputRef = el), type: "text", class: "search-input", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: this.handleSearchInput, onClick: this.handleSearchClick }), this.searchTerm && (index.h("button", { key: 'c9426b67a6121cfa453d43ffe1ca83a257303f86', type: "button", class: "clear-search", onClick: event => {
+        const displayError = translatedValidationError || translatedError;
+        return (index.h("div", { key: '8ba4b3763fed5beaa63d3c03997a5d3225bdac2b', class: "input-container" }, index.h("div", { key: '4d8a081c6818b007a66e749ade19ed2a03bcbfa2', class: inputClasses }, index.h("div", { key: 'b99f8c73cb689ecf8b6b23c99dfea1fbc8d7679a', class: "input-combo-select country-selector", onClick: this.toggleDropdown }, index.h("span", { key: '579c92643304fb84edffd02eaafa0c8d053dea67', class: "flag" }, this.selectedCountry.flag), index.h("span", { key: '87323ab9edab7a9716b3f25526d343faa5789d22', class: "dial-code" }, this.selectedCountry.dialCode), index.h("span", { key: 'abe6273a9664575c362ee793412baca2a2128810', class: `dropdown-arrow ${this.isDropdownOpen ? 'open' : ''}` }, "\u25BC")), this.isDropdownOpen && (index.h("div", { key: 'cf8da028b705288941dad87e277cbccf6a4a6830', class: "country-dropdown" }, this.searchable && (index.h("div", { key: 'c803f6f2b353618554edfa51204e9ec4cf3331d3', class: "search-container", onClick: this.handleSearchClick }, index.h("div", { key: '128a73017eee1f7d4e1ee5dcf4a20f09bc45889e', class: "search-input-wrapper" }, index.h("rebill-icon", { key: '9fdd3b1c87db54bb16c97ea895c548ed548a9677', name: "search", size: "16px", class: "search-icon" }), index.h("input", { key: 'a87ef75600838f3a9f4196fd66574eac53ef342e', ref: el => (this.searchInputRef = el), type: "text", class: "search-input", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: this.handleSearchInput, onClick: this.handleSearchClick }), this.searchTerm && (index.h("button", { key: 'c0c46bad64ec034a954d9714568ff95ee39f88b4', type: "button", class: "clear-search", onClick: event => {
                 event.stopPropagation();
                 this.clearSearch();
-            }, "aria-label": "Clear search" }, index.h("rebill-icon", { key: '0c6c770adc4587627336ad73d5740931d2fc35d7', name: "x", size: "16px" })))))), this.filteredCountries.length > 0 ? (this.filteredCountries.map(country => (index.h("div", { key: country.code, class: "country-option", onClick: e => this.selectCountry(country, e) }, index.h("span", { class: "flag" }, country.flag), index.h("span", { class: "country-name" }, country.name), index.h("span", { class: "dial-code" }, country.dialCode))))) : (index.h("div", { class: "no-results" }, "No se encontraron resultados")))), index.h("input", { key: '7a1a13857f138578f13a8c3430f1f41afc115d96', id: this.phoneNumberId, type: "tel", class: "input-combo-element phone-number-input", placeholder: this.placeholder, value: this.value, onInput: this.onInput, onBlur: this.onPhoneBlurPhone, disabled: this.disabled, required: this.required })), displayError && index.h("span", { key: 'cb53860dcc25c54579ac45c7a785bb3e540b3c3a', class: "error-message" }, displayError)));
+            }, "aria-label": "Clear search" }, index.h("rebill-icon", { key: '2c37884a69bdc23cee3d2c02f45c066e6bebc835', name: "x", size: "16px" })))))), this.filteredCountries.length > 0 ? (this.filteredCountries.map(country => (index.h("div", { key: country.code, class: "country-option", onClick: e => this.selectCountry(country, e) }, index.h("span", { class: "flag" }, country.flag), index.h("span", { class: "country-name" }, country.name), index.h("span", { class: "dial-code" }, country.dialCode))))) : (index.h("div", { class: "no-results" }, "No se encontraron resultados")))), index.h("input", { key: '18afad61f393316cb5128d64de384c3873921685', id: this.phoneNumberId, type: "tel", class: "input-combo-element phone-number-input", placeholder: this.placeholder, value: this.value, onInput: this.onInput, onBlur: this.onPhoneBlurPhone, disabled: this.disabled, required: this.required })), displayError && index.h("span", { key: '7c1cedfe0647fd05df06229d36784b5d6340f84f', class: "error-message" }, displayError)));
     }
 };
 InputPhone.style = inputPhoneCss;