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

package/dist/components/{p-CSeC5LGG.js.map → p-Ch0U0Vmb.js.map}

@@ -1 +1 @@
-{"file":"p-CSeC5LGG.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18n"],"sources":["src/components/shared/mode-sandbox/mode-sandbox-mobile.css?tag=rebill-mode-sandbox-mobile","src/components/shared/mode-sandbox/mode-sandbox-mobile.tsx"],"sourcesContent":[":host {\n  display: flex;\n  position: relative;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n}\n\n.mode-sandbox-mobile__test-mode-container {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 8px;\n  width: 100%;\n}\n\n.mode-sandbox-mobile__overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 5;\n  animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  pointer-events: auto;\n  cursor: pointer;\n}\n\n.mode-sandbox-mobile__test-mode-chip-mobile {\n  display: flex;\n  width: 100%;\n  min-width: auto;\n  max-width: 100%;\n  height: 40px;\n  background: #ffffff;\n  border: 1px solid #e5e7eb;\n  border-radius: 20px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  position: relative;\n  z-index: 20;\n}\n\n.mode-sandbox-mobile__chip-content-mobile {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  justify-content: flex-end;\n  min-height: 24px;\n  flex-shrink: 0;\n  width: 100%;\n  margin: 8px;\n}\n\n.mode-sandbox-mobile__info-icon {\n  display: flex;\n  align-items: center;\n}\n\n.mode-sandbox-mobile__test-mode-chip-mobile.expanded .mode-sandbox-mobile__chip-content-mobile {\n  justify-content: flex-end;\n  width: 100%;\n}\n\n.mode-sandbox-mobile__cards-dropdown-panel-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px;\n}\n\n/* Sección de Docs */\n.mode-sandbox-mobile__docs-section {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  margin-left: 0;\n  transition: background-color 0.2s ease;\n  justify-content: flex-end;\n  padding: 8px;\n  margin-top: 8px;\n}\n\n.mode-sandbox-mobile__cards-dropdown-panel {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  width: 100%;\n  background: #ffffff;\n  border-top: none;\n  border-left: 1px solid #e5e7eb;\n  border-right: 1px solid #e5e7eb;\n  border-bottom: 1px solid #e5e7eb;\n  margin-top: 16px;\n  z-index: 25;\n  animation: expandDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  transform-origin: top center;\n}\n\n.mode-sandbox-mobile__card-section {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n.mode-sandbox-mobile__header-content {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 8px;\n}\n\n.mode-sandbox-mobile__card-details {\n  background: #fafafa;\n  border-radius: 8px;\n  border: 1px solid #e5e7eb;\n  margin: 8px;\n  min-height: 208px;\n  display: flex;\n  flex-direction: column;\n}\n\n.mode-sandbox-mobile__card-row {\n  display: flex;\n  gap: 12px;\n  align-items: stretch;\n  background: #ffffff;\n  justify-content: space-around;\n  border-radius: 8px;\n  border: 1px solid #e5e7eb;\n  height: auto;\n  padding: 8px;\n  margin: 8px;\n}\n\n.mode-sandbox-mobile__card-value {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n}\n\n.mode-sandbox-mobile__field-value {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  max-height: 20px;\n}\n\n.mode-sandbox-mobile__copy-button {\n  align-items: center;\n  margin-left: auto;\n  margin-right: 0;\n}\n\n.mode-sandbox-mobile__icon-button {\n  margin-left: auto;\n  margin-right: 16px;\n}\n\n/* Animaciones */\n\n@keyframes expandDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px) scaleY(0.9);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scaleY(1);\n  }\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n","import { Component, Element, h, State } from '@stencil/core';\nimport i18n from '../../../i18n/i18n.config';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { copyToClipboard } from '../../../utils/clipboard';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\n\n@Component({\n  tag: 'rebill-mode-sandbox-mobile',\n  styleUrl: 'mode-sandbox-mobile.css',\n  shadow: false,\n})\nexport class RebillTestModeChipMobile {\n  @Element() el: HTMLElement;\n  @State() isPanelVisible = false;\n  @State() currentLanguage: string = I18nService.getCurrentLanguage();\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.currentLanguage = I18nService.getCurrentLanguage();\n  };\n\n  private togglePanel = () => {\n    this.isPanelVisible = !this.isPanelVisible;\n  };\n\n  private handleCopy = (text: string) => {\n    copyToClipboard(text);\n    this.isPanelVisible = false;\n  };\n\n  private handleDocsClick = () => {\n    window.open('https://v3.docs.rebill.com/sdk/checkout', '_blank');\n  };\n\n  private renderBasicChip() {\n    return (\n      <div class=\"mode-sandbox-mobile__chip-content-mobile\">\n        <div class=\"mode-sandbox-mobile__info-icon\">\n          <rebill-icon name=\"circle-info\" size=\"24px\" color={COLORS_ENUM.ORANGE} />\n        </div>\n        <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n          {I18nService.translate('sandbox.testMode')}\n        </rebill-typography>\n        <div class=\"mode-sandbox-mobile__icon-button\">\n          <rebill-button variant=\"text\" size=\"small\" onClick={this.togglePanel}>\n            <rebill-icon name=\"hamburger\" />\n          </rebill-button>\n        </div>\n      </div>\n    );\n  }\n\n  private renderCardsPanel() {\n    return (\n      <div class=\"mode-sandbox-mobile__cards-dropdown-panel\">\n        <div class=\"mode-sandbox-mobile__cards-dropdown-panel-header\">\n          <rebill-icon name=\"card-test\" />\n          <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n            {I18nService.translate('sandbox.cardTest')}\n          </rebill-typography>\n        </div>\n        <div class=\"mode-sandbox-mobile__card-details\">\n          <div class=\"mode-sandbox-mobile__card-section\">\n            <div class=\"mode-sandbox-mobile__header-content\">\n              <rebill-icon name=\"succes\" color={COLORS_ENUM.GREEN} />\n              <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                {I18nService.translate('sandbox.successPayment')}\n              </rebill-typography>\n            </div>\n            <div class=\"mode-sandbox-mobile__card-row\">\n              <div class=\"mode-sandbox-mobile__card-value\">\n                <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n                  {I18nService.translate('sandbox.cardNumber')}\n                </rebill-typography>\n                <div class=\"mode-sandbox-mobile__field-value\">\n                  <rebill-icon name=\"visa\" />\n                  <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                    4539148803436467\n                  </rebill-typography>\n                </div>\n              </div>\n              <div class=\"mode-sandbox-mobile__card-value\">\n                <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n                  {I18nService.translate('sandbox.exp')}\n                </rebill-typography>\n                <div class=\"mode-sandbox-mobile__field-value\">\n                  <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                    01/99\n                  </rebill-typography>\n                </div>\n              </div>\n              <div class=\"mode-sandbox-mobile__card-value\">\n                <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n                  {I18nService.translate('sandbox.cvv')}\n                </rebill-typography>\n                <div class=\"mode-sandbox-mobile__field-value mode-sandbox-mobile__field-value-with-copy\">\n                  <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                    123\n                  </rebill-typography>\n                  <div class=\"mode-sandbox-mobile__copy-button\">\n                    <rebill-button\n                      variant=\"text\"\n                      size=\"small\"\n                      onClick={() => this.handleCopy('4539148803436467 01/99 123')}\n                    >\n                      <rebill-icon name=\"copy\" />\n                    </rebill-button>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"mode-sandbox-mobile__card-section\">\n            <div class=\"mode-sandbox-mobile__header-content\">\n              <rebill-icon name=\"rejected\" color={COLORS_ENUM.ERROR} />\n              <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                {I18nService.translate('sandbox.rejectedPayment')}\n              </rebill-typography>\n            </div>\n            <div class=\"mode-sandbox-mobile__card-row\">\n              <div class=\"mode-sandbox-mobile__card-value\">\n                <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n                  {I18nService.translate('sandbox.cardNumber')}\n                </rebill-typography>\n                <div class=\"mode-sandbox-mobile__field-value\">\n                  <rebill-icon name=\"visa\" />\n                  <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                    4485364739527352\n                  </rebill-typography>\n                </div>\n              </div>\n              <div class=\"mode-sandbox-mobile__card-value\">\n                <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n                  {I18nService.translate('sandbox.exp')}\n                </rebill-typography>\n                <div class=\"mode-sandbox-mobile__field-value\">\n                  <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                    01/99\n                  </rebill-typography>\n                </div>\n              </div>\n              <div class=\"mode-sandbox-mobile__card-value\">\n                <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n                  {I18nService.translate('sandbox.cvv')}\n                </rebill-typography>\n                <div class=\"mode-sandbox-mobile__field-value mode-sandbox-mobile__field-value-with-copy\">\n                  <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                    123\n                  </rebill-typography>\n                  <div class=\"mode-sandbox-mobile__copy-button\">\n                    <rebill-button\n                      variant=\"text\"\n                      size=\"small\"\n                      onClick={() => this.handleCopy('4485364739527352 01/99 123')}\n                    >\n                      <rebill-icon name=\"copy\" />\n                    </rebill-button>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"mode-sandbox-mobile__docs-section\" onClick={this.handleDocsClick}>\n          <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY}>\n            {I18nService.translate('sandbox.docs')}\n          </rebill-typography>\n          <rebill-icon name=\"external-link\" />\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <div\n        class={`mode-sandbox-mobile__test-mode-container ${this.isPanelVisible ? 'cards-visible' : ''}`}\n      >\n        {this.isPanelVisible && <div class=\"mode-sandbox-mobile__overlay\"></div>}\n        <div\n          class={`mode-sandbox-mobile__test-mode-chip-mobile ${this.isPanelVisible ? 'expanded' : ''}`}\n        >\n          {this.renderBasicChip()}\n        </div>\n        {this.isPanelVisible && this.renderCardsPanel()}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-Ch0U0Vmb.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18n"],"sources":["src/components/shared/mode-sandbox/mode-sandbox-mobile.css?tag=rebill-mode-sandbox-mobile","src/components/shared/mode-sandbox/mode-sandbox-mobile.tsx"],"sourcesContent":[":host {\n  display: flex;\n  position: relative;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n}\n\n.mode-sandbox-mobile__test-mode-container {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 8px;\n  width: 100%;\n}\n\n.mode-sandbox-mobile__overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 5;\n  animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  pointer-events: auto;\n  cursor: pointer;\n}\n\n.mode-sandbox-mobile__test-mode-chip-mobile {\n  display: flex;\n  width: 100%;\n  min-width: auto;\n  max-width: 100%;\n  height: 40px;\n  background: #ffffff;\n  border: 1px solid #e5e7eb;\n  border-radius: 20px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  position: relative;\n  z-index: 20;\n}\n\n.mode-sandbox-mobile__chip-content-mobile {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  justify-content: flex-end;\n  min-height: 24px;\n  flex-shrink: 0;\n  width: 100%;\n  margin: 8px;\n}\n\n.mode-sandbox-mobile__info-icon {\n  display: flex;\n  align-items: center;\n}\n\n.mode-sandbox-mobile__test-mode-chip-mobile.expanded .mode-sandbox-mobile__chip-content-mobile {\n  justify-content: flex-end;\n  width: 100%;\n}\n\n.mode-sandbox-mobile__cards-dropdown-panel-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px;\n}\n\n/* Sección de Docs */\n.mode-sandbox-mobile__docs-section {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  margin-left: 0;\n  transition: background-color 0.2s ease;\n  justify-content: flex-end;\n  padding: 8px;\n  margin-top: 8px;\n}\n\n.mode-sandbox-mobile__cards-dropdown-panel {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  width: 100%;\n  background: #ffffff;\n  border-top: none;\n  border-left: 1px solid #e5e7eb;\n  border-right: 1px solid #e5e7eb;\n  border-bottom: 1px solid #e5e7eb;\n  margin-top: 16px;\n  z-index: 25;\n  animation: expandDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  transform-origin: top center;\n}\n\n.mode-sandbox-mobile__card-section {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n.mode-sandbox-mobile__header-content {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 8px;\n}\n\n.mode-sandbox-mobile__card-details {\n  background: #fafafa;\n  border-radius: 8px;\n  border: 1px solid #e5e7eb;\n  margin: 8px;\n  min-height: 208px;\n  display: flex;\n  flex-direction: column;\n}\n\n.mode-sandbox-mobile__card-row {\n  display: flex;\n  gap: 12px;\n  align-items: stretch;\n  background: #ffffff;\n  justify-content: space-around;\n  border-radius: 8px;\n  border: 1px solid #e5e7eb;\n  height: auto;\n  padding: 8px;\n  margin: 8px;\n}\n\n.mode-sandbox-mobile__card-value {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n}\n\n.mode-sandbox-mobile__field-value {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  max-height: 20px;\n}\n\n.mode-sandbox-mobile__copy-button {\n  align-items: center;\n  margin-left: auto;\n  margin-right: 0;\n}\n\n.mode-sandbox-mobile__icon-button {\n  margin-left: auto;\n  margin-right: 16px;\n}\n\n/* Animaciones */\n\n@keyframes expandDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px) scaleY(0.9);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scaleY(1);\n  }\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n","import { Component, Element, h, State } from '@stencil/core';\nimport i18n from '../../../i18n/i18n.config';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { copyToClipboard } from '../../../utils/clipboard';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\n\n@Component({\n  tag: 'rebill-mode-sandbox-mobile',\n  styleUrl: 'mode-sandbox-mobile.css',\n  shadow: false,\n})\nexport class RebillTestModeChipMobile {\n  @Element() el: HTMLElement;\n  @State() isPanelVisible = false;\n  @State() currentLanguage: string = I18nService.getCurrentLanguage();\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.currentLanguage = I18nService.getCurrentLanguage();\n  };\n\n  private togglePanel = () => {\n    this.isPanelVisible = !this.isPanelVisible;\n  };\n\n  private handleCopy = (text: string) => {\n    copyToClipboard(text);\n    this.isPanelVisible = false;\n  };\n\n  private handleDocsClick = () => {\n    window.open('https://v3.docs.rebill.com/sdk/checkout', '_blank');\n  };\n\n  private renderBasicChip() {\n    return (\n      <div class=\"mode-sandbox-mobile__chip-content-mobile\">\n        <div class=\"mode-sandbox-mobile__info-icon\">\n          <rebill-icon name=\"circle-info\" size=\"24px\" color={COLORS_ENUM.ORANGE} />\n        </div>\n        <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n          {I18nService.translate('sandbox.testMode')}\n        </rebill-typography>\n        <div class=\"mode-sandbox-mobile__icon-button\">\n          <rebill-button variant=\"text\" size=\"small\" onClick={this.togglePanel}>\n            <rebill-icon name=\"hamburger\" />\n          </rebill-button>\n        </div>\n      </div>\n    );\n  }\n\n  private renderCardsPanel() {\n    return (\n      <div class=\"mode-sandbox-mobile__cards-dropdown-panel\">\n        <div class=\"mode-sandbox-mobile__cards-dropdown-panel-header\">\n          <rebill-icon name=\"card-test\" />\n          <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n            {I18nService.translate('sandbox.cardTest')}\n          </rebill-typography>\n        </div>\n        <div class=\"mode-sandbox-mobile__card-details\">\n          <div class=\"mode-sandbox-mobile__card-section\">\n            <div class=\"mode-sandbox-mobile__header-content\">\n              <rebill-icon name=\"succes\" color={COLORS_ENUM.GREEN} />\n              <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                {I18nService.translate('sandbox.successPayment')}\n              </rebill-typography>\n            </div>\n            <div class=\"mode-sandbox-mobile__card-row\">\n              <div class=\"mode-sandbox-mobile__card-value\">\n                <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n                  {I18nService.translate('sandbox.cardNumber')}\n                </rebill-typography>\n                <div class=\"mode-sandbox-mobile__field-value\">\n                  <rebill-icon name=\"visa\" />\n                  <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                    4539148803436467\n                  </rebill-typography>\n                </div>\n              </div>\n              <div class=\"mode-sandbox-mobile__card-value\">\n                <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n                  {I18nService.translate('sandbox.exp')}\n                </rebill-typography>\n                <div class=\"mode-sandbox-mobile__field-value\">\n                  <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                    01/99\n                  </rebill-typography>\n                </div>\n              </div>\n              <div class=\"mode-sandbox-mobile__card-value\">\n                <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n                  {I18nService.translate('sandbox.cvv')}\n                </rebill-typography>\n                <div class=\"mode-sandbox-mobile__field-value mode-sandbox-mobile__field-value-with-copy\">\n                  <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                    123\n                  </rebill-typography>\n                  <div class=\"mode-sandbox-mobile__copy-button\">\n                    <rebill-button\n                      variant=\"text\"\n                      size=\"small\"\n                      onClick={() => this.handleCopy('4539148803436467 01/99 123')}\n                    >\n                      <rebill-icon name=\"copy\" />\n                    </rebill-button>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"mode-sandbox-mobile__card-section\">\n            <div class=\"mode-sandbox-mobile__header-content\">\n              <rebill-icon name=\"rejected\" color={COLORS_ENUM.ERROR} />\n              <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                {I18nService.translate('sandbox.rejectedPayment')}\n              </rebill-typography>\n            </div>\n            <div class=\"mode-sandbox-mobile__card-row\">\n              <div class=\"mode-sandbox-mobile__card-value\">\n                <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n                  {I18nService.translate('sandbox.cardNumber')}\n                </rebill-typography>\n                <div class=\"mode-sandbox-mobile__field-value\">\n                  <rebill-icon name=\"visa\" />\n                  <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                    4485364739527352\n                  </rebill-typography>\n                </div>\n              </div>\n              <div class=\"mode-sandbox-mobile__card-value\">\n                <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n                  {I18nService.translate('sandbox.exp')}\n                </rebill-typography>\n                <div class=\"mode-sandbox-mobile__field-value\">\n                  <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                    01/99\n                  </rebill-typography>\n                </div>\n              </div>\n              <div class=\"mode-sandbox-mobile__card-value\">\n                <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n                  {I18nService.translate('sandbox.cvv')}\n                </rebill-typography>\n                <div class=\"mode-sandbox-mobile__field-value mode-sandbox-mobile__field-value-with-copy\">\n                  <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                    123\n                  </rebill-typography>\n                  <div class=\"mode-sandbox-mobile__copy-button\">\n                    <rebill-button\n                      variant=\"text\"\n                      size=\"small\"\n                      onClick={() => this.handleCopy('4485364739527352 01/99 123')}\n                    >\n                      <rebill-icon name=\"copy\" />\n                    </rebill-button>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"mode-sandbox-mobile__docs-section\" onClick={this.handleDocsClick}>\n          <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY}>\n            {I18nService.translate('sandbox.docs')}\n          </rebill-typography>\n          <rebill-icon name=\"external-link\" />\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <div\n        class={`mode-sandbox-mobile__test-mode-container ${this.isPanelVisible ? 'cards-visible' : ''}`}\n      >\n        {this.isPanelVisible && <div class=\"mode-sandbox-mobile__overlay\"></div>}\n        <div\n          class={`mode-sandbox-mobile__test-mode-chip-mobile ${this.isPanelVisible ? 'expanded' : ''}`}\n        >\n          {this.renderBasicChip()}\n        </div>\n        {this.isPanelVisible && this.renderCardsPanel()}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CamHvHq5.js → p-ChYpVv-Q.js}

@@ -2,8 +2,8 @@ import { proxyCustomElement, H, createEvent, h } from './p-8BpuJ_V5.js';
 import { I as I18nService } from './p-5WvVvcYf.js';
 import { C as COLORS_ENUM } from './p-C5Pu-n-i.js';
 import { d as defineCustomElement$4 } from './p-Np4T5oyp.js';
-import { d as defineCustomElement$3 } from './p-xKyxKtdF.js';
-import { d as defineCustomElement$2 } from './p-Bnocq8Cb.js';
+import { d as defineCustomElement$3 } from './p-30DP4s-1.js';
+import { d as defineCustomElement$2 } from './p-mSjgruQE.js';
 import { d as defineCustomElement$1 } from './p-BaBXKrWI.js';
 
 const addressFormCss = ":host{display:block}.address-form-container{width:100%;margin-bottom:24px}.address-container{display:flex;flex-direction:column;gap:16px}.search-link-wrapper{margin-top:8px}@media (min-width: 1025px){.state-zip-row{grid-template-columns:1fr 1fr !important}}.state-zip-row{display:grid;gap:16px}.search-link-wrapper{display:flex;justify-content:flex-start;margin-top:8px}.additional-information{background:none;border:none;color:var(--rebill-color-primary);cursor:pointer;font-size:14px;padding:4px 0;text-decoration:underline;text-decoration-color:var(--rebill-color-text-secondary)}";
@@ -86,6 +86,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { AddressForm as A, defineCustomElement as d };
-//# sourceMappingURL=p-CamHvHq5.js.map
+//# sourceMappingURL=p-ChYpVv-Q.js.map
 
-//# sourceMappingURL=p-CamHvHq5.js.map
+//# sourceMappingURL=p-ChYpVv-Q.js.map

package/dist/components/{p-CamHvHq5.js.map → p-ChYpVv-Q.js.map}

@@ -1 +1 @@
-{"file":"p-CamHvHq5.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/checkout/address/address-form/address-form.css?tag=rebill-address-form","src/components/checkout/address/address-form/address-form.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.address-form-container {\n  width: 100%;\n  margin-bottom: 24px;\n}\n\n.address-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n.search-link-wrapper {\n  margin-top: 8px;\n}\n\n@media (min-width: 1025px) {\n  .state-zip-row {\n    grid-template-columns: 1fr 1fr !important;\n  }\n}\n\n.state-zip-row {\n  display: grid;\n  gap: 16px;\n}\n\n.search-link-wrapper {\n  display: flex;\n  justify-content: flex-start;\n  margin-top: 8px;\n}\n\n.additional-information {\n  background: none;\n  border: none;\n  color: var(--rebill-color-primary);\n  cursor: pointer;\n  font-size: 14px;\n  padding: 4px 0;\n  text-decoration: underline;\n  text-decoration-color: var(--rebill-color-text-secondary);\n}\n","import { Component, Event, EventEmitter, h, Prop, State } from '@stencil/core';\nimport { I18nService } from '../../../../i18n/i18n.service';\nimport { COLORS_ENUM } from '../../../../utils/color-class-mapper';\n@Component({\n  tag: 'rebill-address-form',\n  styleUrl: 'address-form.css',\n  shadow: false,\n})\nexport class AddressForm {\n  @Prop() addressType: 'billing' | 'shipping' = 'billing';\n  @Prop() countryOptions: { label: string; value: string }[] = [];\n  @Prop() stateOptions: { label: string; value: string }[] = [];\n  @Prop() errors?: Record<string, string> | null = null;\n  @Prop() disabled: boolean = false;\n  @State() showAdditionalInformation: boolean = false;\n  @Event() fieldChanged: EventEmitter<{ field: string; value: string }>;\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  private handleInput = (field: string, value: string) => {\n    this.fieldChanged.emit({ field, value });\n  };\n\n  private handleAdditionalInformation = () => {\n    this.showAdditionalInformation = !this.showAdditionalInformation;\n  };\n\n  render() {\n    const translationKey = this.addressType === 'shipping' ? 'shippingAddress' : 'billingAddress';\n\n    return (\n      <div class=\"address-form-container\">\n        <div class=\"address-container\">\n          <rebill-input-select\n            error={this.translateError(this.errors?.[`${this.addressType}-country`])}\n            id={`${this.addressType}-country`}\n            options={this.countryOptions}\n            placeholder={I18nService.translate(`${translationKey}.countryPlaceholder`)}\n            onInput={e => this.handleInput('country', (e as CustomEvent).detail.value)}\n            searchable={true}\n            searchPlaceholder={I18nService.translate(`search.searchCountries`)}\n            disabled={this.disabled}\n          />\n          <rebill-input-text\n            error={this.translateError(this.errors?.[`${this.addressType}-address`])}\n            id={`${this.addressType}-address`}\n            placeholder={I18nService.translate(`${translationKey}.addressPlaceholder`)}\n            variant=\"floating\"\n            label={I18nService.translate(`${translationKey}.addressPlaceholder`)}\n            onInput={e => this.handleInput('address', (e as CustomEvent).detail.value)}\n            disabled={this.disabled}\n          />\n          <rebill-input-text\n            error={this.translateError(this.errors?.[`${this.addressType}-city`])}\n            id={`${this.addressType}-city`}\n            placeholder={I18nService.translate(`${translationKey}.cityPlaceholder`)}\n            variant=\"floating\"\n            label={I18nService.translate(`${translationKey}.cityPlaceholder`)}\n            onInput={e => this.handleInput('city', (e as CustomEvent).detail.value)}\n            disabled={this.disabled}\n          />\n          <div class=\"state-zip-row\">\n            <rebill-input-select\n              error={this.translateError(this.errors?.[`${this.addressType}-state`])}\n              id={`${this.addressType}-state`}\n              options={this.stateOptions}\n              placeholder={I18nService.translate(`${translationKey}.statePlaceholder`)}\n              disabled={this.disabled || this.stateOptions.length === 0}\n              onInput={e => this.handleInput('state', (e as CustomEvent).detail.value)}\n              searchable={true}\n              searchPlaceholder={I18nService.translate(`${translationKey}.searchStates`)}\n            />\n            <rebill-input-text\n              error={this.translateError(this.errors?.[`${this.addressType}-zip`])}\n              id={`${this.addressType}-zip`}\n              placeholder={I18nService.translate(`${translationKey}.zipPlaceholder`)}\n              variant=\"floating\"\n              label={I18nService.translate(`${translationKey}.zipPlaceholder`)}\n              onInput={e => this.handleInput('zip', (e as CustomEvent).detail.value)}\n              disabled={this.disabled}\n            />\n          </div>\n          {this.showAdditionalInformation && (\n            <rebill-input-text\n              error={this.translateError(this.errors?.[`${this.addressType}-addInformation`])}\n              id={`${this.addressType}-addInformation`}\n              placeholder={I18nService.translate(`${translationKey}.addInformationPlaceholder`)}\n              variant=\"floating\"\n              label={I18nService.translate(`${translationKey}.addInformationPlaceholder`)}\n              onInput={e => this.handleInput('addInformation', (e as CustomEvent).detail.value)}\n              disabled={this.disabled}\n            />\n          )}\n        </div>\n        <div class=\"search-link-wrapper\">\n          {!this.showAdditionalInformation && (\n            <button\n              class=\"additional-information\"\n              type=\"button\"\n              onClick={this.handleAdditionalInformation}\n            >\n              <rebill-typography\n                variant=\"subtitle2\"\n                color={COLORS_ENUM.SECONDARY}\n                class=\"footer-link\"\n              >\n                {I18nService.translate(`${translationKey}.additionalInformation`)}\n              </rebill-typography>\n            </button>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-ChYpVv-Q.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/checkout/address/address-form/address-form.css?tag=rebill-address-form","src/components/checkout/address/address-form/address-form.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.address-form-container {\n  width: 100%;\n  margin-bottom: 24px;\n}\n\n.address-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n.search-link-wrapper {\n  margin-top: 8px;\n}\n\n@media (min-width: 1025px) {\n  .state-zip-row {\n    grid-template-columns: 1fr 1fr !important;\n  }\n}\n\n.state-zip-row {\n  display: grid;\n  gap: 16px;\n}\n\n.search-link-wrapper {\n  display: flex;\n  justify-content: flex-start;\n  margin-top: 8px;\n}\n\n.additional-information {\n  background: none;\n  border: none;\n  color: var(--rebill-color-primary);\n  cursor: pointer;\n  font-size: 14px;\n  padding: 4px 0;\n  text-decoration: underline;\n  text-decoration-color: var(--rebill-color-text-secondary);\n}\n","import { Component, Event, EventEmitter, h, Prop, State } from '@stencil/core';\nimport { I18nService } from '../../../../i18n/i18n.service';\nimport { COLORS_ENUM } from '../../../../utils/color-class-mapper';\n@Component({\n  tag: 'rebill-address-form',\n  styleUrl: 'address-form.css',\n  shadow: false,\n})\nexport class AddressForm {\n  @Prop() addressType: 'billing' | 'shipping' = 'billing';\n  @Prop() countryOptions: { label: string; value: string }[] = [];\n  @Prop() stateOptions: { label: string; value: string }[] = [];\n  @Prop() errors?: Record<string, string> | null = null;\n  @Prop() disabled: boolean = false;\n  @State() showAdditionalInformation: boolean = false;\n  @Event() fieldChanged: EventEmitter<{ field: string; value: string }>;\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  private handleInput = (field: string, value: string) => {\n    this.fieldChanged.emit({ field, value });\n  };\n\n  private handleAdditionalInformation = () => {\n    this.showAdditionalInformation = !this.showAdditionalInformation;\n  };\n\n  render() {\n    const translationKey = this.addressType === 'shipping' ? 'shippingAddress' : 'billingAddress';\n\n    return (\n      <div class=\"address-form-container\">\n        <div class=\"address-container\">\n          <rebill-input-select\n            error={this.translateError(this.errors?.[`${this.addressType}-country`])}\n            id={`${this.addressType}-country`}\n            options={this.countryOptions}\n            placeholder={I18nService.translate(`${translationKey}.countryPlaceholder`)}\n            onInput={e => this.handleInput('country', (e as CustomEvent).detail.value)}\n            searchable={true}\n            searchPlaceholder={I18nService.translate(`search.searchCountries`)}\n            disabled={this.disabled}\n          />\n          <rebill-input-text\n            error={this.translateError(this.errors?.[`${this.addressType}-address`])}\n            id={`${this.addressType}-address`}\n            placeholder={I18nService.translate(`${translationKey}.addressPlaceholder`)}\n            variant=\"floating\"\n            label={I18nService.translate(`${translationKey}.addressPlaceholder`)}\n            onInput={e => this.handleInput('address', (e as CustomEvent).detail.value)}\n            disabled={this.disabled}\n          />\n          <rebill-input-text\n            error={this.translateError(this.errors?.[`${this.addressType}-city`])}\n            id={`${this.addressType}-city`}\n            placeholder={I18nService.translate(`${translationKey}.cityPlaceholder`)}\n            variant=\"floating\"\n            label={I18nService.translate(`${translationKey}.cityPlaceholder`)}\n            onInput={e => this.handleInput('city', (e as CustomEvent).detail.value)}\n            disabled={this.disabled}\n          />\n          <div class=\"state-zip-row\">\n            <rebill-input-select\n              error={this.translateError(this.errors?.[`${this.addressType}-state`])}\n              id={`${this.addressType}-state`}\n              options={this.stateOptions}\n              placeholder={I18nService.translate(`${translationKey}.statePlaceholder`)}\n              disabled={this.disabled || this.stateOptions.length === 0}\n              onInput={e => this.handleInput('state', (e as CustomEvent).detail.value)}\n              searchable={true}\n              searchPlaceholder={I18nService.translate(`${translationKey}.searchStates`)}\n            />\n            <rebill-input-text\n              error={this.translateError(this.errors?.[`${this.addressType}-zip`])}\n              id={`${this.addressType}-zip`}\n              placeholder={I18nService.translate(`${translationKey}.zipPlaceholder`)}\n              variant=\"floating\"\n              label={I18nService.translate(`${translationKey}.zipPlaceholder`)}\n              onInput={e => this.handleInput('zip', (e as CustomEvent).detail.value)}\n              disabled={this.disabled}\n            />\n          </div>\n          {this.showAdditionalInformation && (\n            <rebill-input-text\n              error={this.translateError(this.errors?.[`${this.addressType}-addInformation`])}\n              id={`${this.addressType}-addInformation`}\n              placeholder={I18nService.translate(`${translationKey}.addInformationPlaceholder`)}\n              variant=\"floating\"\n              label={I18nService.translate(`${translationKey}.addInformationPlaceholder`)}\n              onInput={e => this.handleInput('addInformation', (e as CustomEvent).detail.value)}\n              disabled={this.disabled}\n            />\n          )}\n        </div>\n        <div class=\"search-link-wrapper\">\n          {!this.showAdditionalInformation && (\n            <button\n              class=\"additional-information\"\n              type=\"button\"\n              onClick={this.handleAdditionalInformation}\n            >\n              <rebill-typography\n                variant=\"subtitle2\"\n                color={COLORS_ENUM.SECONDARY}\n                class=\"footer-link\"\n              >\n                {I18nService.translate(`${translationKey}.additionalInformation`)}\n              </rebill-typography>\n            </button>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CtFu9Z9D.js → p-CypPi9fK.js}

@@ -3353,10 +3353,10 @@ const InputPhone = /*@__PURE__*/ proxyCustomElement(class InputPhone extends H {
         const translatedError = this.translateError(this.error);
         const translatedValidationError = this.translateError(this.validationError);
         const displayError = translatedValidationError || translatedError;
-        return (h("div", { key: '93eab235bf7e6c8b066eccf5217843c47cae7060', class: "input-container" }, h("div", { key: '1882948328830eb6d12fec9a948e2f72c6c57141', class: inputClasses }, h("div", { key: '3ab0db212bf7dcabac8a19fdfc699af2523801c6', class: "input-combo-select country-selector", onClick: this.toggleDropdown }, h("span", { key: '8b962c76b799c661eda46eea81319ae9209a45e5', class: "flag" }, this.selectedCountry.flag), h("span", { key: '4ad929ede1ec71a3b08a4277e8b29fc2f766c841', class: "dial-code" }, this.selectedCountry.dialCode), h("span", { key: '6dbe62e602de2fa0dd7d37703801ef992ae982e8', class: `dropdown-arrow ${this.isDropdownOpen ? 'open' : ''}` }, "\u25BC")), this.isDropdownOpen && (h("div", { key: '3caee85fddec1eae868d1caf1c0da3ce12c0d370', class: "country-dropdown" }, this.searchable && (h("div", { key: '819fe233e3cf13d732e5f62a1e9e2e683a5e7304', class: "search-container", onClick: this.handleSearchClick }, h("div", { key: 'e2ddd5531c02fda461b521722c7be14494d7bc7d', class: "search-input-wrapper" }, h("rebill-icon", { key: '4ac0d06fa9dc2030ea812fdd063e437e831a8ebd', name: "search", size: "16px", class: "search-icon" }), h("input", { key: 'f005e7c8ccebda04eadfbe50a9d1a01f6b9e79b6', 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: '555a03acec479967f787b4ddb07410f5ef5160d8', type: "button", class: "clear-search", onClick: event => {
+        return (h("div", { key: '86806d2c401c9de8a1267dfee742f05ad301a6b8', class: "input-container" }, h("div", { key: '3efa804b16358cc980aba0133830499e17c93a52', class: inputClasses }, h("div", { key: 'a871c178e883e2df6ce482b3002514e995cb92b8', class: "input-combo-select country-selector", onClick: this.toggleDropdown }, h("span", { key: '834868a9602efc68f24c97dc93b1feac23e811c9', class: "flag" }, this.selectedCountry.flag), h("span", { key: '49b3566e44b2cadfa387534fe121522bcfd38616', class: "dial-code" }, this.selectedCountry.dialCode), h("span", { key: '230c7dd4bad5ed9e04fc24a8a2cf40afa59e380b', class: `dropdown-arrow ${this.isDropdownOpen ? 'open' : ''}` }, "\u25BC")), this.isDropdownOpen && (h("div", { key: 'f6d8f07f4d077c986fc853f447feb8e45057b2c1', class: "country-dropdown" }, this.searchable && (h("div", { key: '7b1e49fddc1dcee59e55e7441fe427a67c789933', class: "search-container", onClick: this.handleSearchClick }, h("div", { key: 'e36e23c80c8615e8557fb453ad9217bc02679bb0', class: "search-input-wrapper" }, h("rebill-icon", { key: 'f1a62cad8488bb87f90324e96fb9c5db31ae3586', name: "search", size: "16px", class: "search-icon" }), h("input", { key: '44204f2d039489fa9486cf2d27c76e7a01e0e9e8', 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: '88713e09141e9c0378939f5a7de68520b8b56802', type: "button", class: "clear-search", onClick: event => {
                 event.stopPropagation();
                 this.clearSearch();
-            }, "aria-label": "Clear search" }, h("rebill-icon", { key: 'c37eb08ec3ea630a3069a2e205e1bf89998d15c8', 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: '04436bbeca6c611f3683eb5849ca6fd1d73a1e1f', 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: '3c951eaab6a3b907939e2b6f4c2a4bcc920acca3', class: "error-message" }, displayError)));
+            }, "aria-label": "Clear search" }, h("rebill-icon", { key: '34b6821cbf7eb8cf45781edb17e7b92a9029fe8b', 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: 'a3e90dbc14a2a0b1f41bfb9fe2c3a4be30b52913', 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: 'eef5aefcd44f05877670f2818e0290d8e2480f6d', class: "error-message" }, displayError)));
     }
     static get style() { return inputPhoneCss; }
 }, [256, "rebill-input-phone", {
@@ -3400,6 +3400,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { InputPhone as I, defineCustomElement as d };
-//# sourceMappingURL=p-CtFu9Z9D.js.map
+//# sourceMappingURL=p-CypPi9fK.js.map
 
-//# sourceMappingURL=p-CtFu9Z9D.js.map
+//# sourceMappingURL=p-CypPi9fK.js.map