npm - rebill-web-components-sdk - Versions diffs - 1.10.10-beta.1 → 1.10.10-beta.2 - Mend

rebill-web-components-sdk 1.10.10-beta.1 → 1.10.10-beta.2

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.

Files changed (170) hide show

package/dist/components/{p-BOYEmkB-.js → p-D19UjlNC.js} RENAMED Viewed

@@ -5,10 +5,10 @@ import { B as BREAKPOINT_ENUM, g as getBreakpoint } from './p-Do_vNuMa.js';
 import { C as COLORS_ENUM } from './p-C5Pu-n-i.js';
 import { d as defineCustomElement$7 } from './p-C2hRlPI3.js';
 import { d as defineCustomElement$6 } from './p-B_0TX9Sm.js';
-import { d as defineCustomElement$5 } from './p-d40T-Ru7.js';
-import { d as defineCustomElement$4 } from './p-DeStKoNN.js';
+import { d as defineCustomElement$5 } from './p-fJpj0Zb5.js';
+import { d as defineCustomElement$4 } from './p-Dsrpb4rI.js';
 import { d as defineCustomElement$3 } from './p-Np4T5oyp.js';
-import { d as defineCustomElement$2 } from './p-xKyxKtdF.js';
+import { d as defineCustomElement$2 } from './p-30DP4s-1.js';
 import { d as defineCustomElement$1 } from './p-BaBXKrWI.js';
 const processingPaymentCss = ".lottie-container{margin-bottom:2rem;display:flex;justify-content:center;align-items:center}.lottie-animation{width:166px;height:165px;display:flex;justify-content:center;align-items:center}.text-content{margin-bottom:2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.security-badge{width:100%;max-width:450px;height:40px;display:flex;align-items:center;justify-content:center;background:#ebedef;border-radius:8px;box-sizing:border-box}.lock-icon{width:16px;height:16px;color:var(--rebill-color-text-secondary, #6b7280)}@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:0.8}}.contact-info{text-align:left}@media (max-width: 1024px){.security-badge{width:100%;max-width:100%}.lottie-animation{width:166px;height:165px}.text-content{gap:12px}}@media (max-width: 767px){.processing-container{padding:0 16px}}.processing-container{width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box}";
@@ -156,6 +156,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { ProcessingPayment as P, defineCustomElement as d };
-//# sourceMappingURL=p-BOYEmkB-.js.map
+//# sourceMappingURL=p-D19UjlNC.js.map
-//# sourceMappingURL=p-BOYEmkB-.js.map
+//# sourceMappingURL=p-D19UjlNC.js.map

