rebill-web-components-sdk 1.8.33 → 1.8.34-beta.0

package/dist/components/{p-dtookouT.js → p-nvpvagPB.js}

@@ -2,9 +2,9 @@ import { proxyCustomElement, H, createEvent, h, Host } from './p-8BpuJ_V5.js';
 import { a as api } from './p-Dh-yfb0D.js';
 import { I as I18nService, a as SessionStore, s as state } from './p-CMzpQU2o.js';
 import { d as defineCustomElement$5 } from './p-DvWdkIUq.js';
-import { d as defineCustomElement$4 } from './p-BmjU_TBT.js';
+import { d as defineCustomElement$4 } from './p-QTa3HvQl.js';
 import { d as defineCustomElement$3 } from './p-CWY-g0zG.js';
-import { d as defineCustomElement$2 } from './p-Di8WeTd9.js';
+import { d as defineCustomElement$2 } from './p-CuX2faVH.js';
 import { d as defineCustomElement$1 } from './p-C_txMekS.js';
 
 const userInformationCss = ":host{display:block}.inputs-container{display:flex;flex-direction:column;gap:16px;width:100%}.customer-exists{display:flex;justify-content:flex-end;margin-bottom:16px}";
@@ -91,15 +91,15 @@ const UserInformation = /*@__PURE__*/ proxyCustomElement(class UserInformation e
             } }, inputs)) : null;
     }
     render() {
-        const customerExistsButton = (h("div", { key: '04ed326d91a904cf1147270b4f6a613e1f010324', class: "customer-exists" }, h("rebill-button", { key: 'ad838f2f5ef47759d4a143813981c88f929462e6', style: {
+        const customerExistsButton = (h("div", { key: 'd8dc2e7c9eb4eda6f95ccd4d5472c068730cdfd5', class: "customer-exists" }, h("rebill-button", { key: '1b7ae09782e0fcbcb98f2fb6f140b5a9113092c7', style: {
                 visibility: this.customerExists ? 'visible' : 'hidden',
                 opacity: this.customerExists ? '1' : '0',
                 transition: 'opacity 0.3s ease-in-out',
-            }, variant: "text", size: "small", onClick: () => this.handleRebillAccountClick(), icon: "lock" }, I18nService.translate('userInformation.rebillAccount'), h("rebill-icon", { key: '9a123da3f51e87597f6508a214e111fdea5a9bca', name: "arrow-right" }))));
+            }, variant: "text", size: "small", onClick: () => this.handleRebillAccountClick(), icon: "lock" }, I18nService.translate('userInformation.rebillAccount'), h("rebill-icon", { key: '697b2e05137658b4f427bce9533d2506ce5ee87f', name: "arrow-right" }))));
         const hasPrefilledEmail = state.data.prefilledData.email;
         const hasPrefilledName = state.data.prefilledData.fullName;
         const hasAnyPrefilled = hasPrefilledEmail || hasPrefilledName;
-        return (h(Host, { key: '696af08bf88e367acb57e2577a5036ebfd0b29b2' }, customerExistsButton, hasAnyPrefilled && (h("rebill-card", { key: '292fb5bf3d22274530e6844035f3fb58a5f2ee0d', cardTitle: I18nService.translate('userInformation.personalInformation'), cardLabels: this.getCardLabels() })), this.renderInputs()));
+        return (h(Host, { key: '94cb7e47341a7bd014a69b172e9cf807349d4a59' }, customerExistsButton, hasAnyPrefilled && (h("rebill-card", { key: 'd69d87bbd3733b0be65251b2eaf8f974933ebf1b', cardTitle: I18nService.translate('userInformation.personalInformation'), cardLabels: this.getCardLabels() })), this.renderInputs()));
     }
     static get style() { return userInformationCss; }
 }, [256, "user-information", {
@@ -149,6 +149,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { UserInformation as U, defineCustomElement as d };
-//# sourceMappingURL=p-dtookouT.js.map
+//# sourceMappingURL=p-nvpvagPB.js.map
 
-//# sourceMappingURL=p-dtookouT.js.map
+//# sourceMappingURL=p-nvpvagPB.js.map

package/dist/components/{p-dtookouT.js.map → p-nvpvagPB.js.map}

@@ -1 +1 @@
-{"file":"p-dtookouT.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","sessionState"],"sources":["src/components/checkout/user-information/user-information.css?tag=user-information","src/components/checkout/user-information/user-information.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.inputs-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n}\n.customer-exists {\n  display: flex;\n  justify-content: flex-end;\n  margin-bottom: 16px;\n}\n","import { Component, Event, EventEmitter, h, Host, Listen, Prop } from '@stencil/core';\nimport { api } from '../../../api';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { sessionState, SessionStore } from '../../../store/session.store';\n\n@Component({\n  tag: 'user-information',\n  styleUrl: 'user-information.css',\n  shadow: false,\n})\nexport class UserInformation {\n  @Prop() userInformation: {\n    email?: string;\n    fullName?: string;\n    countryCode?: string;\n    phoneNumber?: {\n      number: string;\n      countryCode: string;\n    };\n  } = {\n    email: '',\n    fullName: '',\n    countryCode: '',\n  };\n\n  @Prop() errors: {\n    email?: string;\n    fullName?: string;\n  } | null = null;\n\n  @Prop() customerExists: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Event() onRebillAccountClick: EventEmitter<boolean>;\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  @Listen('input')\n  handleInputChange(event: CustomEvent<{ id: string; value: string }>) {\n    if (!event.detail) return;\n\n    const { id, value } = event.detail;\n    SessionStore.setUserInformation({ [id]: value });\n  }\n\n  @Listen('blur')\n  handleBlur(event: CustomEvent<{ id: string; value: string }>) {\n    if (!event.detail) return;\n\n    const { id, value } = event.detail;\n    SessionStore.setUserInformation({ [id]: value });\n  }\n\n  private getCardLabels() {\n    const labels = [];\n\n    if (sessionState.data.prefilledData.email) {\n      labels.push({\n        label: I18nService.translate('userInformation.emailPlaceholder'),\n        value: sessionState.data.prefilledData.email,\n      });\n      SessionStore.setUserInformation({\n        ...sessionState.data.userInformation,\n        email: sessionState.data.prefilledData.email,\n      });\n    }\n\n    if (sessionState.data.prefilledData.fullName) {\n      labels.push({\n        label: I18nService.translate('userInformation.fullNamePlaceholder'),\n        value: sessionState.data.prefilledData.fullName,\n      });\n      SessionStore.setUserInformation({\n        ...sessionState.data.userInformation,\n        fullName: sessionState.data.prefilledData.fullName,\n      });\n    }\n\n    return labels;\n  }\n  private async handleRebillAccountClick() {\n    api.otp.generate(sessionState.data.sessionId, {\n      email: sessionState.data.userInformation.email,\n    });\n    this.onRebillAccountClick.emit(true);\n  }\n\n  private renderInputs() {\n    const hasPrefilledEmail = sessionState.data.prefilledData.email;\n    const hasPrefilledName = sessionState.data.prefilledData.fullName;\n\n    const inputs = [];\n\n    if (!hasPrefilledEmail) {\n      inputs.push(\n        <rebill-input-text\n          id=\"email\"\n          variant=\"floating\"\n          label={I18nService.translate('userInformation.emailPlaceholder')}\n          placeholder={I18nService.translate('userInformation.emailPlaceholder')}\n          left-icon=\"email\"\n          clearable={true}\n          disabled={this.disabled}\n          error={this.translateError(this.errors?.email)}\n        />,\n      );\n    }\n\n    if (!hasPrefilledName) {\n      inputs.push(\n        <rebill-input-text\n          id=\"fullName\"\n          variant=\"floating\"\n          label={I18nService.translate('userInformation.fullNamePlaceholder')}\n          placeholder={I18nService.translate('userInformation.fullNamePlaceholder')}\n          disabled={this.disabled}\n          error={this.translateError(this.errors?.fullName)}\n        />,\n      );\n    }\n\n    return inputs.length > 0 ? (\n      <div\n        class=\"inputs-container\"\n        style={{\n          marginTop: inputs.length > 0 && (hasPrefilledEmail || hasPrefilledName) ? '1rem' : '0',\n        }}\n      >\n        {inputs}\n      </div>\n    ) : null;\n  }\n\n  render() {\n    const customerExistsButton = (\n      <div class=\"customer-exists\">\n        <rebill-button\n          style={{\n            visibility: this.customerExists ? 'visible' : 'hidden',\n            opacity: this.customerExists ? '1' : '0',\n            transition: 'opacity 0.3s ease-in-out',\n          }}\n          variant=\"text\"\n          size=\"small\"\n          onClick={() => this.handleRebillAccountClick()}\n          icon=\"lock\"\n        >\n          {I18nService.translate('userInformation.rebillAccount')}\n          <rebill-icon name=\"arrow-right\" />\n        </rebill-button>\n      </div>\n    );\n\n    const hasPrefilledEmail = sessionState.data.prefilledData.email;\n    const hasPrefilledName = sessionState.data.prefilledData.fullName;\n    const hasAnyPrefilled = hasPrefilledEmail || hasPrefilledName;\n\n    return (\n      <Host>\n        {customerExistsButton}\n        {hasAnyPrefilled && (\n          <rebill-card\n            cardTitle={I18nService.translate('userInformation.personalInformation')}\n            cardLabels={this.getCardLabels()}\n          />\n        )}\n        {this.renderInputs()}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-nvpvagPB.js","mappings":";;;;;;;;;AAAA,MAAM,kBAAkB,GAAG,yKAAyK;;MCUvL,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;;;;;;;;AAClB,IAAA,eAAe,GAQnB;AACF,QAAA,KAAK,EAAE,EAAE;AACT,QAAA,QAAQ,EAAE,EAAE;AACZ,QAAA,WAAW,EAAE,EAAE;KAChB;IAEO,MAAM,GAGH,IAAI;IAEP,cAAc,GAAY,KAAK;IAC/B,QAAQ,GAAY,KAAK;AACxB,IAAA,oBAAoB;AAErB,IAAA,cAAc,CAAC,QAA4B,EAAA;AACjD,QAAA,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAO,EAAE;AACxB,QAAA,IAAI,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,gBAAgB,CAAC,EAAE;AAC3E,YAAA,OAAO,WAAW,CAAC,SAAS,CAAC,QAAQ,CAAC;;AAExC,QAAA,OAAO,QAAQ;;AAIjB,IAAA,iBAAiB,CAAC,KAAiD,EAAA;QACjE,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE;QAEnB,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM;QAClC,YAAY,CAAC,kBAAkB,CAAC,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC;;AAIlD,IAAA,UAAU,CAAC,KAAiD,EAAA;QAC1D,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE;QAEnB,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM;QAClC,YAAY,CAAC,kBAAkB,CAAC,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC;;IAG1C,aAAa,GAAA;QACnB,MAAM,MAAM,GAAG,EAAE;QAEjB,IAAIC,KAAY,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE;YACzC,MAAM,CAAC,IAAI,CAAC;AACV,gBAAA,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,kCAAkC,CAAC;AAChE,gBAAA,KAAK,EAAEA,KAAY,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK;AAC7C,aAAA,CAAC;YACF,YAAY,CAAC,kBAAkB,CAAC;AAC9B,gBAAA,GAAGA,KAAY,CAAC,IAAI,CAAC,eAAe;AACpC,gBAAA,KAAK,EAAEA,KAAY,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK;AAC7C,aAAA,CAAC;;QAGJ,IAAIA,KAAY,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE;YAC5C,MAAM,CAAC,IAAI,CAAC;AACV,gBAAA,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,qCAAqC,CAAC;AACnE,gBAAA,KAAK,EAAEA,KAAY,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ;AAChD,aAAA,CAAC;YACF,YAAY,CAAC,kBAAkB,CAAC;AAC9B,gBAAA,GAAGA,KAAY,CAAC,IAAI,CAAC,eAAe;AACpC,gBAAA,QAAQ,EAAEA,KAAY,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ;AACnD,aAAA,CAAC;;AAGJ,QAAA,OAAO,MAAM;;AAEP,IAAA,MAAM,wBAAwB,GAAA;QACpC,GAAG,CAAC,GAAG,CAAC,QAAQ,CAACA,KAAY,CAAC,IAAI,CAAC,SAAS,EAAE;AAC5C,YAAA,KAAK,EAAEA,KAAY,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK;AAC/C,SAAA,CAAC;AACF,QAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC;;IAG9B,YAAY,GAAA;QAClB,MAAM,iBAAiB,GAAGA,KAAY,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK;QAC/D,MAAM,gBAAgB,GAAGA,KAAY,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ;QAEjE,MAAM,MAAM,GAAG,EAAE;QAEjB,IAAI,CAAC,iBAAiB,EAAE;AACtB,YAAA,MAAM,CAAC,IAAI,CACT,CACE,CAAA,mBAAA,EAAA,EAAA,EAAE,EAAC,OAAO,EACV,OAAO,EAAC,UAAU,EAClB,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,kCAAkC,CAAC,EAChE,WAAW,EAAE,WAAW,CAAC,SAAS,CAAC,kCAAkC,CAAC,EAC5D,WAAA,EAAA,OAAO,EACjB,SAAS,EAAE,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,EAC9C,CAAA,CACH;;QAGH,IAAI,CAAC,gBAAgB,EAAE;YACrB,MAAM,CAAC,IAAI,CACT,CAAA,CAAA,mBAAA,EAAA,EACE,EAAE,EAAC,UAAU,EACb,OAAO,EAAC,UAAU,EAClB,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,qCAAqC,CAAC,EACnE,WAAW,EAAE,WAAW,CAAC,SAAS,CAAC,qCAAqC,CAAC,EACzE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC,EACjD,CAAA,CACH;;AAGH,QAAA,OAAO,MAAM,CAAC,MAAM,GAAG,CAAC,IACtB,WACE,KAAK,EAAC,kBAAkB,EACxB,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,MAAM,CAAC,MAAM,GAAG,CAAC,KAAK,iBAAiB,IAAI,gBAAgB,CAAC,GAAG,MAAM,GAAG,GAAG;aACvF,EAAA,EAEA,MAAM,CACH,IACJ,IAAI;;IAGV,MAAM,GAAA;QACJ,MAAM,oBAAoB,IACxB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI,CAAC,cAAc,GAAG,SAAS,GAAG,QAAQ;gBACtD,OAAO,EAAE,IAAI,CAAC,cAAc,GAAG,GAAG,GAAG,GAAG;AACxC,gBAAA,UAAU,EAAE,0BAA0B;aACvC,EACD,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,MAAM,IAAI,CAAC,wBAAwB,EAAE,EAC9C,IAAI,EAAC,MAAM,EAAA,EAEV,WAAW,CAAC,SAAS,CAAC,+BAA+B,CAAC,EACvD,CAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAa,IAAI,EAAC,aAAa,GAAG,CACpB,CACZ,CACP;QAED,MAAM,iBAAiB,GAAGA,KAAY,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK;QAC/D,MAAM,gBAAgB,GAAGA,KAAY,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ;AACjE,QAAA,MAAM,eAAe,GAAG,iBAAiB,IAAI,gBAAgB;QAE7D,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,oBAAoB,EACpB,eAAe,KACd,CAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,SAAS,EAAE,WAAW,CAAC,SAAS,CAAC,qCAAqC,CAAC,EACvE,UAAU,EAAE,IAAI,CAAC,aAAa,EAAE,GAChC,CACH,EACA,IAAI,CAAC,YAAY,EAAE,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement","sessionState"],"sources":["src/components/checkout/user-information/user-information.css?tag=user-information","src/components/checkout/user-information/user-information.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.inputs-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n}\n.customer-exists {\n  display: flex;\n  justify-content: flex-end;\n  margin-bottom: 16px;\n}\n","import { Component, Event, EventEmitter, h, Host, Listen, Prop } from '@stencil/core';\nimport { api } from '../../../api';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { sessionState, SessionStore } from '../../../store/session.store';\n\n@Component({\n  tag: 'user-information',\n  styleUrl: 'user-information.css',\n  shadow: false,\n})\nexport class UserInformation {\n  @Prop() userInformation: {\n    email?: string;\n    fullName?: string;\n    countryCode?: string;\n    phoneNumber?: {\n      number: string;\n      countryCode: string;\n    };\n  } = {\n    email: '',\n    fullName: '',\n    countryCode: '',\n  };\n\n  @Prop() errors: {\n    email?: string;\n    fullName?: string;\n  } | null = null;\n\n  @Prop() customerExists: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Event() onRebillAccountClick: EventEmitter<boolean>;\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  @Listen('input')\n  handleInputChange(event: CustomEvent<{ id: string; value: string }>) {\n    if (!event.detail) return;\n\n    const { id, value } = event.detail;\n    SessionStore.setUserInformation({ [id]: value });\n  }\n\n  @Listen('blur')\n  handleBlur(event: CustomEvent<{ id: string; value: string }>) {\n    if (!event.detail) return;\n\n    const { id, value } = event.detail;\n    SessionStore.setUserInformation({ [id]: value });\n  }\n\n  private getCardLabels() {\n    const labels = [];\n\n    if (sessionState.data.prefilledData.email) {\n      labels.push({\n        label: I18nService.translate('userInformation.emailPlaceholder'),\n        value: sessionState.data.prefilledData.email,\n      });\n      SessionStore.setUserInformation({\n        ...sessionState.data.userInformation,\n        email: sessionState.data.prefilledData.email,\n      });\n    }\n\n    if (sessionState.data.prefilledData.fullName) {\n      labels.push({\n        label: I18nService.translate('userInformation.fullNamePlaceholder'),\n        value: sessionState.data.prefilledData.fullName,\n      });\n      SessionStore.setUserInformation({\n        ...sessionState.data.userInformation,\n        fullName: sessionState.data.prefilledData.fullName,\n      });\n    }\n\n    return labels;\n  }\n  private async handleRebillAccountClick() {\n    api.otp.generate(sessionState.data.sessionId, {\n      email: sessionState.data.userInformation.email,\n    });\n    this.onRebillAccountClick.emit(true);\n  }\n\n  private renderInputs() {\n    const hasPrefilledEmail = sessionState.data.prefilledData.email;\n    const hasPrefilledName = sessionState.data.prefilledData.fullName;\n\n    const inputs = [];\n\n    if (!hasPrefilledEmail) {\n      inputs.push(\n        <rebill-input-text\n          id=\"email\"\n          variant=\"floating\"\n          label={I18nService.translate('userInformation.emailPlaceholder')}\n          placeholder={I18nService.translate('userInformation.emailPlaceholder')}\n          left-icon=\"email\"\n          clearable={true}\n          disabled={this.disabled}\n          error={this.translateError(this.errors?.email)}\n        />,\n      );\n    }\n\n    if (!hasPrefilledName) {\n      inputs.push(\n        <rebill-input-text\n          id=\"fullName\"\n          variant=\"floating\"\n          label={I18nService.translate('userInformation.fullNamePlaceholder')}\n          placeholder={I18nService.translate('userInformation.fullNamePlaceholder')}\n          disabled={this.disabled}\n          error={this.translateError(this.errors?.fullName)}\n        />,\n      );\n    }\n\n    return inputs.length > 0 ? (\n      <div\n        class=\"inputs-container\"\n        style={{\n          marginTop: inputs.length > 0 && (hasPrefilledEmail || hasPrefilledName) ? '1rem' : '0',\n        }}\n      >\n        {inputs}\n      </div>\n    ) : null;\n  }\n\n  render() {\n    const customerExistsButton = (\n      <div class=\"customer-exists\">\n        <rebill-button\n          style={{\n            visibility: this.customerExists ? 'visible' : 'hidden',\n            opacity: this.customerExists ? '1' : '0',\n            transition: 'opacity 0.3s ease-in-out',\n          }}\n          variant=\"text\"\n          size=\"small\"\n          onClick={() => this.handleRebillAccountClick()}\n          icon=\"lock\"\n        >\n          {I18nService.translate('userInformation.rebillAccount')}\n          <rebill-icon name=\"arrow-right\" />\n        </rebill-button>\n      </div>\n    );\n\n    const hasPrefilledEmail = sessionState.data.prefilledData.email;\n    const hasPrefilledName = sessionState.data.prefilledData.fullName;\n    const hasAnyPrefilled = hasPrefilledEmail || hasPrefilledName;\n\n    return (\n      <Host>\n        {customerExistsButton}\n        {hasAnyPrefilled && (\n          <rebill-card\n            cardTitle={I18nService.translate('userInformation.personalInformation')}\n            cardLabels={this.getCardLabels()}\n          />\n        )}\n        {this.renderInputs()}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-B-Wxp2_p.js → p-oE_0ElW3.js}

@@ -1,9 +1,12 @@
 import { proxyCustomElement, H, h } from './p-8BpuJ_V5.js';
 import { e as instance, I as I18nService, c as formatAmount, s as state } from './p-CMzpQU2o.js';
 import { a as formatDate } from './p-CInOtzjF.js';
-import { d as defineCustomElement$4 } from './p-DrAiGSzG.js';
-import { d as defineCustomElement$3 } from './p-4hVDutj0.js';
-import { d as defineCustomElement$2 } from './p-CWY-g0zG.js';
+import { d as defineCustomElement$7 } from './p-Dp8EoajW.js';
+import { d as defineCustomElement$6 } from './p-CisP549A.js';
+import { d as defineCustomElement$5 } from './p-DvWdkIUq.js';
+import { d as defineCustomElement$4 } from './p-DzdUnkvh.js';
+import { d as defineCustomElement$3 } from './p-CWY-g0zG.js';
+import { d as defineCustomElement$2 } from './p-CuX2faVH.js';
 import { d as defineCustomElement$1 } from './p-C_txMekS.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)}";
@@ -21,6 +24,15 @@ const RenewalSummary = /*@__PURE__*/ proxyCustomElement(class RenewalSummary ext
         'details',
         'summary',
     ];
+    totalAmount;
+    subscriptionTitle;
+    subscriptionAmount;
+    nextChargeDate;
+    frequency;
+    currency;
+    couponCode;
+    discountAmount;
+    discountPercentage;
     componentWillLoad() {
         instance.on('languageChanged', this.handleLanguageChange);
     }
@@ -30,12 +42,6 @@ const RenewalSummary = /*@__PURE__*/ proxyCustomElement(class RenewalSummary ext
     handleLanguageChange = () => {
         this.forceUpdate = this.forceUpdate + 1;
     };
-    totalAmount;
-    subscriptionTitle;
-    subscriptionAmount;
-    nextChargeDate;
-    frequency;
-    currency;
     getFrequencyText() {
         if (!this.frequency || !this.frequency.period)
             return '';
@@ -44,8 +50,28 @@ const RenewalSummary = /*@__PURE__*/ proxyCustomElement(class RenewalSummary ext
         const translationKey = `summary.${period}`;
         return I18nService.translate(translationKey, { count });
     }
+    getDiscountAmount() {
+        const amountDiscount = Math.max(0, this.discountAmount);
+        if (amountDiscount > 0) {
+            return amountDiscount;
+        }
+        const percentage = this.discountPercentage;
+        if (percentage && percentage > 0) {
+            const base = this.totalAmount;
+            const percentageDiscount = (base * percentage) / 100;
+            return Math.max(0, percentageDiscount);
+        }
+        return 0;
+    }
+    getFinalAmount() {
+        const final = this.totalAmount - this.getDiscountAmount();
+        return Math.max(0, final);
+    }
+    hasDiscount() {
+        return this.getDiscountAmount() > 0;
+    }
     renderHeader = () => {
-        return (h("div", { class: "header" }, h("p", { class: "title" }, I18nService.translate('renewal.title')), h("p", { class: "amount" }, formatAmount(this.totalAmount, this.currency), ' ', h("span", { class: "per" }, "/ ", this.getFrequencyText().toLowerCase()))));
+        return (h("div", { class: "header" }, h("p", { class: "title" }, I18nService.translate('renewal.title')), h("p", { class: "amount" }, h("span", { class: "total-amount" }, formatAmount(this.getFinalAmount(), this.currency)), ' ', h("span", { class: "per" }, "/ ", this.getFrequencyText().toLowerCase()))));
     };
     renderInfoRow = (label, value) => {
         return (h("div", { class: "row" }, h("div", { class: "left" }, label), h("div", { class: "right" }, value)));
@@ -59,11 +85,16 @@ const RenewalSummary = /*@__PURE__*/ proxyCustomElement(class RenewalSummary ext
     renderSubtotal = () => {
         return this.renderInfoRow(I18nService.translate('renewal.subtotal'), formatAmount(this.totalAmount, this.currency));
     };
+    renderDiscount = () => {
+        if (!this.hasDiscount())
+            return null;
+        return (h("div", { class: "row" }, h("div", { class: "left" }, I18nService.translate('summary.discount')), h("div", { class: "right discount-chip-wrapper" }, h("discount-coupon", { displayMode: "readonly", readonlyCouponCode: this.couponCode || undefined, readonlyDiscountAmount: this.getDiscountAmount(), readonlyCurrency: this.currency }))));
+    };
     renderTotal = () => {
-        return (h("div", { class: "total-row" }, h("div", { class: "left" }, I18nService.translate('renewal.totalToRenew')), h("div", { class: "right" }, formatAmount(this.totalAmount, this.currency))));
+        return (h("div", { class: "total-row" }, h("div", { class: "left" }, I18nService.translate('renewal.totalToRenew')), h("div", { class: "right" }, formatAmount(this.getFinalAmount(), this.currency))));
     };
     renderDesktop = () => {
-        return (h("div", { class: "wrapper" }, this.renderHeader(), h("div", { class: "info" }, h("div", { class: "row" }, h("div", { class: "" }, I18nService.translate('renewal.subscriptionDetails'))), this.renderProduct(), this.renderNextRenewal(), this.renderSubtotal()), this.renderTotal()));
+        return (h("div", { class: "wrapper" }, this.renderHeader(), h("div", { class: "info" }, h("div", { class: "row" }, h("div", { class: "" }, I18nService.translate('renewal.subscriptionDetails'))), this.renderProduct(), this.renderNextRenewal(), this.renderSubtotal(), this.renderDiscount()), this.renderTotal()));
     };
     render() {
         if (this.displayedComponents.includes('header') &&
@@ -78,25 +109,28 @@ const RenewalSummary = /*@__PURE__*/ proxyCustomElement(class RenewalSummary ext
             return (h("collapsible-card", { header: I18nService.translate('summary.details') }, this.renderProduct(), this.renderNextRenewal()));
         }
         if (this.displayedComponents.includes('summary')) {
-            return (h("collapsible-card", { header: I18nService.translate('summary.summary') }, this.renderInfoRow(this.subscriptionTitle, '1 x ' + formatAmount(this.subscriptionAmount, this.currency)), this.renderSubtotal(), h("rebill-divider", null), this.renderInfoRow(I18nService.translate('renewal.totalToRenew'), formatAmount(this.totalAmount, this.currency))));
+            return (h("collapsible-card", { header: I18nService.translate('summary.summary') }, this.renderInfoRow(this.subscriptionTitle, '1 x ' + formatAmount(this.subscriptionAmount, this.currency)), this.renderSubtotal(), this.renderDiscount(), h("rebill-divider", null), this.renderInfoRow(I18nService.translate('renewal.totalToRenew'), formatAmount(this.getFinalAmount(), this.currency))));
         }
     }
     static get style() { return renewalSummaryCss; }
 }, [256, "renewal-summary", {
         "displayedComponents": [16],
-        "totalAmount": [8, "total-amount"],
+        "totalAmount": [2, "total-amount"],
         "subscriptionTitle": [1, "subscription-title"],
-        "subscriptionAmount": [8, "subscription-amount"],
+        "subscriptionAmount": [2, "subscription-amount"],
         "nextChargeDate": [1, "next-charge-date"],
         "frequency": [16],
         "currency": [1],
+        "couponCode": [1, "coupon-code"],
+        "discountAmount": [2, "discount-amount"],
+        "discountPercentage": [2, "discount-percentage"],
         "forceUpdate": [32]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["renewal-summary", "collapsible-card", "rebill-divider", "rebill-icon", "rebill-typography"];
+    const components = ["renewal-summary", "collapsible-card", "discount-coupon", "rebill-button", "rebill-divider", "rebill-icon", "rebill-input-text", "rebill-typography"];
     components.forEach(tagName => { switch (tagName) {
         case "renewal-summary":
             if (!customElements.get(tagName)) {
@@ -105,15 +139,30 @@ function defineCustomElement() {
             break;
         case "collapsible-card":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$7();
+            }
+            break;
+        case "discount-coupon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "rebill-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
             }
             break;
         case "rebill-divider":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "rebill-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rebill-input-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }
@@ -128,6 +177,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { RenewalSummary as R, defineCustomElement as d };
-//# sourceMappingURL=p-B-Wxp2_p.js.map
+//# sourceMappingURL=p-oE_0ElW3.js.map
 
-//# sourceMappingURL=p-B-Wxp2_p.js.map
+//# sourceMappingURL=p-oE_0ElW3.js.map

package/dist/components/p-oE_0ElW3.js.map

@@ -0,0 +1 @@
+{"file":"p-oE_0ElW3.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() 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\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    const amountDiscount = Math.max(0, this.discountAmount);\n    if (amountDiscount > 0) {\n      return amountDiscount;\n    }\n\n    const percentage = this.discountPercentage;\n    if (percentage && percentage > 0) {\n      const base = this.totalAmount;\n      const percentageDiscount = (base * percentage) / 100;\n      return Math.max(0, percentageDiscount);\n    }\n\n    return 0;\n  }\n\n  private getFinalAmount(): number {\n    const final = this.totalAmount - this.getDiscountAmount();\n    return Math.max(0, final);\n  }\n\n  private hasDiscount(): boolean {\n    return this.getDiscountAmount() > 0;\n  }\n\n  renderHeader = () => {\n    return (\n      <div class=\"header\">\n        <p class=\"title\">{I18nService.translate('renewal.title')}</p>\n        <p class=\"amount\">\n          <span class=\"total-amount\">{formatAmount(this.getFinalAmount(), 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.subscriptionAmount, 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.totalAmount, this.currency),\n    );\n  };\n\n  private renderDiscount = () => {\n    if (!this.hasDiscount()) 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.getFinalAmount(), 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        {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.subscriptionAmount, this.currency),\n          )}\n          {this.renderSubtotal()}\n          {this.renderDiscount()}\n\n          <rebill-divider />\n          {this.renderInfoRow(\n            I18nService.translate('renewal.totalToRenew'),\n            formatAmount(this.getFinalAmount(), this.currency),\n          )}\n        </collapsible-card>\n      );\n    }\n  }\n}\n"],"version":3}

package/dist/components/{p-CKZvdOpK.js → p-qDaQOriJ.js}

@@ -3356,10 +3356,10 @@ const InputPhone = /*@__PURE__*/ proxyCustomElement(class InputPhone extends H {
         const translatedError = this.translateError(this.error);
         const translatedValidationError = this.translateError(this.validationError);
         const displayError = translatedError || translatedValidationError;
-        return (h("div", { key: '4c2d918c3ab74ad51d73b38d6f46a6ead8d72682', class: "input-container" }, h("div", { key: '98eb3935a957dbafffca5f72c736537bb533b65f', class: inputClasses }, h("div", { key: '710ee9264f5da6467e7e8484084ea4ea1754b8a3', class: "input-combo-select country-selector", onClick: this.toggleDropdown }, h("span", { key: '633a1f80fef6c8f194235f8e7caeeff5b1118032', class: "flag" }, this.selectedCountry.flag), h("span", { key: 'abdbf7c6fdb491888489bcc919ae41b73c016b7e', class: "dial-code" }, this.selectedCountry.dialCode), h("span", { key: 'c8cf27250a6cdea2b4e3ee955c37179ed4a793d4', class: `dropdown-arrow ${this.isDropdownOpen ? 'open' : ''}` }, "\u25BC")), this.isDropdownOpen && (h("div", { key: '678d98ca2988fd02cda20ecdeb8936d09c5be2f3', class: "country-dropdown" }, this.searchable && (h("div", { key: '14f05e18b67b12b0617563b3b832adcfc528c9ea', class: "search-container", onClick: this.handleSearchClick }, h("div", { key: 'd0301d235db091cbd3f04cf0548b9da93febe2bc', class: "search-input-wrapper" }, h("rebill-icon", { key: 'd710e1a3df6664cbbfb14249014a4e21295c7e29', name: "search", size: "16px", class: "search-icon" }), h("input", { key: '684ed183b3748a6e4da7f5a783d3234dd2f335d3', 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: '12f252406e3ecf9e0965eae9785d1cccca94e7f8', type: "button", class: "clear-search", onClick: event => {
+        return (h("div", { key: '10cfe50d2b05b73d1c5c908d1219408d1695f18b', class: "input-container" }, h("div", { key: 'f74c9646e980ffaf53527f17737c2706998b612d', class: inputClasses }, h("div", { key: 'fb01d51d718603925839be3810c5ae4f3646293b', class: "input-combo-select country-selector", onClick: this.toggleDropdown }, h("span", { key: '4236bf3ad916ae749e2801370b333318d0e232fc', class: "flag" }, this.selectedCountry.flag), h("span", { key: '9d0edd7c8cf05120844ea7b5134a4ac327aa1ced', class: "dial-code" }, this.selectedCountry.dialCode), h("span", { key: 'a08a740944e9c00f4a22e4bb1632029c4946284d', class: `dropdown-arrow ${this.isDropdownOpen ? 'open' : ''}` }, "\u25BC")), this.isDropdownOpen && (h("div", { key: 'f651d9017bac7448cfd55dd2712b67fe0099cf2a', class: "country-dropdown" }, this.searchable && (h("div", { key: '0b5c593a2aa8976a79eb45b159ef7242c6736469', class: "search-container", onClick: this.handleSearchClick }, h("div", { key: 'd44705bca279fbbf1c3992e90014db93a0eda2c2', class: "search-input-wrapper" }, h("rebill-icon", { key: '0bfe2d73b46de9db3fc6a46b62f4720cd8ebbd59', name: "search", size: "16px", class: "search-icon" }), h("input", { key: '4aec9d63677ef103a9e23b833b6361fecf2e6c44', 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: 'fc068fa9c0484aa3c1eb35237fc08441854a66e8', type: "button", class: "clear-search", onClick: event => {
                 event.stopPropagation();
                 this.clearSearch();
-            }, "aria-label": "Clear search" }, h("rebill-icon", { key: '56e4cd9c246ac490c7d853875243393a35681b1a', 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: '6c5b6f8fd3d58a821b503d8f88f75a8390270647', 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: '9990ca38ae106410434a39f952cb31266497f4c4', class: "error-message" }, displayError)));
+            }, "aria-label": "Clear search" }, h("rebill-icon", { key: 'f62e8e989586b3af2f72261828f00e56216d5302', 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: 'bd1553158f5eb5a2548f7e037843362e4a9e04c6', 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: 'e2f7d553f3f881a26ad5786c1205be08a99449fc', class: "error-message" }, displayError)));
     }
     static get style() { return inputPhoneCss; }
 }, [256, "rebill-input-phone", {
@@ -3403,6 +3403,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { InputPhone as I, defineCustomElement as d };
-//# sourceMappingURL=p-CKZvdOpK.js.map
+//# sourceMappingURL=p-qDaQOriJ.js.map
 
-//# sourceMappingURL=p-CKZvdOpK.js.map
+//# sourceMappingURL=p-qDaQOriJ.js.map