rebill-web-components-sdk 1.10.1 → 1.10.2-beta.0

package/dist/components/{p-Cy4AWMDG.js.map → p-0y1EkPsV.js.map}

@@ -1 +1 @@
-{"file":"p-Cy4AWMDG.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/hooks/useCheckoutForm.ts","src/components/checkout/checkout-form/checkout-form.tsx"],"sourcesContent":["import { SessionStore } from '../store/session.store';\nimport { FormData, FormErrors } from '../utils/form-validation';\n\nexport interface UseCheckoutFormOptions {\n  onFormChange?: (formData: FormData) => void;\n  onFormSubmit?: (formData: FormData) => void;\n}\n\nexport interface UseCheckoutFormReturn {\n  syncFormDataToStore: (formData: FormData) => void;\n  handlePhoneValidation: (formData: FormData, errors: FormErrors) => FormErrors;\n  getPhoneRelatedFields: () => string[];\n  getTextFields: () => string[];\n  shouldValidateField: (id: string) => boolean;\n  clearPhoneErrors: (formData: FormData, errors: FormErrors) => FormErrors;\n}\n\nexport function useCheckoutForm(): UseCheckoutFormReturn {\n  const syncFormDataToStore = (formData: FormData) => {\n    // Sync user information\n    if (formData.email !== undefined) {\n      SessionStore.setUserInformation({ email: formData.email });\n    }\n    if (formData.fullName !== undefined) {\n      SessionStore.setUserInformation({ fullName: formData.fullName });\n    }\n    if (formData.phoneNumber !== undefined) {\n      SessionStore.setUserPhoneNumber({\n        number: formData.phoneNumber,\n        countryCode: formData.countryCodePhoneNumber || '',\n      });\n    }\n    if (formData.countryCodePhoneNumber !== undefined) {\n      SessionStore.setUserPhoneNumber({\n        number: formData.phoneNumber || '',\n        countryCode: formData.countryCodePhoneNumber,\n      });\n    }\n\n    // Sync billing address\n    if (\n      formData['billing-country'] !== undefined ||\n      formData['billing-state'] !== undefined ||\n      formData['billing-address'] !== undefined ||\n      formData['billing-city'] !== undefined ||\n      formData['billing-zip'] !== undefined ||\n      formData['billing-addInformation'] !== undefined\n    ) {\n      SessionStore.setBillingAddress({\n        country: formData['billing-country'],\n        state: formData['billing-state'],\n        address: formData['billing-address'],\n        city: formData['billing-city'],\n        zip: formData['billing-zip'],\n        addInformation: formData['billing-addInformation'],\n      });\n    }\n\n    if (formData.bankId !== undefined) {\n      SessionStore.setBankId(formData.bankId);\n    }\n  };\n\n  const handlePhoneValidation = (formData: FormData, errors: FormErrors): FormErrors => {\n    const updatedErrors = { ...errors };\n    if (formData.isValidPhoneNumber === undefined) {\n      if (formData.phoneNumber && formData.phoneNumber.trim() !== '') {\n        formData.isValidPhoneNumber = 'true';\n      } else {\n        formData.isValidPhoneNumber = 'false';\n      }\n    }\n    if (formData.phoneNumber !== undefined) {\n      if (formData?.isValidPhoneNumber === 'true' || formData?.isValidPhoneNumber === true) {\n        delete updatedErrors.phoneNumber;\n      } else if (\n        (formData.isValidPhoneNumber === 'false' || formData.isValidPhoneNumber === false) &&\n        formData.phoneNumber &&\n        formData.phoneNumber.trim() !== ''\n      ) {\n        updatedErrors.phoneNumber = 'validation.phoneRequired';\n      } else if (!formData.phoneNumber || formData.phoneNumber.trim() === '') {\n        updatedErrors.phoneNumber = 'validation.phoneRequired';\n      } else if (\n        formData.isValidPhoneNumber === undefined &&\n        formData.phoneNumber &&\n        formData.phoneNumber.trim() !== ''\n      ) {\n        delete updatedErrors.phoneNumber;\n      }\n    }\n\n    return updatedErrors;\n  };\n\n  const clearPhoneErrors = (formData: FormData, errors: FormErrors): FormErrors => {\n    const updatedErrors = { ...errors };\n\n    if (formData?.isValidPhoneNumber === 'true' || formData?.isValidPhoneNumber === true) {\n      delete updatedErrors.phoneNumber;\n    }\n\n    return updatedErrors;\n  };\n\n  const getPhoneRelatedFields = (): string[] => {\n    return ['phoneNumber', 'countryCodePhoneNumber', 'isValidPhoneNumber'];\n  };\n\n  const getTextFields = (): string[] => {\n    return [\n      'email',\n      'fullName',\n      'billing-address',\n      'billing-city',\n      'billing-state',\n      'billing-zip',\n      'billing-country',\n    ];\n  };\n\n  const shouldValidateField = (id: string): boolean => {\n    const phoneRelatedFields = getPhoneRelatedFields();\n    const textFields = getTextFields();\n\n    if (phoneRelatedFields.includes(id)) {\n      return false;\n    }\n    return textFields.includes(id);\n  };\n\n  return {\n    syncFormDataToStore,\n    handlePhoneValidation,\n    getPhoneRelatedFields,\n    getTextFields,\n    shouldValidateField,\n    clearPhoneErrors,\n  };\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop } from '@stencil/core';\nimport { useCheckoutForm } from '../../../hooks/useCheckoutForm';\nimport { FormData, FormErrors } from '../../../utils/form-validation';\n\n@Component({\n  tag: 'rebill-checkout-form',\n  shadow: false,\n})\nexport class CheckoutForm {\n  @Element() el: HTMLElement;\n\n  /** Esquema de validación del formulario */\n  @Prop() validationSchema: any;\n  /** Datos iniciales del formulario */\n  @Prop() initialData: FormData = {};\n  /** Evento cuando el formulario es válido y se envía */\n  @Event() submit: EventEmitter<FormData>;\n  /** Evento cuando hay cambios en el formulario */\n  @Event() change: EventEmitter<FormData>;\n  /** Función render prop para controlar el formulario */\n  @Prop() renderForm?: (props: {\n    submit: () => void;\n    formData: FormData;\n    errors: FormErrors;\n  }) => any;\n\n  private checkoutFormHook = useCheckoutForm();\n\n  private formElement: any;\n\n  componentDidLoad() {\n    if (this.formElement) {\n      // this.formElement.setSyncDataToStore(this.checkoutFormHook.syncFormDataToStore);\n      // this.formElement.setCustomValidation(this.checkoutFormHook.handlePhoneValidation);\n      // this.formElement.setGetRelatedFields((id: string) => {\n      //   const phoneRelatedFields = this.checkoutFormHook.getPhoneRelatedFields();\n      //   return phoneRelatedFields.includes(id) ? phoneRelatedFields : [];\n      // });\n      // this.formElement.setShouldValidateField(this.checkoutFormHook.shouldValidateField);\n    }\n  }\n\n  @Listen('change')\n  handleFormChange(event: CustomEvent) {\n    const formData = event.detail;\n\n    // Guard: ignore unrelated change events without proper payload\n    if (!formData || typeof formData !== 'object') {\n      return;\n    }\n\n    if (formData?.isValidPhoneNumber === 'true' && this.formElement) {\n      this.formElement.clearError('phoneNumber');\n    }\n\n    if (\n      (formData as any).phoneNumber !== undefined &&\n      this.formElement &&\n      this.formElement.hasSubmitted\n    ) {\n      if (this.checkoutFormHook.handlePhoneValidation) {\n        const updatedErrors = this.checkoutFormHook.handlePhoneValidation(\n          formData,\n          this.formElement.errors || {},\n        );\n        this.formElement.errors = updatedErrors;\n      }\n    }\n  }\n\n  private handleSubmit = (formData: FormData) => {\n    this.submit.emit(formData);\n  };\n\n  private handleChange = (formData: FormData) => {\n    this.change.emit(formData);\n  };\n\n  @Method()\n  async resetValidation() {\n    if (this.formElement) {\n      await this.formElement.resetValidation();\n    }\n  }\n\n  render() {\n    return (\n      <rebill-form\n        ref={el => (this.formElement = el)}\n        validationSchema={this.validationSchema}\n        initialData={this.initialData}\n        onSubmit={(event: CustomEvent) => this.handleSubmit(event.detail)}\n        onChange={(event: CustomEvent) => this.handleChange(event.detail)}\n        renderForm={this.renderForm}\n      />\n    );\n  }\n}\n"],"version":3}
+{"file":"p-0y1EkPsV.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/hooks/useCheckoutForm.ts","src/components/checkout/checkout-form/checkout-form.tsx"],"sourcesContent":["import { SessionStore } from '../store/session.store';\nimport { FormData, FormErrors } from '../utils/form-validation';\n\nexport interface UseCheckoutFormOptions {\n  onFormChange?: (formData: FormData) => void;\n  onFormSubmit?: (formData: FormData) => void;\n}\n\nexport interface UseCheckoutFormReturn {\n  syncFormDataToStore: (formData: FormData) => void;\n  handlePhoneValidation: (formData: FormData, errors: FormErrors) => FormErrors;\n  getPhoneRelatedFields: () => string[];\n  getTextFields: () => string[];\n  shouldValidateField: (id: string) => boolean;\n  clearPhoneErrors: (formData: FormData, errors: FormErrors) => FormErrors;\n}\n\nexport function useCheckoutForm(): UseCheckoutFormReturn {\n  const syncFormDataToStore = (formData: FormData) => {\n    // Sync user information\n    if (formData.email !== undefined) {\n      SessionStore.setUserInformation({ email: formData.email });\n    }\n    if (formData.fullName !== undefined) {\n      SessionStore.setUserInformation({ fullName: formData.fullName });\n    }\n    if (formData.phoneNumber !== undefined) {\n      SessionStore.setUserPhoneNumber({\n        number: formData.phoneNumber,\n        countryCode: formData.countryCodePhoneNumber || '',\n      });\n    }\n    if (formData.countryCodePhoneNumber !== undefined) {\n      SessionStore.setUserPhoneNumber({\n        number: formData.phoneNumber || '',\n        countryCode: formData.countryCodePhoneNumber,\n      });\n    }\n\n    // Sync billing address\n    if (\n      formData['billing-country'] !== undefined ||\n      formData['billing-state'] !== undefined ||\n      formData['billing-address'] !== undefined ||\n      formData['billing-city'] !== undefined ||\n      formData['billing-zip'] !== undefined ||\n      formData['billing-addInformation'] !== undefined\n    ) {\n      SessionStore.setBillingAddress({\n        country: formData['billing-country'],\n        state: formData['billing-state'],\n        address: formData['billing-address'],\n        city: formData['billing-city'],\n        zip: formData['billing-zip'],\n        addInformation: formData['billing-addInformation'],\n      });\n    }\n\n    if (formData.bankId !== undefined) {\n      SessionStore.setBankId(formData.bankId);\n    }\n  };\n\n  const handlePhoneValidation = (formData: FormData, errors: FormErrors): FormErrors => {\n    const updatedErrors = { ...errors };\n    if (formData.isValidPhoneNumber === undefined) {\n      if (formData.phoneNumber && formData.phoneNumber.trim() !== '') {\n        formData.isValidPhoneNumber = 'true';\n      } else {\n        formData.isValidPhoneNumber = 'false';\n      }\n    }\n    if (formData.phoneNumber !== undefined) {\n      if (formData?.isValidPhoneNumber === 'true' || formData?.isValidPhoneNumber === true) {\n        delete updatedErrors.phoneNumber;\n      } else if (\n        (formData.isValidPhoneNumber === 'false' || formData.isValidPhoneNumber === false) &&\n        formData.phoneNumber &&\n        formData.phoneNumber.trim() !== ''\n      ) {\n        updatedErrors.phoneNumber = 'validation.phoneRequired';\n      } else if (!formData.phoneNumber || formData.phoneNumber.trim() === '') {\n        updatedErrors.phoneNumber = 'validation.phoneRequired';\n      } else if (\n        formData.isValidPhoneNumber === undefined &&\n        formData.phoneNumber &&\n        formData.phoneNumber.trim() !== ''\n      ) {\n        delete updatedErrors.phoneNumber;\n      }\n    }\n\n    return updatedErrors;\n  };\n\n  const clearPhoneErrors = (formData: FormData, errors: FormErrors): FormErrors => {\n    const updatedErrors = { ...errors };\n\n    if (formData?.isValidPhoneNumber === 'true' || formData?.isValidPhoneNumber === true) {\n      delete updatedErrors.phoneNumber;\n    }\n\n    return updatedErrors;\n  };\n\n  const getPhoneRelatedFields = (): string[] => {\n    return ['phoneNumber', 'countryCodePhoneNumber', 'isValidPhoneNumber'];\n  };\n\n  const getTextFields = (): string[] => {\n    return [\n      'email',\n      'fullName',\n      'billing-address',\n      'billing-city',\n      'billing-state',\n      'billing-zip',\n      'billing-country',\n    ];\n  };\n\n  const shouldValidateField = (id: string): boolean => {\n    const phoneRelatedFields = getPhoneRelatedFields();\n    const textFields = getTextFields();\n\n    if (phoneRelatedFields.includes(id)) {\n      return false;\n    }\n    return textFields.includes(id);\n  };\n\n  return {\n    syncFormDataToStore,\n    handlePhoneValidation,\n    getPhoneRelatedFields,\n    getTextFields,\n    shouldValidateField,\n    clearPhoneErrors,\n  };\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop } from '@stencil/core';\nimport { useCheckoutForm } from '../../../hooks/useCheckoutForm';\nimport { FormData, FormErrors } from '../../../utils/form-validation';\n\n@Component({\n  tag: 'rebill-checkout-form',\n  shadow: false,\n})\nexport class CheckoutForm {\n  @Element() el: HTMLElement;\n\n  /** Esquema de validación del formulario */\n  @Prop() validationSchema: any;\n  /** Datos iniciales del formulario */\n  @Prop() initialData: FormData = {};\n  /** Evento cuando el formulario es válido y se envía */\n  @Event() submit: EventEmitter<FormData>;\n  /** Evento cuando hay cambios en el formulario */\n  @Event() change: EventEmitter<FormData>;\n  /** Función render prop para controlar el formulario */\n  @Prop() renderForm?: (props: {\n    submit: () => void;\n    formData: FormData;\n    errors: FormErrors;\n  }) => any;\n\n  private checkoutFormHook = useCheckoutForm();\n\n  private formElement: any;\n\n  componentDidLoad() {\n    if (this.formElement) {\n      // this.formElement.setSyncDataToStore(this.checkoutFormHook.syncFormDataToStore);\n      // this.formElement.setCustomValidation(this.checkoutFormHook.handlePhoneValidation);\n      // this.formElement.setGetRelatedFields((id: string) => {\n      //   const phoneRelatedFields = this.checkoutFormHook.getPhoneRelatedFields();\n      //   return phoneRelatedFields.includes(id) ? phoneRelatedFields : [];\n      // });\n      // this.formElement.setShouldValidateField(this.checkoutFormHook.shouldValidateField);\n    }\n  }\n\n  @Listen('change')\n  handleFormChange(event: CustomEvent) {\n    const formData = event.detail;\n\n    // Guard: ignore unrelated change events without proper payload\n    if (!formData || typeof formData !== 'object') {\n      return;\n    }\n\n    if (formData?.isValidPhoneNumber === 'true' && this.formElement) {\n      this.formElement.clearError('phoneNumber');\n    }\n\n    if (\n      (formData as any).phoneNumber !== undefined &&\n      this.formElement &&\n      this.formElement.hasSubmitted\n    ) {\n      if (this.checkoutFormHook.handlePhoneValidation) {\n        const updatedErrors = this.checkoutFormHook.handlePhoneValidation(\n          formData,\n          this.formElement.errors || {},\n        );\n        this.formElement.errors = updatedErrors;\n      }\n    }\n  }\n\n  private handleSubmit = (formData: FormData) => {\n    this.submit.emit(formData);\n  };\n\n  private handleChange = (formData: FormData) => {\n    this.change.emit(formData);\n  };\n\n  @Method()\n  async resetValidation() {\n    if (this.formElement) {\n      await this.formElement.resetValidation();\n    }\n  }\n\n  render() {\n    return (\n      <rebill-form\n        ref={el => (this.formElement = el)}\n        validationSchema={this.validationSchema}\n        initialData={this.initialData}\n        onSubmit={(event: CustomEvent) => this.handleSubmit(event.detail)}\n        onChange={(event: CustomEvent) => this.handleChange(event.detail)}\n        renderForm={this.renderForm}\n      />\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-BDqkAG1R.js → p-4NckTb-f.js}

@@ -99,10 +99,10 @@ const InputText = /*@__PURE__*/ proxyCustomElement(class InputText extends H {
             'has-left-icon': !!this.leftIcon,
             'has-right-icon': !!this.rightIcon,
         };
-        return (h("div", { key: 'bdcd492afc8670f807e8bc2eda5671b690b3b680', class: "input-container" }, !isFloating && this.label && (h("label", { key: 'ef332abdaf7830f01066a7f1bb580eb69220e314', class: `input-label ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '70a407c2ae85a99be27d9b9bab5fc046c43eeac0', class: wrapperClasses }, this.leftIcon && (h("div", { key: 'b77249d00af2657afd0892779e2de03e0bfba86e', class: "icon-left" }, h("rebill-icon", { key: '85ab5630734f6b10e673c5ae81fa45524f391c1c', name: this.leftIcon }))), h("input", { key: '59dcf8c1cb0ff9128e31fa680bb9e4aca5090fd1', ref: el => (this.inputElement = el), type: "text", class: inputClasses, placeholder: isFloating ? this.label : this.placeholder, value: this.value, onInput: this.onInput, onBlur: this.onBlur, disabled: this.disabled, style: {
+        return (h("div", { key: '9715fd693cd0522a82933813ebc5f4fefdd783cd', class: "input-container" }, !isFloating && this.label && (h("label", { key: '7f845ed5b3981c5ae813f15488ea4282671ebbbc', class: `input-label ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '1b4da7a6cd434631d7d2f2bb2ac803945d907f0d', class: wrapperClasses }, this.leftIcon && (h("div", { key: '203fc582d830e66c814db1fd2d89df711a2fa98c', class: "icon-left" }, h("rebill-icon", { key: 'd07ff9a559fde0cb987b5b6bf15f27c2a56da98a', name: this.leftIcon }))), h("input", { key: 'dcc5481c4f14b6db1cd04d36dcff3ae6cd1a8e29', ref: el => (this.inputElement = el), type: "text", class: inputClasses, placeholder: isFloating ? this.label : this.placeholder, value: this.value, onInput: this.onInput, onBlur: this.onBlur, disabled: this.disabled, style: {
                 paddingLeft: this.leftIcon ? '2.5rem' : '0.75rem',
                 paddingRight: this.clearable || this.rightIcon ? '2.5rem' : '0.75rem',
-            } }), isFloating && h("label", { key: 'e6e423bacd8ee0f15f506c260b5ade107123cec6', class: "input-text__input-label input-label" }, this.label), this.clearable && this.value && (h("div", { key: '56888e7c3df93e8c9b8eb339f21d2a4640506a28', class: "icon-right", onClick: this.onClear }, h("rebill-icon", { key: 'fcf8a10d36863322ff6a311cd06b2456eba0b51b', name: "x" }))), this.rightIcon && !this.clearable && (h("div", { key: '1d505168e2e6284dbc1cda87fee24346e7387834', class: "icon-right", onClick: this.onRightIconClick }, h("rebill-icon", { key: '8006541ac0ce29efe546a197052a4de507822152', name: this.rightIcon })))), this.error && h("span", { key: '72cdd59316e8fd3b3d4f8ce3be6772fdae5c18f1', class: "error-message" }, this.error)));
+            } }), isFloating && h("label", { key: 'b1483a82c7be5c5953055d79225ef2fbb69302dd', class: "input-text__input-label input-label" }, this.label), this.clearable && this.value && (h("div", { key: '39899b5b2ccc583e81a1c8b311cca2a1350135fc', class: "icon-right", onClick: this.onClear }, h("rebill-icon", { key: 'a20f00edd2773d8e65f68a800d758624ea82ed6b', name: "x" }))), this.rightIcon && !this.clearable && (h("div", { key: '558bf2e4ab613aee555a5427a8ca44f77a4c0493', class: "icon-right", onClick: this.onRightIconClick }, h("rebill-icon", { key: 'fd8207c267b0c1b893586daa870ce4477ec67bef', name: this.rightIcon })))), this.error && h("span", { key: '7c9d7b847a5a8f2bcedc3941e9504919dfcfb64c', class: "error-message" }, this.error)));
     }
     static get style() { return inputTextCss; }
 }, [256, "rebill-input-text", {
@@ -140,6 +140,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { InputText as I, defineCustomElement as d };
-//# sourceMappingURL=p-BDqkAG1R.js.map
+//# sourceMappingURL=p-4NckTb-f.js.map
 
-//# sourceMappingURL=p-BDqkAG1R.js.map
+//# sourceMappingURL=p-4NckTb-f.js.map

package/dist/components/{p-BDqkAG1R.js.map → p-4NckTb-f.js.map}

@@ -1 +1 @@
-{"file":"p-BDqkAG1R.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/inputs/input-text/input-text.css?tag=rebill-input-text","src/components/shared/inputs/input-text/input-text.tsx"],"sourcesContent":["@import '../shared-input.css';\n\n.input-wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.input-element {\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.icon-left,\n.icon-right {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.icon-left {\n  left: 0.75rem;\n  color: var(--rebill-color-text-secondary-light);\n}\n\n.icon-right {\n  right: 0.75rem;\n  cursor: pointer;\n  color: var(--rebill-color-text-secondary-light);\n}\n\n.input-element.input-error:focus {\n  flex-direction: column;\n  box-shadow: 0 0 0 2px var(--rebill-color-error-light);\n}\n\n/* Floating label styles */\n.floating-label {\n  position: relative;\n}\n\n.floating-label .input-text__input-label {\n  position: absolute;\n  top: 50%;\n  left: 0.75rem;\n  transform: translateY(-50%);\n  color: var(--rebill-color-text-secondary-light);\n  transition: all 0.1s ease-in-out;\n  pointer-events: none;\n}\n\n.floating-label .input-element::placeholder {\n  color: transparent;\n}\n\n.floating-label .input-element:focus ~ .input-text__input-label,\n.floating-label .input-element:not(:placeholder-shown) ~ .input-text__input-label {\n  top: 0;\n  font-size: 0.62rem;\n  color: var(--rebill-color-text-secondary);\n  background-color: var(--rebill-color-background);\n  padding: 0 4px;\n  left: 0.75rem;\n}\n\n.floating-label.has-left-icon .input-text__input-label {\n  left: 2.5rem;\n}\n\n/* Disabled state styles */\n.input-element:disabled {\n  color: var(--rebill-color-neutrals-500);\n}\n\n.input-wrapper:has(.input-element:disabled) .icon-left,\n.input-wrapper:has(.input-element:disabled) .icon-right {\n  color: var(--rebill-color-text-secondary-light) !important;\n}\n","import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'rebill-input-text',\n  styleUrl: 'input-text.css',\n  shadow: false,\n})\nexport class InputText {\n  @Element() el: HTMLElement;\n  private inputElement: HTMLInputElement;\n\n  /** Etiqueta que se muestra arriba del input */\n  @Prop() label: string = '';\n  /** Placeholder del input */\n  @Prop() placeholder: string = '';\n  /** Valor del input */\n  @Prop({ mutable: true, reflect: true }) value: string = '';\n  /** Mensaje de error */\n  @Prop() error: string = '';\n  /** ID del input */\n  @Prop() id: string = '';\n  /** Estado deshabilitado */\n  @Prop() disabled: boolean = false;\n  /** Icono a la izquierda */\n  @Prop() leftIcon: string;\n  /** Icono a la derecha */\n  @Prop() rightIcon: string;\n  /** Permitir limpiar el input */\n  @Prop() clearable: boolean = false;\n  /** Variacion de estilo del input */\n  @Prop() variant: 'default' | 'floating' = 'default';\n  /** Convertir texto a mayúsculas automáticamente */\n  @Prop() uppercase: boolean = false;\n  /** Evento al cambiar el valor */\n  @Event() input: EventEmitter<{ id: string; value: string }>;\n  /** Evento al hacer clic en el icono derecho */\n  @Event() rightIconClick: EventEmitter<{ id: string }>;\n  /** Evento al salir del input */\n  @Event() blur: EventEmitter<{ id: string; value: string }>;\n  @Listen('change', { target: 'document' })\n  handleFormChange(event: CustomEvent) {\n    const formData = event.detail;\n    if (formData && this.id in formData) {\n      this.value = formData[this.id];\n    }\n  }\n\n  private onInput = (event: Event) => {\n    if (this.disabled) return;\n    const input = event.target as HTMLInputElement;\n    let inputValue = input.value;\n\n    if (this.id === 'email') {\n      inputValue = inputValue.toLowerCase();\n      input.value = inputValue;\n    } else if (this.uppercase) {\n      inputValue = inputValue.toUpperCase();\n      input.value = inputValue;\n    }\n\n    this.value = inputValue;\n    this.input.emit({ id: this.id, value: this.value });\n  };\n\n  private onClear = () => {\n    if (this.disabled) return;\n    this.value = '';\n    this.input.emit({ id: this.id, value: this.value });\n  };\n\n  private onRightIconClick = () => {\n    if (this.disabled) return;\n    this.rightIconClick.emit({ id: this.id });\n  };\n\n  private onBlur = () => {\n    const trimmedValue = this.value.trim();\n\n    if (trimmedValue !== this.value) {\n      this.value = trimmedValue;\n      this.input.emit({ id: this.id, value: this.value });\n    }\n\n    this.blur.emit({ id: this.id, value: this.value });\n  };\n\n  @Method()\n  async getInputElement(): Promise<HTMLInputElement | null> {\n    return this.inputElement;\n  }\n\n  render() {\n    const isFloating = this.variant === 'floating';\n\n    const inputClasses = {\n      'input-element': true,\n      'input-error': !!this.error,\n    };\n\n    const wrapperClasses = {\n      'input-wrapper': true,\n      'floating-label': isFloating,\n      'has-left-icon': !!this.leftIcon,\n      'has-right-icon': !!this.rightIcon,\n    };\n\n    return (\n      <div class=\"input-container\">\n        {!isFloating && this.label && (\n          <label class={`input-label ${this.disabled ? 'disabled' : ''}`}>{this.label}</label>\n        )}\n        <div class={wrapperClasses}>\n          {this.leftIcon && (\n            <div class=\"icon-left\">\n              <rebill-icon name={this.leftIcon}></rebill-icon>\n            </div>\n          )}\n          <input\n            ref={el => (this.inputElement = el)}\n            type=\"text\"\n            class={inputClasses}\n            placeholder={isFloating ? this.label : this.placeholder}\n            value={this.value}\n            onInput={this.onInput}\n            onBlur={this.onBlur}\n            disabled={this.disabled}\n            style={{\n              paddingLeft: this.leftIcon ? '2.5rem' : '0.75rem',\n              paddingRight: this.clearable || this.rightIcon ? '2.5rem' : '0.75rem',\n            }}\n          />\n          {isFloating && <label class=\"input-text__input-label input-label\">{this.label}</label>}\n          {this.clearable && this.value && (\n            <div class=\"icon-right\" onClick={this.onClear}>\n              <rebill-icon name=\"x\"></rebill-icon>\n            </div>\n          )}\n          {this.rightIcon && !this.clearable && (\n            <div class=\"icon-right\" onClick={this.onRightIconClick}>\n              <rebill-icon name={this.rightIcon}></rebill-icon>\n            </div>\n          )}\n        </div>\n        {this.error && <span class=\"error-message\">{this.error}</span>}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-4NckTb-f.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/inputs/input-text/input-text.css?tag=rebill-input-text","src/components/shared/inputs/input-text/input-text.tsx"],"sourcesContent":["@import '../shared-input.css';\n\n.input-wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.input-element {\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.icon-left,\n.icon-right {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.icon-left {\n  left: 0.75rem;\n  color: var(--rebill-color-text-secondary-light);\n}\n\n.icon-right {\n  right: 0.75rem;\n  cursor: pointer;\n  color: var(--rebill-color-text-secondary-light);\n}\n\n.input-element.input-error:focus {\n  flex-direction: column;\n  box-shadow: 0 0 0 2px var(--rebill-color-error-light);\n}\n\n/* Floating label styles */\n.floating-label {\n  position: relative;\n}\n\n.floating-label .input-text__input-label {\n  position: absolute;\n  top: 50%;\n  left: 0.75rem;\n  transform: translateY(-50%);\n  color: var(--rebill-color-text-secondary-light);\n  transition: all 0.1s ease-in-out;\n  pointer-events: none;\n}\n\n.floating-label .input-element::placeholder {\n  color: transparent;\n}\n\n.floating-label .input-element:focus ~ .input-text__input-label,\n.floating-label .input-element:not(:placeholder-shown) ~ .input-text__input-label {\n  top: 0;\n  font-size: 0.62rem;\n  color: var(--rebill-color-text-secondary);\n  background-color: var(--rebill-color-background);\n  padding: 0 4px;\n  left: 0.75rem;\n}\n\n.floating-label.has-left-icon .input-text__input-label {\n  left: 2.5rem;\n}\n\n/* Disabled state styles */\n.input-element:disabled {\n  color: var(--rebill-color-neutrals-500);\n}\n\n.input-wrapper:has(.input-element:disabled) .icon-left,\n.input-wrapper:has(.input-element:disabled) .icon-right {\n  color: var(--rebill-color-text-secondary-light) !important;\n}\n","import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'rebill-input-text',\n  styleUrl: 'input-text.css',\n  shadow: false,\n})\nexport class InputText {\n  @Element() el: HTMLElement;\n  private inputElement: HTMLInputElement;\n\n  /** Etiqueta que se muestra arriba del input */\n  @Prop() label: string = '';\n  /** Placeholder del input */\n  @Prop() placeholder: string = '';\n  /** Valor del input */\n  @Prop({ mutable: true, reflect: true }) value: string = '';\n  /** Mensaje de error */\n  @Prop() error: string = '';\n  /** ID del input */\n  @Prop() id: string = '';\n  /** Estado deshabilitado */\n  @Prop() disabled: boolean = false;\n  /** Icono a la izquierda */\n  @Prop() leftIcon: string;\n  /** Icono a la derecha */\n  @Prop() rightIcon: string;\n  /** Permitir limpiar el input */\n  @Prop() clearable: boolean = false;\n  /** Variacion de estilo del input */\n  @Prop() variant: 'default' | 'floating' = 'default';\n  /** Convertir texto a mayúsculas automáticamente */\n  @Prop() uppercase: boolean = false;\n  /** Evento al cambiar el valor */\n  @Event() input: EventEmitter<{ id: string; value: string }>;\n  /** Evento al hacer clic en el icono derecho */\n  @Event() rightIconClick: EventEmitter<{ id: string }>;\n  /** Evento al salir del input */\n  @Event() blur: EventEmitter<{ id: string; value: string }>;\n  @Listen('change', { target: 'document' })\n  handleFormChange(event: CustomEvent) {\n    const formData = event.detail;\n    if (formData && this.id in formData) {\n      this.value = formData[this.id];\n    }\n  }\n\n  private onInput = (event: Event) => {\n    if (this.disabled) return;\n    const input = event.target as HTMLInputElement;\n    let inputValue = input.value;\n\n    if (this.id === 'email') {\n      inputValue = inputValue.toLowerCase();\n      input.value = inputValue;\n    } else if (this.uppercase) {\n      inputValue = inputValue.toUpperCase();\n      input.value = inputValue;\n    }\n\n    this.value = inputValue;\n    this.input.emit({ id: this.id, value: this.value });\n  };\n\n  private onClear = () => {\n    if (this.disabled) return;\n    this.value = '';\n    this.input.emit({ id: this.id, value: this.value });\n  };\n\n  private onRightIconClick = () => {\n    if (this.disabled) return;\n    this.rightIconClick.emit({ id: this.id });\n  };\n\n  private onBlur = () => {\n    const trimmedValue = this.value.trim();\n\n    if (trimmedValue !== this.value) {\n      this.value = trimmedValue;\n      this.input.emit({ id: this.id, value: this.value });\n    }\n\n    this.blur.emit({ id: this.id, value: this.value });\n  };\n\n  @Method()\n  async getInputElement(): Promise<HTMLInputElement | null> {\n    return this.inputElement;\n  }\n\n  render() {\n    const isFloating = this.variant === 'floating';\n\n    const inputClasses = {\n      'input-element': true,\n      'input-error': !!this.error,\n    };\n\n    const wrapperClasses = {\n      'input-wrapper': true,\n      'floating-label': isFloating,\n      'has-left-icon': !!this.leftIcon,\n      'has-right-icon': !!this.rightIcon,\n    };\n\n    return (\n      <div class=\"input-container\">\n        {!isFloating && this.label && (\n          <label class={`input-label ${this.disabled ? 'disabled' : ''}`}>{this.label}</label>\n        )}\n        <div class={wrapperClasses}>\n          {this.leftIcon && (\n            <div class=\"icon-left\">\n              <rebill-icon name={this.leftIcon}></rebill-icon>\n            </div>\n          )}\n          <input\n            ref={el => (this.inputElement = el)}\n            type=\"text\"\n            class={inputClasses}\n            placeholder={isFloating ? this.label : this.placeholder}\n            value={this.value}\n            onInput={this.onInput}\n            onBlur={this.onBlur}\n            disabled={this.disabled}\n            style={{\n              paddingLeft: this.leftIcon ? '2.5rem' : '0.75rem',\n              paddingRight: this.clearable || this.rightIcon ? '2.5rem' : '0.75rem',\n            }}\n          />\n          {isFloating && <label class=\"input-text__input-label input-label\">{this.label}</label>}\n          {this.clearable && this.value && (\n            <div class=\"icon-right\" onClick={this.onClear}>\n              <rebill-icon name=\"x\"></rebill-icon>\n            </div>\n          )}\n          {this.rightIcon && !this.clearable && (\n            <div class=\"icon-right\" onClick={this.onRightIconClick}>\n              <rebill-icon name={this.rightIcon}></rebill-icon>\n            </div>\n          )}\n        </div>\n        {this.error && <span class=\"error-message\">{this.error}</span>}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CzOgUoiH.js → p-6gwr59D_.js}

@@ -1,12 +1,12 @@
 import { proxyCustomElement, H, h } from './p-8BpuJ_V5.js';
 import { e as instance, I as I18nService, f as formatAmount, s as state } from './p-Be63Lt_2.js';
 import { a as formatDate } from './p-CYpzJT4H.js';
-import { d as defineCustomElement$7 } from './p-DwZ2ffr1.js';
-import { d as defineCustomElement$6 } from './p-WGf68eDg.js';
+import { d as defineCustomElement$7 } from './p-wMEGQ8Q5.js';
+import { d as defineCustomElement$6 } from './p-Dp6bUSN1.js';
 import { d as defineCustomElement$5 } from './p-sOHrcM75.js';
-import { d as defineCustomElement$4 } from './p-BFb0C4n-.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-BDqkAG1R.js';
+import { d as defineCustomElement$2 } from './p-4NckTb-f.js';
 import { d as defineCustomElement$1 } from './p-T8LQxh_O.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-CzOgUoiH.js.map
+//# sourceMappingURL=p-6gwr59D_.js.map
 
-//# sourceMappingURL=p-CzOgUoiH.js.map
+//# sourceMappingURL=p-6gwr59D_.js.map

package/dist/components/{p-CzOgUoiH.js.map → p-6gwr59D_.js.map}

@@ -1 +1 @@
-{"file":"p-CzOgUoiH.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}
+{"file":"p-6gwr59D_.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}