package/dist/components/{p-BOYEmkB-.js.map → p-D19UjlNC.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~BOYEmkB-.~~js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","sessionState"],"sources":["src/components/checkout/processing-payment/processing-payment.css?tag=rebill-processing-payment","src/components/checkout/processing-payment/processing-payment.tsx"],"sourcesContent":["/* Lottie Animation /\n.lottie-container {\n margin-bottom: 2rem;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.lottie-animation {\n width: 166px;\n height: 165px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n/ Text Content /\n.text-content {\n margin-bottom: 2rem;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n\n/ Security Badge /\n.security-badge {\n width: 100%;\n max-width: 450px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #ebedef;\n border-radius: 8px;\n box-sizing: border-box;\n}\n\n.lock-icon {\n width: 16px;\n height: 16px;\n color: var(--rebill-color-text-secondary, #6b7280);\n}\n\n/ Animation /\n@keyframes pulse {\n 0%,\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n 50% {\n transform: scale(1.05);\n opacity: 0.8;\n }\n}\n\n.contact-info {\n text-align: left;\n}\n\n/ Responsive Styles /\n@media (max-width: 1024px) {\n .security-badge {\n width: 100%;\n max-width: 100%;\n }\n\n .lottie-animation {\n width: 166px;\n height: 165px;\n }\n\n .text-content {\n gap: 12px;\n }\n}\n\n@media (max-width: 767px) {\n .processing-container {\n padding: 0 16px;\n }\n}\n\n.processing-container {\n width: 100%;\n max-width: 100%;\n overflow-x: hidden;\n box-sizing: border-box;\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { sessionState, SessionStore } from '../../../store/session.store';\nimport { getAssetURL } from '../../../utils/assets';\nimport { BREAKPOINT_ENUM, getBreakpoint } from '../../../utils/breakpoint';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\nimport '../../shared/card-icon/card-icon';\n\n@Component({\n tag: 'rebill-processing-payment',\n styleUrl: 'processing-payment.css',\n shadow: false,\n})\nexport class ProcessingPayment {\n @Prop() titleKey: string = 'processing.processingTitle';\n @Prop() subtitleKey: string = 'processing.processingSubtitle';\n @State() currentLocale: string = sessionState.currentLocale;\n @State() breakpoint: BREAKPOINT_ENUM = BREAKPOINT_ENUM.DESKTOP;\n @State() loaderProgress: number = 0;\n @State() isLoadingLottie: boolean = true;\n\n private unsubscribeCurrentLocaleStore?: () => void;\n private progressInterval?: number;\n private lottieContainer?: HTMLElement;\n private lottieAnimation?: any;\n\n componentWillLoad() {\n this.breakpoint = getBreakpoint(window.innerWidth);\n this.unsubscribeCurrentLocaleStore = SessionStore.onChange('currentLocale', () => {\n this.currentLocale = sessionState.currentLocale;\n });\n }\n\n componentDidLoad() {\n window.addEventListener('resize', this.handleResize);\n this.loadLottieAnimation();\n }\n\n disconnectedCallback() {\n if (this.unsubscribeCurrentLocaleStore) {\n this.unsubscribeCurrentLocaleStore();\n }\n window.removeEventListener('resize', this.handleResize);\n this.stopLoaderAnimation();\n }\n\n private handleResize = () => {\n this.breakpoint = getBreakpoint(window.innerWidth);\n };\n\n private loadLottieAnimation = async () => {\n try {\n const lottie = await import('lottie-web');\n const animationData = await fetch(getAssetURL(`loader-card-v2.json`));\n const animationJson = await animationData.json();\n\n if (this.lottieContainer) {\n this.lottieAnimation = lottie.default.loadAnimation({\n container: this.lottieContainer,\n renderer: 'svg',\n loop: true,\n autoplay: true,\n animationData: animationJson,\n });\n } else {\n this.startLoaderAnimation();\n }\n } catch (error) {\n this.startLoaderAnimation();\n }\n };\n\n private startLoaderAnimation = () => {\n const duration = 2000;\n const interval = 50; // Update every 50ms\n const increment = (interval / duration) 100;\n\n this.progressInterval = window.setInterval(() => {\n this.loaderProgress = Math.min(this.loaderProgress + increment, 100);\n if (this.loaderProgress >= 100) {\n this.stopLoaderAnimation();\n }\n }, interval);\n };\n\n private stopLoaderAnimation = () => {\n if (this.progressInterval) {\n clearInterval(this.progressInterval);\n this.progressInterval = undefined;\n }\n if (this.lottieAnimation) {\n this.lottieAnimation.destroy();\n this.lottieAnimation = undefined;\n }\n };\n\n render() {\n return (\n <rebill-checkout-single-column>\n <div class=\"processing-container\">\n {/* Lottie Animation */}\n <div class=\"lottie-container\">\n <div ref={el => (this.lottieContainer = el)} class=\"lottie-animation\"></div>\n </div>\n <div class=\"text-content\">\n <rebill-typography variant=\"h3\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {I18nService.translate(this.titleKey)}\n </rebill-typography>\n <rebill-typography variant=\"subtitle-bold\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {I18nService.translate(this.subtitleKey)}\n </rebill-typography>\n </div>\n\n <rebill-alert\n type=\"secure\"\n variant=\"variant-secure\"\n icon=\"lock-outline\"\n message={I18nService.translate('otp.secureMessage')}\n />\n </div>\n </rebill-checkout-single-column>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-D19UjlNC.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","sessionState"],"sources":["src/components/checkout/processing-payment/processing-payment.css?tag=rebill-processing-payment","src/components/checkout/processing-payment/processing-payment.tsx"],"sourcesContent":["/* Lottie Animation /\n.lottie-container {\n margin-bottom: 2rem;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.lottie-animation {\n width: 166px;\n height: 165px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n/ Text Content /\n.text-content {\n margin-bottom: 2rem;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n\n/ Security Badge /\n.security-badge {\n width: 100%;\n max-width: 450px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #ebedef;\n border-radius: 8px;\n box-sizing: border-box;\n}\n\n.lock-icon {\n width: 16px;\n height: 16px;\n color: var(--rebill-color-text-secondary, #6b7280);\n}\n\n/ Animation /\n@keyframes pulse {\n 0%,\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n 50% {\n transform: scale(1.05);\n opacity: 0.8;\n }\n}\n\n.contact-info {\n text-align: left;\n}\n\n/ Responsive Styles /\n@media (max-width: 1024px) {\n .security-badge {\n width: 100%;\n max-width: 100%;\n }\n\n .lottie-animation {\n width: 166px;\n height: 165px;\n }\n\n .text-content {\n gap: 12px;\n }\n}\n\n@media (max-width: 767px) {\n .processing-container {\n padding: 0 16px;\n }\n}\n\n.processing-container {\n width: 100%;\n max-width: 100%;\n overflow-x: hidden;\n box-sizing: border-box;\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { sessionState, SessionStore } from '../../../store/session.store';\nimport { getAssetURL } from '../../../utils/assets';\nimport { BREAKPOINT_ENUM, getBreakpoint } from '../../../utils/breakpoint';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\nimport '../../shared/card-icon/card-icon';\n\n@Component({\n tag: 'rebill-processing-payment',\n styleUrl: 'processing-payment.css',\n shadow: false,\n})\nexport class ProcessingPayment {\n @Prop() titleKey: string = 'processing.processingTitle';\n @Prop() subtitleKey: string = 'processing.processingSubtitle';\n @State() currentLocale: string = sessionState.currentLocale;\n @State() breakpoint: BREAKPOINT_ENUM = BREAKPOINT_ENUM.DESKTOP;\n @State() loaderProgress: number = 0;\n @State() isLoadingLottie: boolean = true;\n\n private unsubscribeCurrentLocaleStore?: () => void;\n private progressInterval?: number;\n private lottieContainer?: HTMLElement;\n private lottieAnimation?: any;\n\n componentWillLoad() {\n this.breakpoint = getBreakpoint(window.innerWidth);\n this.unsubscribeCurrentLocaleStore = SessionStore.onChange('currentLocale', () => {\n this.currentLocale = sessionState.currentLocale;\n });\n }\n\n componentDidLoad() {\n window.addEventListener('resize', this.handleResize);\n this.loadLottieAnimation();\n }\n\n disconnectedCallback() {\n if (this.unsubscribeCurrentLocaleStore) {\n this.unsubscribeCurrentLocaleStore();\n }\n window.removeEventListener('resize', this.handleResize);\n this.stopLoaderAnimation();\n }\n\n private handleResize = () => {\n this.breakpoint = getBreakpoint(window.innerWidth);\n };\n\n private loadLottieAnimation = async () => {\n try {\n const lottie = await import('lottie-web');\n const animationData = await fetch(getAssetURL(`loader-card-v2.json`));\n const animationJson = await animationData.json();\n\n if (this.lottieContainer) {\n this.lottieAnimation = lottie.default.loadAnimation({\n container: this.lottieContainer,\n renderer: 'svg',\n loop: true,\n autoplay: true,\n animationData: animationJson,\n });\n } else {\n this.startLoaderAnimation();\n }\n } catch (error) {\n this.startLoaderAnimation();\n }\n };\n\n private startLoaderAnimation = () => {\n const duration = 2000;\n const interval = 50; // Update every 50ms\n const increment = (interval / duration) 100;\n\n this.progressInterval = window.setInterval(() => {\n this.loaderProgress = Math.min(this.loaderProgress + increment, 100);\n if (this.loaderProgress >= 100) {\n this.stopLoaderAnimation();\n }\n }, interval);\n };\n\n private stopLoaderAnimation = () => {\n if (this.progressInterval) {\n clearInterval(this.progressInterval);\n this.progressInterval = undefined;\n }\n if (this.lottieAnimation) {\n this.lottieAnimation.destroy();\n this.lottieAnimation = undefined;\n }\n };\n\n render() {\n return (\n <rebill-checkout-single-column>\n <div class=\"processing-container\">\n {/* Lottie Animation */}\n <div class=\"lottie-container\">\n <div ref={el => (this.lottieContainer = el)} class=\"lottie-animation\"></div>\n </div>\n <div class=\"text-content\">\n <rebill-typography variant=\"h3\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {I18nService.translate(this.titleKey)}\n </rebill-typography>\n <rebill-typography variant=\"subtitle-bold\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n {I18nService.translate(this.subtitleKey)}\n </rebill-typography>\n </div>\n\n <rebill-alert\n type=\"secure\"\n variant=\"variant-secure\"\n icon=\"lock-outline\"\n message={I18nService.translate('otp.secureMessage')}\n />\n </div>\n </rebill-checkout-single-column>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-BqeCVajN.js → p-D6CVLxdH.js} RENAMED Viewed

@@ -2,11 +2,11 @@ import { proxyCustomElement, H, h } from './p-8BpuJ_V5.js';
 import { e as instance, I as I18nService, f as formatAmount, s as state } from './p-5WvVvcYf.js';
 import { a as formatDate } from './p-CHj9hP3K.js';
 import { d as defineCustomElement$7 } from './p-BA6uHn0q.js';
-import { d as defineCustomElement$6 } from './p-CN-2D26g.js';
+import { d as defineCustomElement$6 } from './p-Pg_gixIL.js';
 import { d as defineCustomElement$5 } from './p-sOHrcM75.js';
 import { d as defineCustomElement$4 } from './p-C0ukGjTv.js';
 import { d as defineCustomElement$3 } from './p-Np4T5oyp.js';
-import { d as defineCustomElement$2 } from './p-Bnocq8Cb.js';
+import { d as defineCustomElement$2 } from './p-mSjgruQE.js';
 import { d as defineCustomElement$1 } from './p-BaBXKrWI.js';
 const renewalSummaryCss = ".wrapper{margin:0 auto;display:flex;flex-direction:column;align-items:center}.header{display:flex;flex-direction:column;align-items:center;gap:8px}.title{font-size:1rem;font-weight:500;color:var(--rebill-color-primary-dark-text);text-align:center}.amount{font-size:2.25rem;font-weight:500;color:var(--rebill-color-primary-dark-text);margin:0 0 1.5rem 0;text-align:center;line-height:1.1}.per{font-size:1.1rem;font-weight:400;color:var(--rebill-color-text-secondary)}.label-muted{font-size:1rem;color:var(--rebill-color-primary-dark);margin:0 0 1.5rem 0;text-align:center}.info{width:100%;margin-top:1.5rem;margin-bottom:3rem;display:flex;flex-direction:column;gap:1.4rem}.row{display:flex;justify-content:space-between;align-items:center;font-size:1rem;line-height:1.4;width:100%}.left{color:var(--rebill-color-text-secondary);font-weight:400}.right{color:var(--rebill-color-primary-dark-text);font-weight:400;text-align:right}.divider{border:none;border-top:1px solid var(--rebill-color-border);margin:1rem 0}@media (max-width: 1024px){.amount{margin-bottom:0}.row{font-size:0.9rem}.row:not(:last-child){margin-bottom:0.5rem}.left{color:var(--rebill-color-primary-dark-text)}}.total-row{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:1.1rem;font-weight:600}.total-row .left{color:var(--rebill-color-primary-dark-text)}";
@@ -167,6 +167,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { RenewalSummary as R, defineCustomElement as d };
-//# sourceMappingURL=p-BqeCVajN.js.map
+//# sourceMappingURL=p-D6CVLxdH.js.map
-//# sourceMappingURL=p-BqeCVajN.js.map
+//# sourceMappingURL=p-D6CVLxdH.js.map

package/dist/components/{p-BqeCVajN.js.map → p-D6CVLxdH.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-BqeCVajN.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18n","formatDateByLocale","sessionState"],"sources":["src/components/renewal/renewal-summary/renewal-summary.css?tag=renewal-summary","src/components/renewal/renewal-summary/renewal-summary.tsx"],"sourcesContent":[".wrapper {\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.header {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n}\n.title {\n font-size: 1rem;\n font-weight: 500;\n color: var(--rebill-color-primary-dark-text);\n text-align: center;\n}\n\n.amount {\n font-size: 2.25rem;\n font-weight: 500;\n color: var(--rebill-color-primary-dark-text);\n margin: 0 0 1.5rem 0;\n text-align: center;\n line-height: 1.1;\n}\n\n.per {\n font-size: 1.1rem;\n font-weight: 400;\n color: var(--rebill-color-text-secondary);\n}\n\n.label-muted {\n font-size: 1rem;\n color: var(--rebill-color-primary-dark);\n margin: 0 0 1.5rem 0;\n text-align: center;\n}\n\n.info {\n width: 100%;\n margin-top: 1.5rem;\n margin-bottom: 3rem;\n display: flex;\n flex-direction: column;\n gap: 1.4rem;\n}\n\n.row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 1rem;\n line-height: 1.4;\n width: 100%;\n}\n\n.left {\n color: var(--rebill-color-text-secondary);\n font-weight: 400;\n}\n\n.right {\n color: var(--rebill-color-primary-dark-text);\n font-weight: 400;\n text-align: right;\n}\n\n.divider {\n border: none;\n border-top: 1px solid var(--rebill-color-border);\n margin: 1rem 0;\n}\n\n@media (max-width: 1024px) {\n .amount {\n margin-bottom: 0;\n }\n .row {\n font-size: 0.9rem;\n }\n .row:not(:last-child) {\n margin-bottom: 0.5rem;\n }\n .left {\n color: var(--rebill-color-primary-dark-text);\n }\n}\n\n.total-row {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 1.1rem;\n font-weight: 600;\n}\n\n.total-row .left {\n color: var(--rebill-color-primary-dark-text);\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport i18n from '../../../i18n/i18n.config';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { sessionState } from '../../../store/session.store';\nimport { formatAmount } from '../../../utils/currency-formatter';\nimport { formatDate as formatDateByLocale } from '../../../utils/date-formatter';\n\n@Component({\n tag: 'renewal-summary',\n styleUrl: 'renewal-summary.css',\n shadow: false,\n})\nexport class RenewalSummary {\n @State() private forceUpdate = 0;\n @Prop() displayedComponents: ('header' \| 'details' \| 'summary')[] = [\n 'header',\n 'details',\n 'summary',\n ];\n @Prop() totalAmount!: number;\n @Prop() subTotalAmount!: number;\n @Prop() subscriptionTitle!: string;\n @Prop() subscriptionAmount!: number;\n @Prop() nextChargeDate?: string;\n @Prop() frequency?: { count: number; period: string };\n @Prop() currency: string;\n @Prop() couponCode?: string;\n @Prop() discountAmount?: number;\n @Prop() discountPercentage?: number;\n @Prop() titleKey: string = 'renewal.title';\n\n componentWillLoad() {\n i18n.on('languageChanged', this.handleLanguageChange);\n }\n\n disconnectedCallback() {\n i18n.off('languageChanged', this.handleLanguageChange);\n }\n\n private handleLanguageChange = () => {\n this.forceUpdate = this.forceUpdate + 1;\n };\n\n private getFrequencyText(): string {\n if (!this.frequency \|\| !this.frequency.period) return '';\n\n const period = this.frequency.period.toLowerCase();\n const count = this.frequency.count;\n\n const translationKey = `summary.${period}`;\n return I18nService.translate(translationKey, { count });\n }\n\n private getDiscountAmount(): number {\n if (this.totalAmount < this.subTotalAmount) {\n return this.subTotalAmount - this.totalAmount;\n }\n\n return this.discountAmount \|\| 0;\n }\n\n renderHeader = () => {\n return (\n <div class=\"header\">\n <p class=\"title\">{I18nService.translate(this.titleKey)}</p>\n <p class=\"amount\">\n <span class=\"total-amount\">{formatAmount(this.totalAmount, this.currency)}</span>{' '}\n <span class=\"per\">/ {this.getFrequencyText().toLowerCase()}</span>\n </p>\n </div>\n );\n };\n\n renderInfoRow = (label: string, value: string) => {\n return (\n <div class=\"row\">\n <div class=\"left\">{label}</div>\n <div class=\"right\">{value}</div>\n </div>\n );\n };\n\n renderProduct = () => {\n return this.renderInfoRow(\n this.subscriptionTitle,\n formatAmount(this.subTotalAmount, this.currency),\n );\n };\n\n renderNextRenewal = () => {\n return this.renderInfoRow(\n I18nService.translate('renewal.nextRenewal'),\n formatDateByLocale(this.nextChargeDate, undefined, sessionState.currentLocale),\n );\n };\n\n renderSubtotal = () => {\n return this.renderInfoRow(\n I18nService.translate('renewal.subtotal'),\n formatAmount(this.subTotalAmount, this.currency),\n );\n };\n\n private renderDiscount = () => {\n if (this.getDiscountAmount() <= 0) return null;\n return (\n <div class=\"row\">\n <div class=\"left\">{I18nService.translate('summary.discount')}</div>\n <div class=\"right discount-chip-wrapper\">\n <discount-coupon\n displayMode=\"readonly\"\n readonlyCouponCode={this.couponCode \|\| undefined}\n readonlyDiscountAmount={this.getDiscountAmount()}\n readonlyCurrency={this.currency}\n />\n </div>\n </div>\n );\n };\n\n renderTotal = () => {\n return (\n <div class=\"total-row\">\n <div class=\"left\">{I18nService.translate('renewal.totalToRenew')}</div>\n <div class=\"right\">{formatAmount(this.totalAmount, this.currency)}</div>\n </div>\n );\n };\n\n renderDesktop = () => {\n return (\n <div class=\"wrapper\">\n {this.renderHeader()}\n <div class=\"info\">\n <div class=\"row\">\n <div class=\"\">{I18nService.translate('renewal.subscriptionDetails')}</div>\n </div>\n {this.renderProduct()}\n {this.renderNextRenewal()}\n {this.renderSubtotal()}\n {this.renderDiscount()}\n </div>\n\n {this.renderTotal()}\n </div>\n );\n };\n\n render() {\n if (\n this.displayedComponents.includes('header') &&\n this.displayedComponents.includes('details') &&\n this.displayedComponents.includes('summary')\n ) {\n return this.renderDesktop();\n }\n if (this.displayedComponents.includes('header')) {\n return this.renderHeader();\n }\n if (this.displayedComponents.includes('details')) {\n return (\n <collapsible-card header={I18nService.translate('summary.details')}>\n {this.renderProduct()}\n {this.renderNextRenewal()}\n </collapsible-card>\n );\n }\n if (this.displayedComponents.includes('summary')) {\n return (\n <collapsible-card header={I18nService.translate('summary.summary')}>\n {this.renderInfoRow(\n this.subscriptionTitle,\n '1 x ' + formatAmount(this.subTotalAmount, this.currency),\n )}\n {this.renderSubtotal()}\n {this.renderDiscount()}\n\n <rebill-divider />\n {this.renderInfoRow(\n I18nService.translate('renewal.totalToRenew'),\n formatAmount(this.totalAmount, this.currency),\n )}\n </collapsible-card>\n );\n }\n }\n}\n"],"version":3}
1	+ {"file":"p-D6CVLxdH.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18n","formatDateByLocale","sessionState"],"sources":["src/components/renewal/renewal-summary/renewal-summary.css?tag=renewal-summary","src/components/renewal/renewal-summary/renewal-summary.tsx"],"sourcesContent":[".wrapper {\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.header {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n}\n.title {\n font-size: 1rem;\n font-weight: 500;\n color: var(--rebill-color-primary-dark-text);\n text-align: center;\n}\n\n.amount {\n font-size: 2.25rem;\n font-weight: 500;\n color: var(--rebill-color-primary-dark-text);\n margin: 0 0 1.5rem 0;\n text-align: center;\n line-height: 1.1;\n}\n\n.per {\n font-size: 1.1rem;\n font-weight: 400;\n color: var(--rebill-color-text-secondary);\n}\n\n.label-muted {\n font-size: 1rem;\n color: var(--rebill-color-primary-dark);\n margin: 0 0 1.5rem 0;\n text-align: center;\n}\n\n.info {\n width: 100%;\n margin-top: 1.5rem;\n margin-bottom: 3rem;\n display: flex;\n flex-direction: column;\n gap: 1.4rem;\n}\n\n.row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 1rem;\n line-height: 1.4;\n width: 100%;\n}\n\n.left {\n color: var(--rebill-color-text-secondary);\n font-weight: 400;\n}\n\n.right {\n color: var(--rebill-color-primary-dark-text);\n font-weight: 400;\n text-align: right;\n}\n\n.divider {\n border: none;\n border-top: 1px solid var(--rebill-color-border);\n margin: 1rem 0;\n}\n\n@media (max-width: 1024px) {\n .amount {\n margin-bottom: 0;\n }\n .row {\n font-size: 0.9rem;\n }\n .row:not(:last-child) {\n margin-bottom: 0.5rem;\n }\n .left {\n color: var(--rebill-color-primary-dark-text);\n }\n}\n\n.total-row {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 1.1rem;\n font-weight: 600;\n}\n\n.total-row .left {\n color: var(--rebill-color-primary-dark-text);\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport i18n from '../../../i18n/i18n.config';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { sessionState } from '../../../store/session.store';\nimport { formatAmount } from '../../../utils/currency-formatter';\nimport { formatDate as formatDateByLocale } from '../../../utils/date-formatter';\n\n@Component({\n tag: 'renewal-summary',\n styleUrl: 'renewal-summary.css',\n shadow: false,\n})\nexport class RenewalSummary {\n @State() private forceUpdate = 0;\n @Prop() displayedComponents: ('header' \| 'details' \| 'summary')[] = [\n 'header',\n 'details',\n 'summary',\n ];\n @Prop() totalAmount!: number;\n @Prop() subTotalAmount!: number;\n @Prop() subscriptionTitle!: string;\n @Prop() subscriptionAmount!: number;\n @Prop() nextChargeDate?: string;\n @Prop() frequency?: { count: number; period: string };\n @Prop() currency: string;\n @Prop() couponCode?: string;\n @Prop() discountAmount?: number;\n @Prop() discountPercentage?: number;\n @Prop() titleKey: string = 'renewal.title';\n\n componentWillLoad() {\n i18n.on('languageChanged', this.handleLanguageChange);\n }\n\n disconnectedCallback() {\n i18n.off('languageChanged', this.handleLanguageChange);\n }\n\n private handleLanguageChange = () => {\n this.forceUpdate = this.forceUpdate + 1;\n };\n\n private getFrequencyText(): string {\n if (!this.frequency \|\| !this.frequency.period) return '';\n\n const period = this.frequency.period.toLowerCase();\n const count = this.frequency.count;\n\n const translationKey = `summary.${period}`;\n return I18nService.translate(translationKey, { count });\n }\n\n private getDiscountAmount(): number {\n if (this.totalAmount < this.subTotalAmount) {\n return this.subTotalAmount - this.totalAmount;\n }\n\n return this.discountAmount \|\| 0;\n }\n\n renderHeader = () => {\n return (\n <div class=\"header\">\n <p class=\"title\">{I18nService.translate(this.titleKey)}</p>\n <p class=\"amount\">\n <span class=\"total-amount\">{formatAmount(this.totalAmount, this.currency)}</span>{' '}\n <span class=\"per\">/ {this.getFrequencyText().toLowerCase()}</span>\n </p>\n </div>\n );\n };\n\n renderInfoRow = (label: string, value: string) => {\n return (\n <div class=\"row\">\n <div class=\"left\">{label}</div>\n <div class=\"right\">{value}</div>\n </div>\n );\n };\n\n renderProduct = () => {\n return this.renderInfoRow(\n this.subscriptionTitle,\n formatAmount(this.subTotalAmount, this.currency),\n );\n };\n\n renderNextRenewal = () => {\n return this.renderInfoRow(\n I18nService.translate('renewal.nextRenewal'),\n formatDateByLocale(this.nextChargeDate, undefined, sessionState.currentLocale),\n );\n };\n\n renderSubtotal = () => {\n return this.renderInfoRow(\n I18nService.translate('renewal.subtotal'),\n formatAmount(this.subTotalAmount, this.currency),\n );\n };\n\n private renderDiscount = () => {\n if (this.getDiscountAmount() <= 0) return null;\n return (\n <div class=\"row\">\n <div class=\"left\">{I18nService.translate('summary.discount')}</div>\n <div class=\"right discount-chip-wrapper\">\n <discount-coupon\n displayMode=\"readonly\"\n readonlyCouponCode={this.couponCode \|\| undefined}\n readonlyDiscountAmount={this.getDiscountAmount()}\n readonlyCurrency={this.currency}\n />\n </div>\n </div>\n );\n };\n\n renderTotal = () => {\n return (\n <div class=\"total-row\">\n <div class=\"left\">{I18nService.translate('renewal.totalToRenew')}</div>\n <div class=\"right\">{formatAmount(this.totalAmount, this.currency)}</div>\n </div>\n );\n };\n\n renderDesktop = () => {\n return (\n <div class=\"wrapper\">\n {this.renderHeader()}\n <div class=\"info\">\n <div class=\"row\">\n <div class=\"\">{I18nService.translate('renewal.subscriptionDetails')}</div>\n </div>\n {this.renderProduct()}\n {this.renderNextRenewal()}\n {this.renderSubtotal()}\n {this.renderDiscount()}\n </div>\n\n {this.renderTotal()}\n </div>\n );\n };\n\n render() {\n if (\n this.displayedComponents.includes('header') &&\n this.displayedComponents.includes('details') &&\n this.displayedComponents.includes('summary')\n ) {\n return this.renderDesktop();\n }\n if (this.displayedComponents.includes('header')) {\n return this.renderHeader();\n }\n if (this.displayedComponents.includes('details')) {\n return (\n <collapsible-card header={I18nService.translate('summary.details')}>\n {this.renderProduct()}\n {this.renderNextRenewal()}\n </collapsible-card>\n );\n }\n if (this.displayedComponents.includes('summary')) {\n return (\n <collapsible-card header={I18nService.translate('summary.summary')}>\n {this.renderInfoRow(\n this.subscriptionTitle,\n '1 x ' + formatAmount(this.subTotalAmount, this.currency),\n )}\n {this.renderSubtotal()}\n {this.renderDiscount()}\n\n <rebill-divider />\n {this.renderInfoRow(\n I18nService.translate('renewal.totalToRenew'),\n formatAmount(this.totalAmount, this.currency),\n )}\n </collapsible-card>\n );\n }\n }\n}\n"],"version":3}

package/dist/components/{p-CVq9IPp4.js → p-DPB4aAQa.js} RENAMED Viewed

@@ -19,9 +19,9 @@ const SinglePaymentMethod = /*@__PURE__*/ proxyCustomElement(class SinglePayment
     paymentMethodDetails;
     icons = [];
     render() {
-        return (h("div", { key: '5122e8aea614b933b61e8ea8442e8135af660464', class: "single-payment-method" }, h("div", { key: 'aaff46a008eb03149d754cbe9b023797075c438d', class: "payment-method" }, this.paymentMethod === PAYMENT_METHOD_ENUM.CARD && h("rebill-icon", { key: '88be17c0cf51dca791486ae34e54de4bf00ea30c', name: "card" }), this.paymentMethod === PAYMENT_METHOD_ENUM.CASH && (h("rebill-icon", { key: 'b1ada6c7b426f7a9c4818e2d7b741efe0188ae86', name: "cash" })), this.paymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER &&
-            this.currencyCountry === 'AR' && h("rebill-icon", { key: '8334e3117f6a1fc268ed9de18ec6026baefad83e', name: "qr-code" }), this.paymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER &&
-            this.currencyCountry !== 'AR' && h("rebill-icon", { key: '94e87d5eae6f576ab53940e20240e50f77bbad4c', name: "bank" }), h("rebill-typography", { key: 'd30d521f3028e08afd970dc4b9ee6c041877fd7d', variant: "body2-small", color: COLORS_ENUM.NEUTRALS_700, style: { display: 'flex', alignItems: 'center' } }, this.paymentMethod === PAYMENT_METHOD_ENUM.CARD
+        return (h("div", { key: '7d272962812338bd346b458abc8c01daafd6b6a0', class: "single-payment-method" }, h("div", { key: 'c8189b29ba5e5466994f9a426c971d255bd0af63', class: "payment-method" }, this.paymentMethod === PAYMENT_METHOD_ENUM.CARD && h("rebill-icon", { key: 'd158957213e375adccf8167341c21333da44f1fb', name: "card" }), this.paymentMethod === PAYMENT_METHOD_ENUM.CASH && (h("rebill-icon", { key: '8d4f791061649ef90dfc843f2f55f171331e42f1', name: "cash" })), this.paymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER &&
+            this.currencyCountry === 'AR' && h("rebill-icon", { key: '06592c686b79377560dcbd54322667eaf7258495', name: "qr-code" }), this.paymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER &&
+            this.currencyCountry !== 'AR' && h("rebill-icon", { key: '1a61ab4db46181482bf047d64dcc9ba961950ce0', name: "bank" }), h("rebill-typography", { key: '7c80a95e1f049ac31433a2036989ff3953be2bfa', variant: "body2-small", color: COLORS_ENUM.NEUTRALS_700, style: { display: 'flex', alignItems: 'center' } }, this.paymentMethod === PAYMENT_METHOD_ENUM.CARD
             ? I18nService.translate('paymentMethods.cardDescription')
             : this.paymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER &&
                 this.currencyCountry === 'AR'
@@ -31,7 +31,7 @@ const SinglePaymentMethod = /*@__PURE__*/ proxyCustomElement(class SinglePayment
                     ? getPaymentMethodDisplayName(PAYMENT_METHOD_ENUM.CASH, this.currencyCountry) ||
                         I18nService.translate('paymentMethods.cash')
                     : I18nService.translate(`paymentMethods.${this.paymentMethod}`))), (this.paymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER ||
-            this.paymentMethod === PAYMENT_METHOD_ENUM.CASH) && (h("div", { key: 'd835c4af0d97b582254d75555e0ca10f4d4b2aa9', class: "icon-container" }, this.icons.length > 0 ? (this.icons.map(iconName => h("rebill-icon", { name: iconName, key: iconName }))) : (h("rebill-icon", { name: "card" }))))));
+            this.paymentMethod === PAYMENT_METHOD_ENUM.CASH) && (h("div", { key: '3947082b76e3849c0383a973248de647f1b8b548', class: "icon-container" }, this.icons.length > 0 ? (this.icons.map(iconName => h("rebill-icon", { name: iconName, key: iconName }))) : (h("rebill-icon", { name: "card" }))))));
     }
     static get style() { return singlePaymentMethodCss; }
 }, [256, "single-payment-method", {
@@ -66,6 +66,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { SinglePaymentMethod as S, defineCustomElement as d };
-//# sourceMappingURL=p-CVq9IPp4.js.map
+//# sourceMappingURL=p-DPB4aAQa.js.map
-//# sourceMappingURL=p-CVq9IPp4.js.map
+//# sourceMappingURL=p-DPB4aAQa.js.map

package/dist/components/{p-CVq9IPp4.js.map → p-DPB4aAQa.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~CVq9IPp4~~.js","mappings":";;;;;;;AAAA,MAAM,sBAAsB,GAAG,wsBAAwsB;;MCY1tB,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;AACtB,IAAA,aAAa;AACb,IAAA,eAAe;AACf,IAAA,oBAAoB;IACpB,KAAK,GAAa,EAAE;IAC5B,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACxB,IAAI,CAAC,aAAa,KAAK,mBAAmB,CAAC,IAAI,IAAI,CAAa,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAG,CAAA,EAC9E,IAAI,CAAC,aAAa,KAAK,mBAAmB,CAAC,IAAI,KAC9C,CAAa,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,GAAG,CAC5B,EACA,IAAI,CAAC,aAAa,KAAK,mBAAmB,CAAC,aAAa;YACvD,IAAI,CAAC,eAAe,KAAK,IAAI,IAAI,CAAa,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAG,CAAA,EAChE,IAAI,CAAC,aAAa,KAAK,mBAAmB,CAAC,aAAa;YACvD,IAAI,CAAC,eAAe,KAAK,IAAI,IAAI,CAAa,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAG,CAAA,EAC9D,CAAA,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,WAAW,CAAC,YAAY,EAC/B,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,EAE/C,IAAI,CAAC,aAAa,KAAK,mBAAmB,CAAC;AAC1C,cAAE,WAAW,CAAC,SAAS,CAAC,gCAAgC;AACxD,cAAE,IAAI,CAAC,aAAa,KAAK,mBAAmB,CAAC,aAAa;gBACtD,IAAI,CAAC,eAAe,KAAK;AAC3B,kBAAE,WAAW,CAAC,SAAS,CAAC,iCAAiC;AACzD,kBAAE,IAAI,CAAC,aAAa,KAAK,mBAAmB,CAAC,IAAI;oBAC7C,IAAI,CAAC,eAAe,KAAK;sBACzB,2BAA2B,CAAC,mBAAmB,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC;AAC3E,wBAAA,WAAW,CAAC,SAAS,CAAC,qBAAqB;sBAC3C,WAAW,CAAC,SAAS,CAAC,CAAkB,eAAA,EAAA,IAAI,CAAC,aAAa,CAAA,CAAE,CAAC,CACnD,CAChB,EAEL,CAAC,IAAI,CAAC,aAAa,KAAK,mBAAmB,CAAC,aAAa;AACxD,YAAA,IAAI,CAAC,aAAa,KAAK,mBAAmB,CAAC,IAAI,MAC/C,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACxB,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IACpB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,IAAI,CAAA,CAAA,aAAA,EAAA,EAAa,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAA,CAAI,CAAC,KAE1E,CAAa,CAAA,aAAA,EAAA,EAAA,IAAI,EAAC,MAAM,EAAG,CAAA,CAC5B,CACG,CACP,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/singlePaymentMethod/single-payment-method.css?tag=single-payment-method","src/components/shared/singlePaymentMethod/singlePaymentMethod.tsx"],"sourcesContent":[".single-payment-method {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n height: 40px;\n width: 100%;\n border-radius: 8px;\n background-color: var(--rebill-color-background-right);\n padding: 2px 4px 2px 4px;\n box-sizing: border-box;\n}\n\n.payment-method {\n display: flex;\n align-items: center;\n gap: 8px;\n height: 100%;\n}\n\n.icon-container {\n height: 32px;\n display: flex;\n align-items: center;\n gap: 8px;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.icon-container rebill-icon {\n height: 32px;\n width: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2px 4px;\n box-sizing: border-box;\n}\n\n.payment-method rebill-icon {\n height: 32px;\n width: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: 2px 4px;\n box-sizing: border-box;\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { PAYMENT_METHOD_ENUM } from '../../../models/enums/payment-methods.enum';\nimport { PaymentMethodDetails } from '../../../store/session.store';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\nimport { getPaymentMethodDisplayName } from '../../../utils/get-payment-method-display-name';\n\n@Component({\n tag: 'single-payment-method',\n styleUrl: 'single-payment-method.css',\n shadow: false,\n})\nexport class SinglePaymentMethod {\n @Prop() paymentMethod: PAYMENT_METHOD_ENUM;\n @Prop() currencyCountry: string;\n @Prop() paymentMethodDetails: PaymentMethodDetails[];\n @Prop() icons: string[] = [];\n render() {\n return (\n <div class=\"single-payment-method\">\n <div class=\"payment-method\">\n {this.paymentMethod === PAYMENT_METHOD_ENUM.CARD && <rebill-icon name=\"card\" />}\n {this.paymentMethod === PAYMENT_METHOD_ENUM.CASH && (\n <rebill-icon name=\"cash\" />\n )}\n {this.paymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER &&\n this.currencyCountry === 'AR' && <rebill-icon name=\"qr-code\" />}\n {this.paymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER &&\n this.currencyCountry !== 'AR' && <rebill-icon name=\"bank\" />}\n <rebill-typography\n variant=\"body2-small\"\n color={COLORS_ENUM.NEUTRALS_700}\n style={{ display: 'flex', alignItems: 'center' }}\n >\n {this.paymentMethod === PAYMENT_METHOD_ENUM.CARD\n ? I18nService.translate('paymentMethods.cardDescription')\n : this.paymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER &&\n this.currencyCountry === 'AR'\n ? I18nService.translate('paymentMethods.bank_transfer_qr')\n : this.paymentMethod === PAYMENT_METHOD_ENUM.CASH &&\n this.currencyCountry === 'BR'\n ? getPaymentMethodDisplayName(PAYMENT_METHOD_ENUM.CASH, this.currencyCountry) \|\|\n I18nService.translate('paymentMethods.cash')\n : I18nService.translate(`paymentMethods.${this.paymentMethod}`)}\n </rebill-typography>\n </div>\n\n {(this.paymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER \|\|\n this.paymentMethod === PAYMENT_METHOD_ENUM.CASH) && (\n <div class=\"icon-container\">\n {this.icons.length > 0 ? (\n this.icons.map(iconName => <rebill-icon name={iconName} key={iconName} />)\n ) : (\n <rebill-icon name=\"card\" />\n )}\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-DPB4aAQa.js","mappings":";;;;;;;AAAA,MAAM,sBAAsB,GAAG,wsBAAwsB;;MCY1tB,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;AACtB,IAAA,aAAa;AACb,IAAA,eAAe;AACf,IAAA,oBAAoB;IACpB,KAAK,GAAa,EAAE;IAC5B,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACxB,IAAI,CAAC,aAAa,KAAK,mBAAmB,CAAC,IAAI,IAAI,CAAa,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAG,CAAA,EAC9E,IAAI,CAAC,aAAa,KAAK,mBAAmB,CAAC,IAAI,KAC9C,CAAa,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,GAAG,CAC5B,EACA,IAAI,CAAC,aAAa,KAAK,mBAAmB,CAAC,aAAa;YACvD,IAAI,CAAC,eAAe,KAAK,IAAI,IAAI,CAAa,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAG,CAAA,EAChE,IAAI,CAAC,aAAa,KAAK,mBAAmB,CAAC,aAAa;YACvD,IAAI,CAAC,eAAe,KAAK,IAAI,IAAI,CAAa,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAG,CAAA,EAC9D,CAAA,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,WAAW,CAAC,YAAY,EAC/B,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,EAE/C,IAAI,CAAC,aAAa,KAAK,mBAAmB,CAAC;AAC1C,cAAE,WAAW,CAAC,SAAS,CAAC,gCAAgC;AACxD,cAAE,IAAI,CAAC,aAAa,KAAK,mBAAmB,CAAC,aAAa;gBACtD,IAAI,CAAC,eAAe,KAAK;AAC3B,kBAAE,WAAW,CAAC,SAAS,CAAC,iCAAiC;AACzD,kBAAE,IAAI,CAAC,aAAa,KAAK,mBAAmB,CAAC,IAAI;oBAC7C,IAAI,CAAC,eAAe,KAAK;sBACzB,2BAA2B,CAAC,mBAAmB,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC;AAC3E,wBAAA,WAAW,CAAC,SAAS,CAAC,qBAAqB;sBAC3C,WAAW,CAAC,SAAS,CAAC,CAAkB,eAAA,EAAA,IAAI,CAAC,aAAa,CAAA,CAAE,CAAC,CACnD,CAChB,EAEL,CAAC,IAAI,CAAC,aAAa,KAAK,mBAAmB,CAAC,aAAa;AACxD,YAAA,IAAI,CAAC,aAAa,KAAK,mBAAmB,CAAC,IAAI,MAC/C,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACxB,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IACpB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,IAAI,CAAA,CAAA,aAAA,EAAA,EAAa,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAA,CAAI,CAAC,KAE1E,CAAa,CAAA,aAAA,EAAA,EAAA,IAAI,EAAC,MAAM,EAAG,CAAA,CAC5B,CACG,CACP,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/singlePaymentMethod/single-payment-method.css?tag=single-payment-method","src/components/shared/singlePaymentMethod/singlePaymentMethod.tsx"],"sourcesContent":[".single-payment-method {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n height: 40px;\n width: 100%;\n border-radius: 8px;\n background-color: var(--rebill-color-background-right);\n padding: 2px 4px 2px 4px;\n box-sizing: border-box;\n}\n\n.payment-method {\n display: flex;\n align-items: center;\n gap: 8px;\n height: 100%;\n}\n\n.icon-container {\n height: 32px;\n display: flex;\n align-items: center;\n gap: 8px;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.icon-container rebill-icon {\n height: 32px;\n width: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2px 4px;\n box-sizing: border-box;\n}\n\n.payment-method rebill-icon {\n height: 32px;\n width: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: 2px 4px;\n box-sizing: border-box;\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { PAYMENT_METHOD_ENUM } from '../../../models/enums/payment-methods.enum';\nimport { PaymentMethodDetails } from '../../../store/session.store';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\nimport { getPaymentMethodDisplayName } from '../../../utils/get-payment-method-display-name';\n\n@Component({\n tag: 'single-payment-method',\n styleUrl: 'single-payment-method.css',\n shadow: false,\n})\nexport class SinglePaymentMethod {\n @Prop() paymentMethod: PAYMENT_METHOD_ENUM;\n @Prop() currencyCountry: string;\n @Prop() paymentMethodDetails: PaymentMethodDetails[];\n @Prop() icons: string[] = [];\n render() {\n return (\n <div class=\"single-payment-method\">\n <div class=\"payment-method\">\n {this.paymentMethod === PAYMENT_METHOD_ENUM.CARD && <rebill-icon name=\"card\" />}\n {this.paymentMethod === PAYMENT_METHOD_ENUM.CASH && (\n <rebill-icon name=\"cash\" />\n )}\n {this.paymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER &&\n this.currencyCountry === 'AR' && <rebill-icon name=\"qr-code\" />}\n {this.paymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER &&\n this.currencyCountry !== 'AR' && <rebill-icon name=\"bank\" />}\n <rebill-typography\n variant=\"body2-small\"\n color={COLORS_ENUM.NEUTRALS_700}\n style={{ display: 'flex', alignItems: 'center' }}\n >\n {this.paymentMethod === PAYMENT_METHOD_ENUM.CARD\n ? I18nService.translate('paymentMethods.cardDescription')\n : this.paymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER &&\n this.currencyCountry === 'AR'\n ? I18nService.translate('paymentMethods.bank_transfer_qr')\n : this.paymentMethod === PAYMENT_METHOD_ENUM.CASH &&\n this.currencyCountry === 'BR'\n ? getPaymentMethodDisplayName(PAYMENT_METHOD_ENUM.CASH, this.currencyCountry) \|\|\n I18nService.translate('paymentMethods.cash')\n : I18nService.translate(`paymentMethods.${this.paymentMethod}`)}\n </rebill-typography>\n </div>\n\n {(this.paymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER \|\|\n this.paymentMethod === PAYMENT_METHOD_ENUM.CASH) && (\n <div class=\"icon-container\">\n {this.icons.length > 0 ? (\n this.icons.map(iconName => <rebill-icon name={iconName} key={iconName} />)\n ) : (\n <rebill-icon name=\"card\" />\n )}\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-DP1RHUGR.js → p-DWbH_VvT.js} RENAMED Viewed

@@ -292,18 +292,6 @@ function detectMissingDotInMultiPartDomain(domainPart) {
     }
     return null;
 }
-/**
- * Valida el formato básico del email completo
- * @param email - El email a validar
- * @returns true si el formato es válido, false en caso contrario
- */
-function validateEmailFormat(email) {
-    if (!email || email.trim() === '') {
-        return true;
-    }
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    return emailRegex.test(email);
-}
 /**
  * Genera sugerencias de email basadas en dominios comunes
  * @param emailValue - El valor actual del email que el usuario está escribiendo
@@ -393,7 +381,7 @@ function suggestEmailCorrection(emailValue) {
     return correctDomainTypos(localPart, domainPart);
 }
-const inputEmailCss = ".input-container{display:flex;flex-direction:column}.input-label{font-size:0.875rem;color:var(--rebill-color-text-primary);font-weight:500;margin-bottom:0.375rem}.input-label.disabled{cursor:not-allowed}.input-element{border-radius:var(--input-group-inner-border-radius, 8px);border:1.5px solid var(--rebill-color-border);padding:10px 14px;font-size:0.875rem;color:var(--rebill-color-text-primary);outline:none;transition:border-color 0.2s;background:var(--rebill-color-background);height:38.33px;box-sizing:border-box}.input-element.input-error{border-color:var(--rebill-color-error)}.input-element:disabled{background-color:var(--rebill-color-background);border-color:var(--rebill-color-disabled);color:var(--rebill-color-text-secondary);cursor:not-allowed;opacity:0.7}select.input-element{padding:10px 30px 10px 14px;appearance:none;cursor:pointer}select.input-element:disabled{cursor:not-allowed}.input-element:focus{border-color:var(--rebill-color-primary)}.input-element:disabled:focus{border-color:var(--rebill-color-disabled)}.input-element::placeholder{color:var(--rebill-color-text-secondary-light);font-size:0.875rem;opacity:1}.select-wrapper.disabled .select-icon{color:var(--rebill-color-disabled)}.error-message{color:var(--rebill-color-error);font-size:0.75rem;margin-top:0.375rem}@media screen and (max-width: 768px){.input-element{font-size:1rem}.input-element::placeholder{font-size:1rem}}.input-wrapper{position:relative;display:flex;align-items:center}.input-element{width:100%;box-sizing:border-box}.icon-left,.icon-right{position:absolute;display:flex;align-items:center;justify-content:center;top:50%;transform:translateY(-50%)}.icon-left{left:0.75rem;color:var(--rebill-color-text-secondary-light)}.icon-right{right:0.75rem;cursor:pointer;color:var(--rebill-color-text-secondary-light)}.input-element.input-error:focus{flex-direction:column;box-shadow:0 0 0 2px var(--rebill-color-error-light)}.input-wrapper.has-invalid-format .input-element{border-color:var(--rebill-color-error)}.input-wrapper.has-invalid-format .input-element:focus{box-shadow:0 0 0 2px var(--rebill-color-error-light)}.floating-label{position:relative}.floating-label .input-text__input-label{position:absolute;top:50%;left:0.75rem;transform:translateY(-50%);color:var(--rebill-color-text-secondary-light);transition:all 0.1s ease-in-out;pointer-events:none}.floating-label .input-element::placeholder{color:transparent}.floating-label .input-element:focus~.input-text__input-label,.floating-label .input-element:not(:placeholder-shown)~.input-text__input-label{top:0;font-size:0.62rem;color:var(--rebill-color-text-secondary);background-color:var(--rebill-color-background);padding:0 4px;left:0.75rem}.floating-label.has-left-icon .input-text__input-label{left:2.5rem}.input-element:disabled{color:var(--rebill-color-neutrals-500)}.input-wrapper:has(.input-element:disabled) .icon-left,.input-wrapper:has(.input-element:disabled) .icon-right{color:var(--rebill-color-text-secondary-light) !important}.email-suggestions-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;background-color:var(--rebill-color-background);border:1px solid var(--rebill-color-border);border-radius:0.375rem;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1),\n    0 2px 4px -1px rgba(0, 0, 0, 0.06);margin-top:0.25rem;max-height:200px;overflow-y:auto;animation:slideDown 0.15s ease-out;box-sizing:border-box;width:100%}.email-suggestions-header{padding:0.75rem;font-size:0.875rem;font-weight:400;color:var(--rebill-color-primary);border-bottom:1px solid var(--rebill-color-border);background-color:var(--rebill-color-background)}.email-suggestion-item{padding:0.75rem;font-size:0.875rem;color:var(--rebill-color-text-primary);cursor:pointer;transition:background-color 0.15s ease}.email-suggestion-item:last-child{border-bottom:none}.email-suggestion-item:hover,.email-suggestion-item.highlighted{background-color:var(--rebill-color-background-right)}@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.email-suggestions-dropdown::-webkit-scrollbar{width:6px}.email-suggestions-dropdown::-webkit-scrollbar-track{background:transparent}.email-suggestions-dropdown::-webkit-scrollbar-thumb{background-color:var(--rebill-color-border);border-radius:3px}.email-suggestions-dropdown::-webkit-scrollbar-thumb:hover{background-color:var(--rebill-color-text-secondary)}.email-correction-suggestion{display:flex;align-items:center;gap:8px;font-size:0.75rem;margin-top:0.375rem;line-height:1.4}.email-correction-icon{flex-shrink:0}.email-correction-text{color:var(--rebill-color-text-primary);flex:1}.email-correction-link{color:var(--rebill-color-link);text-decoration:underline;cursor:pointer;font-weight:500;transition:opacity 0.2s ease}.email-correction-link:hover{opacity:0.8}";
+const inputEmailCss = ".input-container{display:flex;flex-direction:column}.input-label{font-size:0.875rem;color:var(--rebill-color-text-primary);font-weight:500;margin-bottom:0.375rem}.input-label.disabled{cursor:not-allowed}.input-element{border-radius:var(--input-group-inner-border-radius, 8px);border:1.5px solid var(--rebill-color-border);padding:10px 14px;font-size:0.875rem;color:var(--rebill-color-text-primary);outline:none;transition:border-color 0.2s;background:var(--rebill-color-background);height:38.33px;box-sizing:border-box}.input-element.input-error{border-color:var(--rebill-color-error)}.input-element:disabled{background-color:var(--rebill-color-background);border-color:var(--rebill-color-disabled);color:var(--rebill-color-text-secondary);cursor:not-allowed;opacity:0.7}select.input-element{padding:10px 30px 10px 14px;appearance:none;cursor:pointer}select.input-element:disabled{cursor:not-allowed}.input-element:focus{border-color:var(--rebill-color-primary)}.input-element:disabled:focus{border-color:var(--rebill-color-disabled)}.input-element::placeholder{color:var(--rebill-color-text-secondary-light);font-size:0.875rem;opacity:1}.select-wrapper.disabled .select-icon{color:var(--rebill-color-disabled)}.error-message{color:var(--rebill-color-error);font-size:0.75rem;margin-top:0.375rem}@media screen and (max-width: 768px){.input-element{font-size:1rem}.input-element::placeholder{font-size:1rem}}.input-wrapper{position:relative;display:flex;align-items:center}.input-element{width:100%;box-sizing:border-box}.icon-left,.icon-right{position:absolute;display:flex;align-items:center;justify-content:center;top:50%;transform:translateY(-50%)}.icon-left{left:0.75rem;color:var(--rebill-color-text-secondary-light)}.icon-right{right:0.75rem;cursor:pointer;color:var(--rebill-color-text-secondary-light)}.input-element.input-error:focus{flex-direction:column;box-shadow:0 0 0 2px var(--rebill-color-error-light)}.floating-label{position:relative}.floating-label .input-text__input-label{position:absolute;top:50%;left:0.75rem;transform:translateY(-50%);color:var(--rebill-color-text-secondary-light);transition:all 0.1s ease-in-out;pointer-events:none}.floating-label .input-element::placeholder{color:transparent}.floating-label .input-element:focus~.input-text__input-label,.floating-label .input-element:not(:placeholder-shown)~.input-text__input-label{top:0;font-size:0.62rem;color:var(--rebill-color-text-secondary);background-color:var(--rebill-color-background);padding:0 4px;left:0.75rem}.floating-label.has-left-icon .input-text__input-label{left:2.5rem}.input-element:disabled{color:var(--rebill-color-neutrals-500)}.input-wrapper:has(.input-element:disabled) .icon-left,.input-wrapper:has(.input-element:disabled) .icon-right{color:var(--rebill-color-text-secondary-light) !important}.email-suggestions-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;background-color:var(--rebill-color-background);border:1px solid var(--rebill-color-border);border-radius:0.375rem;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1),\n    0 2px 4px -1px rgba(0, 0, 0, 0.06);margin-top:0.25rem;max-height:200px;overflow-y:auto;animation:slideDown 0.15s ease-out;box-sizing:border-box;width:100%}.email-suggestions-dropdown.dropdown-up{top:auto;bottom:100%;margin-top:0;margin-bottom:0.25rem;animation:slideUp 0.15s ease-out}.email-suggestions-header{padding:0.75rem;font-size:0.875rem;font-weight:400;color:var(--rebill-color-primary);border-bottom:1px solid var(--rebill-color-border);background-color:var(--rebill-color-background)}.email-suggestion-item{padding:0.75rem;font-size:0.875rem;color:var(--rebill-color-text-primary);cursor:pointer;transition:background-color 0.15s ease}.email-suggestion-item:last-child{border-bottom:none}.email-suggestion-item:hover,.email-suggestion-item.highlighted{background-color:var(--rebill-color-background-right)}@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.email-suggestions-dropdown::-webkit-scrollbar{width:6px}.email-suggestions-dropdown::-webkit-scrollbar-track{background:transparent}.email-suggestions-dropdown::-webkit-scrollbar-thumb{background-color:var(--rebill-color-border);border-radius:3px}.email-suggestions-dropdown::-webkit-scrollbar-thumb:hover{background-color:var(--rebill-color-text-secondary)}.email-correction-suggestion{display:flex;align-items:center;gap:8px;font-size:0.75rem;margin-top:0.375rem;line-height:1.4}.email-correction-icon{flex-shrink:0}.email-correction-text{color:var(--rebill-color-text-primary);flex:1}.email-correction-link{color:var(--rebill-color-link);text-decoration:underline;cursor:pointer;font-weight:500;transition:opacity 0.2s ease}.email-correction-link:hover{opacity:0.8}";
 const InputEmail = /*@__PURE__*/ proxyCustomElement(class InputEmail extends H {
     constructor(registerHost) {
@@ -407,11 +395,7 @@ const InputEmail = /*@__PURE__*/ proxyCustomElement(class InputEmail extends H {
     get el() { return this; }
     inputElement;
     suggestionsDropdownRef;
-    isMouseOverSuggestions = false;
     blurTimeout;
-    // Constants
-    INPUT_PADDING_WITH_ICON = '2.5rem';
-    INPUT_PADDING_DEFAULT = '0.75rem';
     /** Etiqueta que se muestra arriba del input */
     label = '';
     /** Placeholder del input */
@@ -440,10 +424,8 @@ const InputEmail = /*@__PURE__*/ proxyCustomElement(class InputEmail extends H {
     highlightedSuggestionIndex = -1;
     /** Sugerencia de corrección de email (para errores tipográficos) */
     emailCorrectionSuggestion = null;
-    /** Indica si el formato del email es válido */
-    isValidFormat = true;
-    /** Indica si el usuario ya salió del campo (blur) */
-    hasBlurred = false;
+    /** Posición del dropdown (arriba o abajo) */
+    dropdownPosition = 'down';
     handleFormChange(event) {
         const formData = event.detail;
         if (formData && this.id in formData) {
@@ -453,8 +435,17 @@ const InputEmail = /*@__PURE__*/ proxyCustomElement(class InputEmail extends H {
     handleDocumentClick(event) {
         if (this.suggestionsDropdownRef &&
             !this.suggestionsDropdownRef.contains(event.target) &&
-            !this.inputElement?.contains(event.target) &&
-            !this.isMouseOverSuggestions) {
+            !this.inputElement?.contains(event.target)) {
+            this.emailSuggestions = [];
+            this.highlightedSuggestionIndex = -1;
+        }
+    }
+    handleDocumentTouchEnd(event) {
+        const target = event.changedTouches?.[0]?.target;
+        if (this.suggestionsDropdownRef &&
+            target &&
+            !this.suggestionsDropdownRef.contains(target) &&
+            !this.inputElement?.contains(target)) {
             this.emailSuggestions = [];
             this.highlightedSuggestionIndex = -1;
         }
@@ -468,6 +459,24 @@ const InputEmail = /*@__PURE__*/ proxyCustomElement(class InputEmail extends H {
     checkForTypo(emailValue) {
         this.emailCorrectionSuggestion = suggestEmailCorrection(emailValue);
     }
+    /**
+     * Calcula si el dropdown debe posicionarse arriba o abajo según el espacio disponible
+     */
+    calculateDropdownPosition() {
+        if (!this.inputElement || !this.suggestionsDropdownRef)
+            return;
+        const inputRect = this.inputElement.getBoundingClientRect();
+        const dropdownHeight = this.suggestionsDropdownRef.offsetHeight || 200; // max-height del CSS
+        const spaceBelow = window.innerHeight - inputRect.bottom;
+        const spaceAbove = inputRect.top;
+        // Si no hay espacio abajo pero sí arriba, posicionar arriba
+        if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
+            this.dropdownPosition = 'up';
+        }
+        else {
+            this.dropdownPosition = 'down';
+        }
+    }
     // ============================================================================
     // INPUT EVENT HANDLERS
     // ============================================================================
@@ -475,15 +484,15 @@ const InputEmail = /*@__PURE__*/ proxyCustomElement(class InputEmail extends H {
         return value.toLowerCase();
     }
     updateEmailState(inputValue) {
-        this.isValidFormat = validateEmailFormat(inputValue);
         this.emailSuggestions = getEmailSuggestions(inputValue);
         this.highlightedSuggestionIndex = -1;
         // Limpiar sugerencia de corrección al modificar el input
         this.emailCorrectionSuggestion = null;
         this.value = inputValue;
-    }
-    emitInputEvent(value) {
-        this.input.emit({ id: this.id, value });
+        // Calcular posición del dropdown después de actualizar sugerencias
+        if (this.emailSuggestions.length > 0) {
+            setTimeout(() => this.calculateDropdownPosition(), 0);
+        }
     }
     onInput = (event) => {
         if (this.disabled)
@@ -492,14 +501,12 @@ const InputEmail = /*@__PURE__*/ proxyCustomElement(class InputEmail extends H {
         const inputValue = this.normalizeEmailInput(input.value);
         input.value = inputValue;
         this.updateEmailState(inputValue);
-        this.emitInputEvent(inputValue);
+        this.input.emit({ id: this.id, value: inputValue });
     };
     resetValidationState() {
-        this.isValidFormat = true;
         this.emailSuggestions = [];
         this.highlightedSuggestionIndex = -1;
         this.emailCorrectionSuggestion = null;
-        this.hasBlurred = false;
     }
     onClear = () => {
         if (this.disabled)
@@ -525,11 +532,11 @@ const InputEmail = /*@__PURE__*/ proxyCustomElement(class InputEmail extends H {
             clearTimeout(this.blurTimeout);
         }
         this.blurTimeout = window.setTimeout(() => {
-            if (!this.isMouseOverSuggestions) {
-                this.hasBlurred = true;
+            // Verificar si el elemento activo está dentro del dropdown o es el input
+            const activeElement = document.activeElement;
+            const isClickingSuggestion = this.suggestionsDropdownRef?.contains(activeElement) || activeElement === this.inputElement;
+            if (!isClickingSuggestion) {
                 this.trimAndUpdateValue();
-                // Revalidar formato después del trim
-                this.isValidFormat = validateEmailFormat(this.value);
                 this.clearSuggestions();
                 // Verificar errores tipográficos solo cuando sale del campo
                 this.checkForTypo(this.value);
@@ -540,43 +547,38 @@ const InputEmail = /*@__PURE__*/ proxyCustomElement(class InputEmail extends H {
     onFocus = () => {
         if (this.value) {
             this.emailSuggestions = getEmailSuggestions(this.value);
+            // Calcular posición después de que se rendericen las sugerencias
+            setTimeout(() => this.calculateDropdownPosition(), 0);
         }
     };
     // ============================================================================
     // SUGGESTION INTERACTION HANDLERS
     // ============================================================================
-    moveHighlightDown() {
-        this.highlightedSuggestionIndex = Math.min(this.highlightedSuggestionIndex + 1, this.emailSuggestions.length - 1);
-    }
-    moveHighlightUp() {
-        this.highlightedSuggestionIndex = Math.max(this.highlightedSuggestionIndex - 1, -1);
-    }
-    selectHighlightedSuggestion() {
-        if (this.highlightedSuggestionIndex >= 0) {
-            this.selectSuggestion(this.emailSuggestions[this.highlightedSuggestionIndex]);
-        }
-    }
-    closeSuggestions() {
-        this.emailSuggestions = [];
-        this.highlightedSuggestionIndex = -1;
-    }
     onKeyDown = (event) => {
         if (this.emailSuggestions.length === 0) {
             return;
         }
-        const keyHandlers = {
-            ArrowDown: () => this.moveHighlightDown(),
-            ArrowUp: () => this.moveHighlightUp(),
-            Escape: () => this.closeSuggestions(),
-        };
-        const handler = keyHandlers[event.key];
-        if (handler) {
-            event.preventDefault();
-            handler();
-        }
-        else if (event.key === 'Enter' && this.highlightedSuggestionIndex >= 0) {
-            event.preventDefault();
-            this.selectHighlightedSuggestion();
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.highlightedSuggestionIndex = Math.min(this.highlightedSuggestionIndex + 1, this.emailSuggestions.length - 1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.highlightedSuggestionIndex = Math.max(this.highlightedSuggestionIndex - 1, -1);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.emailSuggestions = [];
+                this.highlightedSuggestionIndex = -1;
+                break;
+            case 'Enter':
+                if (this.highlightedSuggestionIndex >= 0 &&
+                    this.highlightedSuggestionIndex < this.emailSuggestions.length) {
+                    event.preventDefault();
+                    this.selectSuggestion(this.emailSuggestions[this.highlightedSuggestionIndex]);
+                }
+                break;
         }
     };
     selectSuggestion = (suggestion) => {
@@ -598,11 +600,10 @@ const InputEmail = /*@__PURE__*/ proxyCustomElement(class InputEmail extends H {
     handleSuggestionMouseEnter = (index) => {
         this.highlightedSuggestionIndex = index;
     };
-    handleSuggestionsMouseEnter = () => {
-        this.isMouseOverSuggestions = true;
-    };
-    handleSuggestionsMouseLeave = () => {
-        this.isMouseOverSuggestions = false;
+    handleSuggestionTouchEnd = (suggestion, event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        this.selectSuggestion(suggestion);
     };
     // ============================================================================
     // PUBLIC METHODS
@@ -618,18 +619,6 @@ const InputEmail = /*@__PURE__*/ proxyCustomElement(class InputEmail extends H {
     // ============================================================================
     // RENDER HELPERS
     // ============================================================================
-    getInputPaddingStyles() {
-        return {
-            paddingLeft: this.leftIcon ? this.INPUT_PADDING_WITH_ICON : this.INPUT_PADDING_DEFAULT,
-            paddingRight: this.clearable ? this.INPUT_PADDING_WITH_ICON : this.INPUT_PADDING_DEFAULT,
-        };
-    }
-    shouldShowInvalidFormat() {
-        return !this.isValidFormat && this.value && !this.error && this.hasBlurred;
-    }
-    shouldShowInvalidFormatError() {
-        return !this.isValidFormat && this.value && !this.error && this.hasBlurred;
-    }
     renderEmailCorrectionSuggestion() {
         if (!this.emailCorrectionSuggestion)
             return null;
@@ -651,11 +640,16 @@ const InputEmail = /*@__PURE__*/ proxyCustomElement(class InputEmail extends H {
             'floating-label': isFloating,
             'has-left-icon': !!this.leftIcon,
             'has-email-suggestions': showEmailSuggestions,
-            'has-invalid-format': this.shouldShowInvalidFormat(),
         };
-        return (h("div", { key: '5e40ed1a07b4d6c4b8aa7d4296613d4972a9f53c', class: "input-container" }, !isFloating && this.label && (h("label", { key: 'c9495052e17b8a3809b27eca34d0d13b6e2d4659', class: `input-label ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '27464568b4aa841a1563bc251ec278316e5b98f2', class: wrapperClasses }, this.leftIcon && (h("div", { key: '0087a2c77deb8a5b5e47fb89ed07130a98775056', class: "icon-left" }, h("rebill-icon", { key: '53422720b4914238bdf07ef6e2366c6b687fb18f', name: this.leftIcon }))), h("input", { key: 'ec35a711e007049c0d83efc4f81a83bc593f7808', ref: el => (this.inputElement = el), type: "email", class: inputClasses, placeholder: isFloating ? this.label : this.placeholder, value: this.value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, disabled: this.disabled, autocomplete: "email", autocapitalize: "none", autocorrect: "off", spellcheck: "false", "aria-autocomplete": "list", "aria-expanded": showEmailSuggestions ? 'true' : 'false', "aria-haspopup": "listbox", "aria-owns": showEmailSuggestions ? 'email-suggestions' : undefined, "aria-invalid": !this.isValidFormat && this.value && this.hasBlurred ? 'true' : 'false', "aria-describedby": this.error || (!this.isValidFormat && this.value && this.hasBlurred)
-                ? `${this.id}-error`
-                : undefined, style: this.getInputPaddingStyles() }), isFloating && h("label", { key: 'd6c0532aaa21de0fa4f02670b1e13f848ea10663', class: "input-text__input-label input-label" }, this.label), this.clearable && this.value && (h("div", { key: '9d005dae6956ccc5210edec04d591e05c8e7badd', class: "icon-right", onClick: this.onClear }, h("rebill-icon", { key: 'ab11a4670e21d4da92aadaff27d63bf4f4b33a71', name: "x" }))), showEmailSuggestions && (h("div", { key: 'ed65d951fc245455cf6b2cd6b3e31f20ed7af55b', id: "email-suggestions", ref: el => (this.suggestionsDropdownRef = el), class: "email-suggestions-dropdown", role: "listbox", "aria-label": I18nService.translate('userInformation.suggestionsLabel', 'Email suggestions'), onMouseEnter: this.handleSuggestionsMouseEnter, onMouseLeave: this.handleSuggestionsMouseLeave }, h("div", { key: '2229c646e008d7d06e8367557f51242353eb1262', class: "email-suggestions-header" }, I18nService.translate('userInformation.suggestionsHeader', 'Suggestion')), this.emailSuggestions.map((suggestion, index) => (h("div", { key: suggestion, role: "option", "aria-selected": this.highlightedSuggestionIndex === index ? 'true' : 'false', class: `email-suggestion-item ${this.highlightedSuggestionIndex === index ? 'highlighted' : ''}`, onClick: () => this.selectSuggestion(suggestion), onMouseEnter: () => this.handleSuggestionMouseEnter(index) }, suggestion)))))), this.error && (h("span", { key: 'e52aa1a0bb4a601956736ae5560d2e1185504587', id: `${this.id}-error`, class: "error-message", role: "alert" }, this.error)), this.shouldShowInvalidFormatError() && (h("span", { key: '2335067645f44850b24459788a818062a1eb368a', id: `${this.id}-error`, class: "error-message", role: "alert" }, I18nService.translate('paymentErrors.emailInvalid', 'The email address is not valid'))), this.renderEmailCorrectionSuggestion()));
+        return (h("div", { key: '666b8971fd42b59ea3beaf4ded1a59e06845f837', class: "input-container" }, !isFloating && this.label && (h("label", { key: '0f0e777f7b3c256b42c9dec1e0f0ab1c50bc0013', class: `input-label ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'e506b42d62d357aa3f71c4b0435ab2d08f145f53', class: wrapperClasses }, this.leftIcon && (h("div", { key: '84c0f9dad6724a5192494e082b126cbd66c47436', class: "icon-left" }, h("rebill-icon", { key: 'a02a67a6f03b06b2b331670e8caded3b26b4c327', name: this.leftIcon }))), h("input", { key: 'c444b2daedd46fafdec07df2e79e01be454ef58c', ref: el => (this.inputElement = el), type: "email", class: inputClasses, placeholder: isFloating ? this.label : this.placeholder, value: this.value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, disabled: this.disabled, autocomplete: "email", autocapitalize: "none", autocorrect: "off", spellcheck: "false", "aria-autocomplete": "list", "aria-expanded": showEmailSuggestions ? 'true' : 'false', "aria-haspopup": "listbox", "aria-owns": showEmailSuggestions ? 'email-suggestions' : undefined, "aria-invalid": !!this.error ? 'true' : 'false', "aria-describedby": this.error ? `${this.id}-error` : undefined, style: {
+                paddingLeft: this.leftIcon ? '2.5rem' : '0.75rem',
+                paddingRight: this.clearable && this.value ? '2.5rem' : '0.75rem',
+            } }), isFloating && h("label", { key: 'ae7e8e67032665f90a2b24b136dfc2124073d24a', class: "input-text__input-label input-label" }, this.label), this.clearable && this.value && (h("div", { key: 'cb4ff25b6d53cb1c0fdd568f8896463980e10234', class: "icon-right", onClick: this.onClear }, h("rebill-icon", { key: 'bd7b1aa188127120065e06e02f79bdf6f4a2eb0c', name: "x" }))), showEmailSuggestions && (h("div", { key: 'd75a859066fcf750b34d4c479631aada67278925', id: "email-suggestions", ref: el => {
+                this.suggestionsDropdownRef = el;
+                if (el) {
+                    setTimeout(() => this.calculateDropdownPosition(), 0);
+                }
+            }, class: `email-suggestions-dropdown ${this.dropdownPosition === 'up' ? 'dropdown-up' : ''}`, role: "listbox", "aria-label": I18nService.translate('userInformation.suggestionsLabel', 'Email suggestions') }, h("div", { key: '0c8cfa0656426b99cbce234cc7afb073aec36f2c', class: "email-suggestions-header" }, I18nService.translate('userInformation.suggestionsHeader', 'Suggestion')), this.emailSuggestions.map((suggestion, index) => (h("div", { key: suggestion, role: "option", "aria-selected": this.highlightedSuggestionIndex === index ? 'true' : 'false', class: `email-suggestion-item ${this.highlightedSuggestionIndex === index ? 'highlighted' : ''}`, onClick: () => this.selectSuggestion(suggestion), onTouchEnd: e => this.handleSuggestionTouchEnd(suggestion, e), onMouseEnter: () => this.handleSuggestionMouseEnter(index) }, suggestion)))))), this.error && (h("span", { key: '57058ce993cfe690470cb002cdc3e3939d120fe0', id: `${this.id}-error`, class: "error-message", role: "alert" }, this.error)), this.renderEmailCorrectionSuggestion()));
     }
     static get style() { return inputEmailCss; }
 }, [256, "rebill-input-email", {
@@ -671,10 +665,9 @@ const InputEmail = /*@__PURE__*/ proxyCustomElement(class InputEmail extends H {
         "emailSuggestions": [32],
         "highlightedSuggestionIndex": [32],
         "emailCorrectionSuggestion": [32],
-        "isValidFormat": [32],
-        "hasBlurred": [32],
+        "dropdownPosition": [32],
         "getInputElement": [64]
-    }, [[4, "change", "handleFormChange"], [4, "click", "handleDocumentClick"]]]);
+    }, [[4, "change", "handleFormChange"], [4, "click", "handleDocumentClick"], [5, "touchend", "handleDocumentTouchEnd"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
@@ -696,6 +689,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { InputEmail as I, defineCustomElement as d };
-//# sourceMappingURL=p-DP1RHUGR.js.map
+//# sourceMappingURL=p-DWbH_VvT.js.map
-//# sourceMappingURL=p-DP1RHUGR.js.map
+//# sourceMappingURL=p-DWbH_VvT.js.map