rebill-web-components-sdk 1.10.6 → 1.10.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/card-fields-wrapper.card-identification.card-iframe.card-skeleton.rebill-address-form.rebill-address-search.rebill-input-combo.rebill-input-phone.rebill-installments.selectable-card.single-payment-method.entry.cjs.js.map +1 -1
- package/dist/cjs/card-fields-wrapper_11.cjs.entry.js +9 -12
- package/dist/cjs/index-C-VTnc0I.js.map +1 -1
- package/dist/cjs/rebill-change-card.cjs.entry.js +1 -2
- package/dist/cjs/rebill-change-card.entry.cjs.js.map +1 -1
- package/dist/cjs/rebill-checkout.cjs.entry.js +10 -3
- package/dist/cjs/rebill-checkout.entry.cjs.js.map +1 -1
- package/dist/cjs/rebill-form.cjs.entry.js +5 -2
- package/dist/cjs/rebill-form.entry.cjs.js.map +1 -1
- package/dist/collection/components/change-card/rebill-change-card.js +1 -2
- package/dist/collection/components/change-card/rebill-change-card.js.map +1 -1
- package/dist/collection/components/checkout/rebill-checkout.js +10 -3
- package/dist/collection/components/checkout/rebill-checkout.js.map +1 -1
- package/dist/collection/components/shared/form/form.js +5 -2
- package/dist/collection/components/shared/form/form.js.map +1 -1
- package/dist/collection/components/shared/inputs/input-phone/input-phone.js +9 -12
- package/dist/collection/components/shared/inputs/input-phone/input-phone.js.map +1 -1
- package/dist/components/p-8BpuJ_V5.js.map +1 -1
- package/dist/components/{p-0y1EkPsV.js → p-CRMAYXj0.js} +3 -3
- package/dist/components/{p-0y1EkPsV.js.map → p-CRMAYXj0.js.map} +1 -1
- package/dist/components/{p-BFqhozQ0.js → p-DKPrueOT.js} +3 -3
- package/dist/components/{p-BFqhozQ0.js.map → p-DKPrueOT.js.map} +1 -1
- package/dist/components/{p-Cs-pA3OO.js → p-DVaxhIJe.js} +7 -4
- package/dist/components/p-DVaxhIJe.js.map +1 -0
- package/dist/components/{p-RbKsk0NK.js → p-Dsv10JVE.js} +11 -14
- package/dist/components/p-Dsv10JVE.js.map +1 -0
- package/dist/components/rebill-change-card.js +5 -6
- package/dist/components/rebill-change-card.js.map +1 -1
- package/dist/components/rebill-checkout-form.js +1 -1
- package/dist/components/rebill-checkout.js +14 -7
- package/dist/components/rebill-checkout.js.map +1 -1
- package/dist/components/rebill-form.js +1 -1
- package/dist/components/rebill-input-phone.js +1 -1
- package/dist/components/rebill-renewal.js +4 -4
- package/dist/components/root-component.js +1 -1
- package/dist/components/user-information-phone.js +1 -1
- package/dist/esm/card-fields-wrapper.card-identification.card-iframe.card-skeleton.rebill-address-form.rebill-address-search.rebill-input-combo.rebill-input-phone.rebill-installments.selectable-card.single-payment-method.entry.js.map +1 -1
- package/dist/esm/card-fields-wrapper_11.entry.js +9 -12
- package/dist/esm/index-BTZ7D7jU.js.map +1 -1
- package/dist/esm/rebill-change-card.entry.js +1 -2
- package/dist/esm/rebill-change-card.entry.js.map +1 -1
- package/dist/esm/rebill-checkout.entry.js +10 -3
- package/dist/esm/rebill-checkout.entry.js.map +1 -1
- package/dist/esm/rebill-form.entry.js +5 -2
- package/dist/esm/rebill-form.entry.js.map +1 -1
- package/dist/rebill-web-components-sdk/card-fields-wrapper.card-identification.card-iframe.card-skeleton.rebill-address-form.rebill-address-search.rebill-input-combo.rebill-input-phone.rebill-installments.selectable-card.single-payment-method.entry.esm.js.map +1 -1
- package/dist/rebill-web-components-sdk/{p-a8726b6d.entry.js → p-85e7cd6f.entry.js} +2 -2
- package/dist/rebill-web-components-sdk/{p-a8726b6d.entry.js.map → p-85e7cd6f.entry.js.map} +1 -1
- package/dist/rebill-web-components-sdk/{p-d827e221.entry.js → p-90c50e5b.entry.js} +2 -2
- package/dist/rebill-web-components-sdk/p-90c50e5b.entry.js.map +1 -0
- package/dist/rebill-web-components-sdk/p-BTZ7D7jU.js.map +1 -1
- package/dist/rebill-web-components-sdk/{p-14fb1c5c.entry.js → p-ae158592.entry.js} +2 -2
- package/dist/rebill-web-components-sdk/p-ae158592.entry.js.map +1 -0
- package/dist/rebill-web-components-sdk/{p-1a99d53d.entry.js → p-e6df1fe2.entry.js} +2 -2
- package/dist/rebill-web-components-sdk/{p-1a99d53d.entry.js.map → p-e6df1fe2.entry.js.map} +1 -1
- package/dist/rebill-web-components-sdk/rebill-change-card.entry.esm.js.map +1 -1
- package/dist/rebill-web-components-sdk/rebill-checkout.entry.esm.js.map +1 -1
- package/dist/rebill-web-components-sdk/rebill-form.entry.esm.js.map +1 -1
- package/dist/rebill-web-components-sdk/rebill-web-components-sdk.esm.js +1 -1
- package/package.json +1 -1
- package/dist/components/p-Cs-pA3OO.js.map +0 -1
- package/dist/components/p-RbKsk0NK.js.map +0 -1
- package/dist/rebill-web-components-sdk/p-14fb1c5c.entry.js.map +0 -1
- package/dist/rebill-web-components-sdk/p-d827e221.entry.js.map +0 -1
|
@@ -185,20 +185,17 @@ export class InputPhone {
|
|
|
185
185
|
this.input.emit({ id: this.validationErrorId, value: validationResult.isValid.toString() });
|
|
186
186
|
};
|
|
187
187
|
emitBlurPhone = async () => {
|
|
188
|
-
await PhoneValidator.validate(this.value, {
|
|
188
|
+
const validation = await PhoneValidator.validate(this.value, {
|
|
189
189
|
required: this.required,
|
|
190
190
|
country: this.selectedCountry,
|
|
191
191
|
});
|
|
192
|
-
// this.blurPhone.emit({
|
|
193
|
-
// id: this.phoneNumberId,
|
|
194
|
-
// value: this.value,
|
|
195
|
-
// });
|
|
196
|
-
// this.blurPhone.emit({
|
|
197
|
-
// id: this.countryCodeId,
|
|
198
|
-
// value: this.selectedCountry.dialCode,
|
|
199
|
-
// });
|
|
200
192
|
this.blur.emit({ id: this.phoneNumberId, value: this.value });
|
|
201
193
|
this.blur.emit({ id: this.countryCodeId, value: this.selectedCountry.dialCode });
|
|
194
|
+
// Emit also the validation flag so the form can validate the correct schema field on blur
|
|
195
|
+
this.blur.emit({
|
|
196
|
+
id: this.validationErrorId,
|
|
197
|
+
value: validation.isValid.toString(),
|
|
198
|
+
});
|
|
202
199
|
};
|
|
203
200
|
handleClickOutside = (event) => {
|
|
204
201
|
const target = event.target;
|
|
@@ -232,11 +229,11 @@ export class InputPhone {
|
|
|
232
229
|
// Usar translateError para ambos tipos de errores
|
|
233
230
|
const translatedError = this.translateError(this.error);
|
|
234
231
|
const translatedValidationError = this.translateError(this.validationError);
|
|
235
|
-
const displayError =
|
|
236
|
-
return (h("div", { key: '
|
|
232
|
+
const displayError = translatedValidationError || translatedError;
|
|
233
|
+
return (h("div", { key: '8ba4b3763fed5beaa63d3c03997a5d3225bdac2b', class: "input-container" }, h("div", { key: '4d8a081c6818b007a66e749ade19ed2a03bcbfa2', class: inputClasses }, h("div", { key: 'b99f8c73cb689ecf8b6b23c99dfea1fbc8d7679a', class: "input-combo-select country-selector", onClick: this.toggleDropdown }, h("span", { key: '579c92643304fb84edffd02eaafa0c8d053dea67', class: "flag" }, this.selectedCountry.flag), h("span", { key: '87323ab9edab7a9716b3f25526d343faa5789d22', class: "dial-code" }, this.selectedCountry.dialCode), h("span", { key: 'abe6273a9664575c362ee793412baca2a2128810', class: `dropdown-arrow ${this.isDropdownOpen ? 'open' : ''}` }, "\u25BC")), this.isDropdownOpen && (h("div", { key: 'cf8da028b705288941dad87e277cbccf6a4a6830', class: "country-dropdown" }, this.searchable && (h("div", { key: 'c803f6f2b353618554edfa51204e9ec4cf3331d3', class: "search-container", onClick: this.handleSearchClick }, h("div", { key: '128a73017eee1f7d4e1ee5dcf4a20f09bc45889e', class: "search-input-wrapper" }, h("rebill-icon", { key: '9fdd3b1c87db54bb16c97ea895c548ed548a9677', name: "search", size: "16px", class: "search-icon" }), 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 && (h("button", { key: 'c0c46bad64ec034a954d9714568ff95ee39f88b4', type: "button", class: "clear-search", onClick: event => {
|
|
237
234
|
event.stopPropagation();
|
|
238
235
|
this.clearSearch();
|
|
239
|
-
}, "aria-label": "Clear search" }, h("rebill-icon", { key: '
|
|
236
|
+
}, "aria-label": "Clear search" }, h("rebill-icon", { key: '2c37884a69bdc23cee3d2c02f45c066e6bebc835', name: "x", size: "16px" })))))), this.filteredCountries.length > 0 ? (this.filteredCountries.map(country => (h("div", { key: country.code, class: "country-option", onClick: e => this.selectCountry(country, e) }, h("span", { class: "flag" }, country.flag), h("span", { class: "country-name" }, country.name), h("span", { class: "dial-code" }, country.dialCode))))) : (h("div", { class: "no-results" }, "No se encontraron resultados")))), 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 && h("span", { key: '7c1cedfe0647fd05df06229d36784b5d6340f84f', class: "error-message" }, displayError)));
|
|
240
237
|
}
|
|
241
238
|
static get is() { return "rebill-input-phone"; }
|
|
242
239
|
static get originalStyleUrls() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-phone.js","sourceRoot":"","sources":["../../../../../src/components/shared/inputs/input-phone/input-phone.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, State, h } from '@stencil/core';\nimport { I18nService } from '../../../../i18n/i18n.service';\nimport { COUNTRIES, CountryOption } from '../../../../models';\nimport { SessionStore } from '../../../../store/session.store';\nimport { PhoneValidator } from './phone-validation';\n\n@Component({\n tag: 'rebill-input-phone',\n styleUrl: 'input-phone.css',\n shadow: false,\n})\nexport class InputPhone {\n @Element() el: HTMLElement;\n private searchInputRef?: HTMLInputElement;\n private unsubscribeCurrentLocaleStore?: () => void;\n\n /** Placeholder del input */\n @Prop() placeholder: string = '';\n /** Valor del input */\n @Prop({ mutable: true, reflect: true }) value: string = '';\n /** Mensaje de error */\n @Prop() error: string = '';\n /** ID del input */\n @Prop() phoneNumberId: string = '';\n @Prop() countryCodeId: string = '';\n @Prop() validationErrorId: string = '';\n\n /** Estado deshabilitado */\n @Prop() disabled: boolean = false;\n /** País inicial por defecto */\n @Prop() initialCountry: string = 'ar';\n /** Validación requerida */\n @Prop() required: boolean = false;\n /** Habilitar funcionalidad de búsqueda en el selector de países */\n @Prop() searchable: boolean = false;\n /** Placeholder del campo de búsqueda de países */\n @Prop() searchPlaceholder: string = 'Search for countries...';\n\n @Event() input: EventEmitter<{ id: string; value: string }>;\n @Event() blur: EventEmitter<{ id: string; value: string }>;\n\n @State() selectedCountry: CountryOption = COUNTRIES.find(c => c.code === this.initialCountry);\n @State() isDropdownOpen: boolean = false;\n @State() validationError: string = '';\n @State() searchTerm: string = '';\n @State() filteredCountries: CountryOption[] = [];\n @State() componentId: string = '';\n @State() languageUpdateTrigger: number = 0;\n\n @Listen('change', { target: 'document' })\n handleFormChange(event: CustomEvent) {\n const formData = event.detail;\n if (formData && this.phoneNumberId in formData) {\n this.value = formData[this.phoneNumberId];\n }\n }\n\n @Listen('closeAllSelects', { target: 'document' })\n handleCloseAllSelects(event: CustomEvent) {\n if (event.detail !== this.componentId && this.isDropdownOpen) {\n this.isDropdownOpen = false;\n this.searchTerm = '';\n this.filterCountries();\n }\n }\n\n @Listen('click', { target: 'document' })\n handleDocumentClick(event: Event) {\n const target = event.target as Element;\n\n const isClickOnThisComponent = target.closest('rebill-input-phone');\n\n if (!isClickOnThisComponent && this.isDropdownOpen) {\n this.isDropdownOpen = false;\n this.searchTerm = '';\n this.filterCountries();\n }\n }\n\n // All countries with their data\n private countries: CountryOption[] = COUNTRIES;\n\n private translateError(errorKey: string | undefined): string {\n if (!errorKey) return '';\n if (errorKey.includes('validation.') || errorKey.includes('paymentErrors.')) {\n return I18nService.translate(errorKey);\n }\n return errorKey;\n }\n\n componentWillLoad() {\n this.selectedCountry = this.countries.find(c => c.code === this.initialCountry);\n this.filteredCountries = [...this.countries];\n this.componentId = this.countryCodeId || `phone-${Math.random().toString(36).substr(2, 9)}`;\n }\n\n componentWillUpdate() {\n if (this.searchable) {\n this.filterCountries();\n }\n }\n\n componentDidUpdate() {\n if (this.isDropdownOpen && this.searchable && this.searchInputRef) {\n requestAnimationFrame(() => {\n this.searchInputRef?.focus();\n });\n }\n }\n\n private onInput = async (event: Event) => {\n if (this.disabled) return;\n\n const input = event.target as HTMLInputElement;\n let inputValue = input.value;\n\n inputValue = PhoneValidator.filterInput(inputValue, this.selectedCountry);\n\n input.value = inputValue;\n this.value = inputValue;\n this.validationError = '';\n\n this.emitChange();\n };\n\n private onPhoneBlurPhone = async () => {\n const trimmedValue = this.value.trim();\n\n if (trimmedValue !== this.value) {\n this.value = trimmedValue;\n this.emitChange();\n }\n\n await this.validatePhoneNumber();\n this.emitBlurPhone();\n };\n\n private validatePhoneNumber = async () => {\n const validationResult = await PhoneValidator.validate(this.value, {\n required: this.required,\n country: this.selectedCountry,\n });\n\n this.validationError = validationResult.error;\n };\n\n private toggleDropdown = (event: Event) => {\n if (this.disabled) return;\n event.stopPropagation();\n\n const wasOpen = this.isDropdownOpen;\n this.isDropdownOpen = !this.isDropdownOpen;\n\n if (!this.isDropdownOpen) {\n this.searchTerm = '';\n this.filterCountries();\n } else {\n if (!wasOpen) {\n document.dispatchEvent(new CustomEvent('closeAllSelects', { detail: this.componentId }));\n }\n\n if (this.searchable) {\n requestAnimationFrame(() => {\n this.searchInputRef?.focus();\n });\n }\n }\n };\n\n private selectCountry = async (country: CountryOption, event: Event) => {\n event.stopPropagation();\n this.selectedCountry = country;\n this.isDropdownOpen = false;\n this.searchTerm = '';\n this.filterCountries();\n this.validationError = '';\n\n this.emitChange();\n };\n\n private filterCountries = () => {\n if (!this.searchTerm.trim()) {\n this.filteredCountries = [...this.countries];\n } else {\n this.filteredCountries = this.countries.filter(\n country =>\n country.name.toLowerCase().includes(this.searchTerm.toLowerCase()) ||\n country.dialCode.includes(this.searchTerm),\n );\n }\n };\n\n private handleSearchInput = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.searchTerm = target.value;\n this.filterCountries();\n };\n\n private clearSearch = () => {\n this.searchTerm = '';\n this.filterCountries();\n };\n\n private handleSearchClick = (event: Event) => {\n event.stopPropagation();\n };\n\n private emitChange = async () => {\n const validationResult = await PhoneValidator.validate(this.value, {\n required: this.required,\n country: this.selectedCountry,\n });\n\n // this.phoneInput.emit({\n // id: this.phoneNumberId,\n // value: this.value,\n // });\n // this.phoneInput.emit({\n // id: this.countryCodeId,\n // value: this.selectedCountry.dialCode,\n // });\n // this.phoneInput.emit({\n // id: this.validationErrorId,\n // value: validationResult.isValid.toString(),\n // });\n\n this.input.emit({ id: this.phoneNumberId, value: this.value });\n this.input.emit({ id: this.countryCodeId, value: this.selectedCountry.dialCode });\n this.input.emit({ id: this.validationErrorId, value: validationResult.isValid.toString() });\n };\n\n private emitBlurPhone = async () => {\n await PhoneValidator.validate(this.value, {\n required: this.required,\n country: this.selectedCountry,\n });\n\n // this.blurPhone.emit({\n // id: this.phoneNumberId,\n // value: this.value,\n // });\n // this.blurPhone.emit({\n // id: this.countryCodeId,\n // value: this.selectedCountry.dialCode,\n // });\n\n this.blur.emit({ id: this.phoneNumberId, value: this.value });\n this.blur.emit({ id: this.countryCodeId, value: this.selectedCountry.dialCode });\n };\n\n private handleClickOutside = (event: Event) => {\n const target = event.target as Node;\n if (this.el && !this.el.contains(target)) {\n this.isDropdownOpen = false;\n this.searchTerm = '';\n this.filterCountries();\n }\n };\n\n componentDidLoad() {\n setTimeout(() => {\n document.addEventListener('click', this.handleClickOutside);\n }, 0);\n\n this.unsubscribeCurrentLocaleStore = SessionStore.onChange('currentLocale', () => {\n this.languageUpdateTrigger++;\n });\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleClickOutside);\n if (this.unsubscribeCurrentLocaleStore) {\n this.unsubscribeCurrentLocaleStore();\n }\n }\n\n render() {\n const inputClasses = {\n 'phone-input-container': true,\n 'input-error': !!(this.error || this.validationError),\n 'disabled': this.disabled,\n 'input-combo-wrapper': true,\n };\n\n // Usar translateError para ambos tipos de errores\n const translatedError = this.translateError(this.error);\n const translatedValidationError = this.translateError(this.validationError);\n const displayError = translatedError || translatedValidationError;\n\n return (\n <div class=\"input-container\">\n <div class={inputClasses}>\n <div class=\"input-combo-select country-selector\" onClick={this.toggleDropdown}>\n <span class=\"flag\">{this.selectedCountry.flag}</span>\n <span class=\"dial-code\">{this.selectedCountry.dialCode}</span>\n <span class={`dropdown-arrow ${this.isDropdownOpen ? 'open' : ''}`}>▼</span>\n </div>\n\n {this.isDropdownOpen && (\n <div class=\"country-dropdown\">\n {this.searchable && (\n <div class=\"search-container\" onClick={this.handleSearchClick}>\n <div class=\"search-input-wrapper\">\n <rebill-icon name=\"search\" size=\"16px\" class=\"search-icon\" />\n <input\n ref={el => (this.searchInputRef = el)}\n type=\"text\"\n class=\"search-input\"\n placeholder={this.searchPlaceholder}\n value={this.searchTerm}\n onInput={this.handleSearchInput}\n onClick={this.handleSearchClick}\n />\n {this.searchTerm && (\n <button\n type=\"button\"\n class=\"clear-search\"\n onClick={event => {\n event.stopPropagation();\n this.clearSearch();\n }}\n aria-label=\"Clear search\"\n >\n <rebill-icon name=\"x\" size=\"16px\" />\n </button>\n )}\n </div>\n </div>\n )}\n {this.filteredCountries.length > 0 ? (\n this.filteredCountries.map(country => (\n <div\n key={country.code}\n class=\"country-option\"\n onClick={e => this.selectCountry(country, e)}\n >\n <span class=\"flag\">{country.flag}</span>\n <span class=\"country-name\">{country.name}</span>\n <span class=\"dial-code\">{country.dialCode}</span>\n </div>\n ))\n ) : (\n <div class=\"no-results\">No se encontraron resultados</div>\n )}\n </div>\n )}\n\n <input\n id={this.phoneNumberId}\n type=\"tel\"\n class=\"input-combo-element phone-number-input\"\n placeholder={this.placeholder}\n value={this.value}\n onInput={this.onInput}\n onBlur={this.onPhoneBlurPhone}\n disabled={this.disabled}\n required={this.required}\n />\n </div>\n {displayError && <span class=\"error-message\">{displayError}</span>}\n </div>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"input-phone.js","sourceRoot":"","sources":["../../../../../src/components/shared/inputs/input-phone/input-phone.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, State, h } from '@stencil/core';\nimport { I18nService } from '../../../../i18n/i18n.service';\nimport { COUNTRIES, CountryOption } from '../../../../models';\nimport { SessionStore } from '../../../../store/session.store';\nimport { PhoneValidator } from './phone-validation';\n\n@Component({\n tag: 'rebill-input-phone',\n styleUrl: 'input-phone.css',\n shadow: false,\n})\nexport class InputPhone {\n @Element() el: HTMLElement;\n private searchInputRef?: HTMLInputElement;\n private unsubscribeCurrentLocaleStore?: () => void;\n\n /** Placeholder del input */\n @Prop() placeholder: string = '';\n /** Valor del input */\n @Prop({ mutable: true, reflect: true }) value: string = '';\n /** Mensaje de error */\n @Prop() error: string = '';\n /** ID del input */\n @Prop() phoneNumberId: string = '';\n @Prop() countryCodeId: string = '';\n @Prop() validationErrorId: string = '';\n\n /** Estado deshabilitado */\n @Prop() disabled: boolean = false;\n /** País inicial por defecto */\n @Prop() initialCountry: string = 'ar';\n /** Validación requerida */\n @Prop() required: boolean = false;\n /** Habilitar funcionalidad de búsqueda en el selector de países */\n @Prop() searchable: boolean = false;\n /** Placeholder del campo de búsqueda de países */\n @Prop() searchPlaceholder: string = 'Search for countries...';\n\n @Event() input: EventEmitter<{ id: string; value: string }>;\n @Event() blur: EventEmitter<{ id: string; value: string }>;\n\n @State() selectedCountry: CountryOption = COUNTRIES.find(c => c.code === this.initialCountry);\n @State() isDropdownOpen: boolean = false;\n @State() validationError: string = '';\n @State() searchTerm: string = '';\n @State() filteredCountries: CountryOption[] = [];\n @State() componentId: string = '';\n @State() languageUpdateTrigger: number = 0;\n\n @Listen('change', { target: 'document' })\n handleFormChange(event: CustomEvent) {\n const formData = event.detail;\n if (formData && this.phoneNumberId in formData) {\n this.value = formData[this.phoneNumberId];\n }\n }\n\n @Listen('closeAllSelects', { target: 'document' })\n handleCloseAllSelects(event: CustomEvent) {\n if (event.detail !== this.componentId && this.isDropdownOpen) {\n this.isDropdownOpen = false;\n this.searchTerm = '';\n this.filterCountries();\n }\n }\n\n @Listen('click', { target: 'document' })\n handleDocumentClick(event: Event) {\n const target = event.target as Element;\n\n const isClickOnThisComponent = target.closest('rebill-input-phone');\n\n if (!isClickOnThisComponent && this.isDropdownOpen) {\n this.isDropdownOpen = false;\n this.searchTerm = '';\n this.filterCountries();\n }\n }\n\n // All countries with their data\n private countries: CountryOption[] = COUNTRIES;\n\n private translateError(errorKey: string | undefined): string {\n if (!errorKey) return '';\n if (errorKey.includes('validation.') || errorKey.includes('paymentErrors.')) {\n return I18nService.translate(errorKey);\n }\n return errorKey;\n }\n\n componentWillLoad() {\n this.selectedCountry = this.countries.find(c => c.code === this.initialCountry);\n this.filteredCountries = [...this.countries];\n this.componentId = this.countryCodeId || `phone-${Math.random().toString(36).substr(2, 9)}`;\n }\n\n componentWillUpdate() {\n if (this.searchable) {\n this.filterCountries();\n }\n }\n\n componentDidUpdate() {\n if (this.isDropdownOpen && this.searchable && this.searchInputRef) {\n requestAnimationFrame(() => {\n this.searchInputRef?.focus();\n });\n }\n }\n\n private onInput = async (event: Event) => {\n if (this.disabled) return;\n\n const input = event.target as HTMLInputElement;\n let inputValue = input.value;\n\n inputValue = PhoneValidator.filterInput(inputValue, this.selectedCountry);\n\n input.value = inputValue;\n this.value = inputValue;\n this.validationError = '';\n\n this.emitChange();\n };\n\n private onPhoneBlurPhone = async () => {\n const trimmedValue = this.value.trim();\n\n if (trimmedValue !== this.value) {\n this.value = trimmedValue;\n this.emitChange();\n }\n\n await this.validatePhoneNumber();\n this.emitBlurPhone();\n };\n\n private validatePhoneNumber = async () => {\n const validationResult = await PhoneValidator.validate(this.value, {\n required: this.required,\n country: this.selectedCountry,\n });\n\n this.validationError = validationResult.error;\n };\n\n private toggleDropdown = (event: Event) => {\n if (this.disabled) return;\n event.stopPropagation();\n\n const wasOpen = this.isDropdownOpen;\n this.isDropdownOpen = !this.isDropdownOpen;\n\n if (!this.isDropdownOpen) {\n this.searchTerm = '';\n this.filterCountries();\n } else {\n if (!wasOpen) {\n document.dispatchEvent(new CustomEvent('closeAllSelects', { detail: this.componentId }));\n }\n\n if (this.searchable) {\n requestAnimationFrame(() => {\n this.searchInputRef?.focus();\n });\n }\n }\n };\n\n private selectCountry = async (country: CountryOption, event: Event) => {\n event.stopPropagation();\n this.selectedCountry = country;\n this.isDropdownOpen = false;\n this.searchTerm = '';\n this.filterCountries();\n this.validationError = '';\n\n this.emitChange();\n };\n\n private filterCountries = () => {\n if (!this.searchTerm.trim()) {\n this.filteredCountries = [...this.countries];\n } else {\n this.filteredCountries = this.countries.filter(\n country =>\n country.name.toLowerCase().includes(this.searchTerm.toLowerCase()) ||\n country.dialCode.includes(this.searchTerm),\n );\n }\n };\n\n private handleSearchInput = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.searchTerm = target.value;\n this.filterCountries();\n };\n\n private clearSearch = () => {\n this.searchTerm = '';\n this.filterCountries();\n };\n\n private handleSearchClick = (event: Event) => {\n event.stopPropagation();\n };\n\n private emitChange = async () => {\n const validationResult = await PhoneValidator.validate(this.value, {\n required: this.required,\n country: this.selectedCountry,\n });\n\n // this.phoneInput.emit({\n // id: this.phoneNumberId,\n // value: this.value,\n // });\n // this.phoneInput.emit({\n // id: this.countryCodeId,\n // value: this.selectedCountry.dialCode,\n // });\n // this.phoneInput.emit({\n // id: this.validationErrorId,\n // value: validationResult.isValid.toString(),\n // });\n\n this.input.emit({ id: this.phoneNumberId, value: this.value });\n this.input.emit({ id: this.countryCodeId, value: this.selectedCountry.dialCode });\n this.input.emit({ id: this.validationErrorId, value: validationResult.isValid.toString() });\n };\n\n private emitBlurPhone = async () => {\n const validation = await PhoneValidator.validate(this.value, {\n required: this.required,\n country: this.selectedCountry,\n });\n\n this.blur.emit({ id: this.phoneNumberId, value: this.value });\n this.blur.emit({ id: this.countryCodeId, value: this.selectedCountry.dialCode });\n // Emit also the validation flag so the form can validate the correct schema field on blur\n this.blur.emit({\n id: this.validationErrorId,\n value: validation.isValid.toString(),\n });\n };\n\n private handleClickOutside = (event: Event) => {\n const target = event.target as Node;\n if (this.el && !this.el.contains(target)) {\n this.isDropdownOpen = false;\n this.searchTerm = '';\n this.filterCountries();\n }\n };\n\n componentDidLoad() {\n setTimeout(() => {\n document.addEventListener('click', this.handleClickOutside);\n }, 0);\n\n this.unsubscribeCurrentLocaleStore = SessionStore.onChange('currentLocale', () => {\n this.languageUpdateTrigger++;\n });\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleClickOutside);\n if (this.unsubscribeCurrentLocaleStore) {\n this.unsubscribeCurrentLocaleStore();\n }\n }\n\n render() {\n const inputClasses = {\n 'phone-input-container': true,\n 'input-error': !!(this.error || this.validationError),\n 'disabled': this.disabled,\n 'input-combo-wrapper': true,\n };\n\n // Usar translateError para ambos tipos de errores\n const translatedError = this.translateError(this.error);\n const translatedValidationError = this.translateError(this.validationError);\n const displayError = translatedValidationError || translatedError;\n\n return (\n <div class=\"input-container\">\n <div class={inputClasses}>\n <div class=\"input-combo-select country-selector\" onClick={this.toggleDropdown}>\n <span class=\"flag\">{this.selectedCountry.flag}</span>\n <span class=\"dial-code\">{this.selectedCountry.dialCode}</span>\n <span class={`dropdown-arrow ${this.isDropdownOpen ? 'open' : ''}`}>▼</span>\n </div>\n\n {this.isDropdownOpen && (\n <div class=\"country-dropdown\">\n {this.searchable && (\n <div class=\"search-container\" onClick={this.handleSearchClick}>\n <div class=\"search-input-wrapper\">\n <rebill-icon name=\"search\" size=\"16px\" class=\"search-icon\" />\n <input\n ref={el => (this.searchInputRef = el)}\n type=\"text\"\n class=\"search-input\"\n placeholder={this.searchPlaceholder}\n value={this.searchTerm}\n onInput={this.handleSearchInput}\n onClick={this.handleSearchClick}\n />\n {this.searchTerm && (\n <button\n type=\"button\"\n class=\"clear-search\"\n onClick={event => {\n event.stopPropagation();\n this.clearSearch();\n }}\n aria-label=\"Clear search\"\n >\n <rebill-icon name=\"x\" size=\"16px\" />\n </button>\n )}\n </div>\n </div>\n )}\n {this.filteredCountries.length > 0 ? (\n this.filteredCountries.map(country => (\n <div\n key={country.code}\n class=\"country-option\"\n onClick={e => this.selectCountry(country, e)}\n >\n <span class=\"flag\">{country.flag}</span>\n <span class=\"country-name\">{country.name}</span>\n <span class=\"dial-code\">{country.dialCode}</span>\n </div>\n ))\n ) : (\n <div class=\"no-results\">No se encontraron resultados</div>\n )}\n </div>\n )}\n\n <input\n id={this.phoneNumberId}\n type=\"tel\"\n class=\"input-combo-element phone-number-input\"\n placeholder={this.placeholder}\n value={this.value}\n onInput={this.onInput}\n onBlur={this.onPhoneBlurPhone}\n disabled={this.disabled}\n required={this.required}\n />\n </div>\n {displayError && <span class=\"error-message\">{displayError}</span>}\n </div>\n );\n }\n}\n"]}
|