rebill-web-components-sdk 1.8.22 → 1.8.24

package/dist/cjs/otp-component_7.cjs.entry.js

@@ -879,7 +879,7 @@ const Otp = class {
 };
 Otp.style = otpCss;
 
-const modalOverlayCss = ".modal-overlay{position:fixed;top:0;left:0;right:0;background-color:transparent;display:flex;align-items:center;justify-content:center;z-index:10000;padding:12px 16px;box-sizing:border-box}.modal-content{background:white;border-radius:8px;padding:16px 20px;width:350px;box-shadow:0 4px 12px -2px rgba(0, 0, 0, 0.15),\n    0 2px 4px -1px rgba(0, 0, 0, 0.1);position:relative;display:flex;align-items:center;gap:12px}.modal-content .alert{margin:0;flex:1;padding:0;background:transparent;border:none;box-shadow:none}.modal-content .alert{background-color:transparent !important;border-color:transparent !important}.modal-content .alert-message{display:flex;flex-direction:column;gap:4px}.modal-content .close-button{position:absolute;top:8px;right:8px;width:20px;height:20px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color 0.2s ease;padding:0;margin:0;outline:none;box-shadow:none;line-height:1}.modal-content .close-button:focus{outline:none;box-shadow:none}.modal-content .close-button:hover{background-color:#f0f0f0}.modal-content .close-button rebill-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center}@media (max-width: 768px){.modal-overlay{padding:8px 12px}.modal-content{padding:12px 16px;flex-direction:column;gap:8px;text-align:center}.modal-content .close-button{width:100%}}";
+const modalOverlayCss = ".modal-overlay{position:fixed;top:0;left:0;right:0;background-color:transparent;display:flex;align-items:center;justify-content:center;z-index:10000;padding:12px 16px;box-sizing:border-box}.modal-content{background:white;border-radius:8px;padding:16px 20px;width:350px;box-shadow:0 4px 12px -2px rgba(0, 0, 0, 0.15),\n    0 2px 4px -1px rgba(0, 0, 0, 0.1);position:relative;display:flex;align-items:center;gap:12px}.modal-content .alert{margin:0;flex:1;padding:0;background:transparent;border:none;box-shadow:none}.modal-content .alert{background-color:transparent !important;border-color:transparent !important}.modal-content .alert-message{display:flex;flex-direction:column;gap:4px}.modal-content .close-button{position:absolute;top:8px;right:8px;width:20px;height:20px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color 0.2s ease;padding:0;margin:0;outline:none;box-shadow:none;line-height:1}.modal-content .close-button:focus{outline:none;box-shadow:none}.modal-content .close-button:hover{background-color:#f0f0f0}.modal-content .close-button rebill-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center}@media (max-width: 768px){.modal-overlay{padding:8px 12px}.modal-content{padding:12px 16px;width:100%;max-width:350px;flex-direction:row;gap:12px;text-align:left}.modal-content .close-button{position:absolute;top:8px;right:8px;width:20px;height:20px;flex-shrink:0}}";
 
 const ModalOverlay = class {
     constructor(hostRef) {

package/dist/cjs/rebill-container.rebill-input-checkbox.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"rebill-container.rebill-input-checkbox.entry.cjs.js","sources":["src/components/shared/layouts/generics/container.tsx","src/components/shared/inputs/input-checkbox/input-checkbox.css?tag=rebill-input-checkbox","src/components/shared/inputs/input-checkbox/input-checkbox.tsx"],"sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'rebill-container',\n  shadow: false,\n})\nexport class Container {\n  @Prop() maxWidth: string = '1200px';\n  @Prop() padding: string = '1rem';\n  @Prop() fluid: boolean = false;\n\n  render() {\n    const style = {\n      maxWidth: this.fluid ? '100%' : this.maxWidth,\n      padding: this.padding,\n      margin: '0 auto',\n      width: '100%',\n      boxSizing: 'border-box',\n    };\n\n    return (\n      <div style={style}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n","@import '../shared-input.css';\n\n.checkbox-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n.checkbox-label {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n\n.checkbox-label.disabled {\n  cursor: not-allowed !important;\n  opacity: 1;\n}\n\n.checkbox-element {\n  appearance: none;\n  width: 16px;\n  height: 16px;\n  border: 1.5px solid var(--rebill-color-border-primary);\n  border-radius: 4px;\n  background: var(--rebill-color-background);\n  margin-right: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition:\n    border-color 0.15s,\n    box-shadow 0.15s;\n  position: relative;\n  cursor: pointer;\n}\n\n.checkbox-element:disabled {\n  border-color: var(--rebill-color-disabled);\n  cursor: not-allowed;\n}\n\n.checkbox-element:checked {\n  background-color: var(--rebill-color-primary);\n  border-color: var(--rebill-color-primary);\n}\n\n.checkbox-element:checked:disabled {\n  background-color: var(--rebill-color-disabled);\n  border-color: var(--rebill-color-disabled);\n}\n\n.checkbox-element:checked::after {\n  content: '';\n  display: block;\n  position: absolute;\n  left: 4.5px;\n  top: 1.5px;\n  width: 2.5px;\n  height: 7px;\n  border: solid var(--rebill-color-background);\n  border-width: 0 1.5px 1.5px 0;\n  transform: rotate(45deg);\n}\n\n.checkbox-element:disabled:checked::after {\n  border-color: var(--rebill-color-background);\n}\n\n.checkbox-error {\n  border-color: var(--rebill-color-error) !important;\n}\n\n.label-text {\n  user-select: none;\n  font-weight: 400;\n}\n","import { Component, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'rebill-input-checkbox',\n  styleUrl: 'input-checkbox.css',\n  shadow: false,\n})\nexport class InputCheckbox {\n  /** Etiqueta que se muestra a la derecha del checkbox */\n  @Prop() label: string = '';\n  /** Estado del checkbox */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n  /** Mensaje de error */\n  @Prop() error: string = '';\n  /** ID del checkbox */\n  @Prop() id: string = '';\n  /** Estado deshabilitado */\n  @Prop() disabled: boolean = false;\n  /** Evento al cambiar el valor */\n  @Event() input: EventEmitter<{ id: string; value: boolean }>;\n\n  @Listen('change', { target: 'document' })\n  handleFormChange(event: CustomEvent) {\n    const formData = event.detail;\n    if (formData && this.id in formData) {\n      this.checked = formData[this.id];\n    }\n  }\n\n  private onCheckboxChange = (event: Event) => {\n    if (this.disabled) return;\n    const checkbox = event.target as HTMLInputElement;\n    this.checked = checkbox.checked;\n    this.input.emit({ id: this.id, value: this.checked });\n  };\n\n  render() {\n    return (\n      <div class=\"checkbox-container input-container\">\n        <label class={`checkbox-label input-label ${this.disabled ? 'disabled' : ''}`}>\n          <input\n            id={this.id}\n            type=\"checkbox\"\n            class={`checkbox-element ${this.error ? 'checkbox-error' : ''}`}\n            checked={this.checked}\n            onChange={this.onCheckboxChange}\n            disabled={this.disabled}\n          />\n          <span class=\"label-text\">{this.label}</span>\n        </label>\n        {this.error && <span class=\"error-message\">{this.error}</span>}\n      </div>\n    );\n  }\n}\n"],"names":["h"],"mappings":";;;;MAMa,SAAS,GAAA,MAAA;;;;IACZ,QAAQ,GAAW,QAAQ;IAC3B,OAAO,GAAW,MAAM;IACxB,KAAK,GAAY,KAAK;IAE9B,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAG;AACZ,YAAA,QAAQ,EAAE,IAAI,CAAC,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC,QAAQ;YAC7C,OAAO,EAAE,IAAI,CAAC,OAAO;AACrB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,SAAS,EAAE,YAAY;SACxB;QAED,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,KAAK,EAAA,EACfA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;ACvBZ,MAAM,gBAAgB,GAAG,ggFAAggF;;MCO5gF,aAAa,GAAA,MAAA;;;;;;IAEhB,KAAK,GAAW,EAAE;;IAEc,OAAO,GAAY,KAAK;;IAExD,KAAK,GAAW,EAAE;;IAElB,EAAE,GAAW,EAAE;;IAEf,QAAQ,GAAY,KAAK;;AAExB,IAAA,KAAK;AAGd,IAAA,gBAAgB,CAAC,KAAkB,EAAA;AACjC,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM;QAC7B,IAAI,QAAQ,IAAI,IAAI,CAAC,EAAE,IAAI,QAAQ,EAAE;YACnC,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;;;AAI5B,IAAA,gBAAgB,GAAG,CAAC,KAAY,KAAI;QAC1C,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAA0B;AACjD,QAAA,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,OAAO;AAC/B,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;AACvD,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oCAAoC,EAAA,EAC7CA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAE,CAAA,2BAAA,EAA8B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE,CAAA,EAAA,EAC3EA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,CAAA,iBAAA,EAAoB,IAAI,CAAC,KAAK,GAAG,gBAAgB,GAAG,EAAE,CAAE,CAAA,EAC/D,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,CAAA,EACFA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CACtC,EACP,IAAI,CAAC,KAAK,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,eAAe,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,CAC1D;;;;;;;;"}
+{"version":3,"file":"rebill-container.rebill-input-checkbox.entry.cjs.js","sources":["src/components/shared/layouts/generics/container.tsx","src/components/shared/inputs/input-checkbox/input-checkbox.css?tag=rebill-input-checkbox","src/components/shared/inputs/input-checkbox/input-checkbox.tsx"],"sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'rebill-container',\n  shadow: false,\n})\nexport class Container {\n  @Prop() maxWidth: string = '1200px';\n  @Prop() padding: string = '1rem';\n  @Prop() fluid: boolean = false;\n\n  render() {\n    const style = {\n      maxWidth: this.fluid ? '100%' : this.maxWidth,\n      padding: this.padding,\n      margin: '0 auto',\n      width: '100%',\n      boxSizing: 'border-box',\n    };\n\n    return (\n      <div style={style}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n","@import '../shared-input.css';\n\n.checkbox-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n.checkbox-label {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n\n.checkbox-label.disabled {\n  cursor: not-allowed !important;\n  opacity: 1;\n}\n\n.checkbox-element {\n  appearance: none;\n  width: 16px;\n  height: 16px;\n  border: 1.5px solid var(--rebill-color-border-primary);\n  border-radius: 4px;\n  background: var(--rebill-color-background);\n  margin-right: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition:\n    border-color 0.15s,\n    box-shadow 0.15s;\n  position: relative;\n  cursor: pointer;\n}\n\n.checkbox-element:disabled {\n  border-color: var(--rebill-color-disabled);\n  cursor: not-allowed;\n}\n\n.checkbox-element:checked {\n  background-color: var(--rebill-color-primary);\n  border-color: var(--rebill-color-primary);\n}\n\n.checkbox-element:checked:disabled {\n  background-color: var(--rebill-color-disabled);\n  border-color: var(--rebill-color-disabled);\n}\n\n.checkbox-element:checked::after {\n  content: '';\n  display: block;\n  position: absolute;\n  left: 4.5px;\n  top: 1.5px;\n  width: 2.5px;\n  height: 7px;\n  border: solid var(--rebill-color-background);\n  border-width: 0 1.5px 1.5px 0;\n  transform: rotate(45deg);\n}\n\n.checkbox-element:disabled:checked::after {\n  border-color: var(--rebill-color-background);\n}\n\n.checkbox-error {\n  border-color: var(--rebill-color-error) !important;\n}\n\n.label-text {\n  user-select: none;\n  font-weight: 400;\n}\n","import { Component, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'rebill-input-checkbox',\n  styleUrl: 'input-checkbox.css',\n  shadow: false,\n})\nexport class InputCheckbox {\n  /** Etiqueta que se muestra a la derecha del checkbox */\n  @Prop() label: string = '';\n  /** Estado del checkbox */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n  /** Mensaje de error */\n  @Prop() error: string = '';\n  /** ID del checkbox */\n  @Prop() id: string = '';\n  /** Estado deshabilitado */\n  @Prop() disabled: boolean = false;\n  /** Evento al cambiar el valor */\n  @Event() input: EventEmitter<{ id: string; value: boolean }>;\n\n  @Listen('change', { target: 'document' })\n  handleFormChange(event: CustomEvent) {\n    const formData = event.detail;\n    if (formData && this.id in formData) {\n      this.checked = formData[this.id];\n    }\n  }\n\n  private onCheckboxChange = (event: Event) => {\n    if (this.disabled) return;\n    const checkbox = event.target as HTMLInputElement;\n    this.checked = checkbox.checked;\n    this.input.emit({ id: this.id, value: this.checked });\n  };\n\n  render() {\n    return (\n      <div class=\"checkbox-container input-container\">\n        <label class={`checkbox-label input-label ${this.disabled ? 'disabled' : ''}`}>\n          <input\n            id={this.id}\n            type=\"checkbox\"\n            class={`checkbox-element ${this.error ? 'checkbox-error' : ''}`}\n            checked={this.checked}\n            onChange={this.onCheckboxChange}\n            disabled={this.disabled}\n          />\n          <span class=\"label-text\">{this.label}</span>\n        </label>\n        {this.error && <span class=\"error-message\">{this.error}</span>}\n      </div>\n    );\n  }\n}\n"],"names":["h"],"mappings":";;;;MAMa,SAAS,GAAA,MAAA;;;;IACZ,QAAQ,GAAW,QAAQ;IAC3B,OAAO,GAAW,MAAM;IACxB,KAAK,GAAY,KAAK;IAE9B,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAG;AACZ,YAAA,QAAQ,EAAE,IAAI,CAAC,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC,QAAQ;YAC7C,OAAO,EAAE,IAAI,CAAC,OAAO;AACrB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,SAAS,EAAE,YAAY;SACxB;QAED,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,KAAK,EAAA,EACfA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;ACvBZ,MAAM,gBAAgB,GAAG,+mFAA+mF;;MCO3nF,aAAa,GAAA,MAAA;;;;;;IAEhB,KAAK,GAAW,EAAE;;IAEc,OAAO,GAAY,KAAK;;IAExD,KAAK,GAAW,EAAE;;IAElB,EAAE,GAAW,EAAE;;IAEf,QAAQ,GAAY,KAAK;;AAExB,IAAA,KAAK;AAGd,IAAA,gBAAgB,CAAC,KAAkB,EAAA;AACjC,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM;QAC7B,IAAI,QAAQ,IAAI,IAAI,CAAC,EAAE,IAAI,QAAQ,EAAE;YACnC,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;;;AAI5B,IAAA,gBAAgB,GAAG,CAAC,KAAY,KAAI;QAC1C,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAA0B;AACjD,QAAA,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,OAAO;AAC/B,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;AACvD,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oCAAoC,EAAA,EAC7CA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAE,CAAA,2BAAA,EAA8B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE,CAAA,EAAA,EAC3EA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,CAAA,iBAAA,EAAoB,IAAI,CAAC,KAAK,GAAG,gBAAgB,GAAG,EAAE,CAAE,CAAA,EAC/D,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,CAAA,EACFA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CACtC,EACP,IAAI,CAAC,KAAK,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,eAAe,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,CAC1D;;;;;;;;"}

package/dist/cjs/rebill-container_2.cjs.entry.js

@@ -21,7 +21,7 @@ const Container = class {
     }
 };
 
-const inputCheckboxCss = ".input-container{display:flex;flex-direction:column}.input-label{font-size:0.875rem;color:var(--rebill-color-text-primary);font-weight:500;margin-bottom:0.375rem}.input-label.disabled{cursor:not-allowed}.input-element{border-radius:var(--input-group-inner-border-radius, 8px);border:1.5px solid var(--rebill-color-border);padding:10px 14px;font-size:0.875rem;color:var(--rebill-color-text-primary);outline:none;transition:border-color 0.2s;background:var(--rebill-color-background);height:38.33px;box-sizing:border-box}.input-element.input-error{border-color:var(--rebill-color-error)}.input-element:disabled{background-color:var(--rebill-color-background);border-color:var(--rebill-color-disabled);color:var(--rebill-color-text-secondary);cursor:not-allowed;opacity:0.7}select.input-element{padding:10px 30px 10px 14px;appearance:none;cursor:pointer}select.input-element:disabled{cursor:not-allowed}.input-element:focus{border-color:var(--rebill-color-primary)}.input-element:disabled:focus{border-color:var(--rebill-color-disabled)}.input-element::placeholder{color:var(--rebill-color-text-secondary-light);font-size:0.875rem;opacity:1}.select-wrapper.disabled .select-icon{color:var(--rebill-color-disabled)}.error-message{color:var(--rebill-color-error);font-size:0.75rem;margin-top:0.375rem}.checkbox-container{display:flex;flex-direction:column;gap:0.25rem}.checkbox-label{display:flex;align-items:center;cursor:pointer}.checkbox-label.disabled{cursor:not-allowed !important;opacity:1}.checkbox-element{appearance:none;width:16px;height:16px;border:1.5px solid var(--rebill-color-border-primary);border-radius:4px;background:var(--rebill-color-background);margin-right:10px;display:flex;align-items:center;justify-content:center;transition:border-color 0.15s,\n    box-shadow 0.15s;position:relative;cursor:pointer}.checkbox-element:disabled{border-color:var(--rebill-color-disabled);cursor:not-allowed}.checkbox-element:checked{background-color:var(--rebill-color-primary);border-color:var(--rebill-color-primary)}.checkbox-element:checked:disabled{background-color:var(--rebill-color-disabled);border-color:var(--rebill-color-disabled)}.checkbox-element:checked::after{content:'';display:block;position:absolute;left:4.5px;top:1.5px;width:2.5px;height:7px;border:solid var(--rebill-color-background);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}.checkbox-element:disabled:checked::after{border-color:var(--rebill-color-background)}.checkbox-error{border-color:var(--rebill-color-error) !important}.label-text{user-select:none;font-weight:400}";
+const inputCheckboxCss = ".input-container{display:flex;flex-direction:column}.input-label{font-size:0.875rem;color:var(--rebill-color-text-primary);font-weight:500;margin-bottom:0.375rem}.input-label.disabled{cursor:not-allowed}.input-element{border-radius:var(--input-group-inner-border-radius, 8px);border:1.5px solid var(--rebill-color-border);padding:10px 14px;font-size:0.875rem;color:var(--rebill-color-text-primary);outline:none;transition:border-color 0.2s;background:var(--rebill-color-background);height:38.33px;box-sizing:border-box}.input-element.input-error{border-color:var(--rebill-color-error)}.input-element:disabled{background-color:var(--rebill-color-background);border-color:var(--rebill-color-disabled);color:var(--rebill-color-text-secondary);cursor:not-allowed;opacity:0.7}select.input-element{padding:10px 30px 10px 14px;appearance:none;cursor:pointer}select.input-element:disabled{cursor:not-allowed}.input-element:focus{border-color:var(--rebill-color-primary)}.input-element:disabled:focus{border-color:var(--rebill-color-disabled)}.input-element::placeholder{color:var(--rebill-color-text-secondary-light);font-size:0.875rem;opacity:1}.select-wrapper.disabled .select-icon{color:var(--rebill-color-disabled)}.error-message{color:var(--rebill-color-error);font-size:0.75rem;margin-top:0.375rem}@media screen and (max-width: 768px){.input-element{font-size:1rem}.input-element::placeholder{font-size:1rem}}.checkbox-container{display:flex;flex-direction:column;gap:0.25rem}.checkbox-label{display:flex;align-items:center;cursor:pointer}.checkbox-label.disabled{cursor:not-allowed !important;opacity:1}.checkbox-element{appearance:none;width:16px;height:16px;border:1.5px solid var(--rebill-color-border-primary);border-radius:4px;background:var(--rebill-color-background);margin-right:10px;display:flex;align-items:center;justify-content:center;transition:border-color 0.15s,\n    box-shadow 0.15s;position:relative;cursor:pointer}.checkbox-element:disabled{border-color:var(--rebill-color-disabled);cursor:not-allowed}.checkbox-element:checked{background-color:var(--rebill-color-primary);border-color:var(--rebill-color-primary)}.checkbox-element:checked:disabled{background-color:var(--rebill-color-disabled);border-color:var(--rebill-color-disabled)}.checkbox-element:checked::after{content:'';display:block;position:absolute;left:4.5px;top:1.5px;width:2.5px;height:7px;border:solid var(--rebill-color-background);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}.checkbox-element:disabled:checked::after{border-color:var(--rebill-color-background)}.checkbox-error{border-color:var(--rebill-color-error) !important}.label-text{user-select:none;font-weight:400}";
 
 const InputCheckbox = class {
     constructor(hostRef) {

package/dist/cjs/rebill-input-select.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-C-VTnc0I.js');
 var i18n_service = require('./i18n.service-CMXo-Ku3.js');
 
-const inputSelectCss = ".input-container{display:flex;flex-direction:column}.input-label{font-size:0.875rem;color:var(--rebill-color-text-primary);font-weight:500;margin-bottom:0.375rem}.input-label.disabled{cursor:not-allowed}.input-element{border-radius:var(--input-group-inner-border-radius, 8px);border:1.5px solid var(--rebill-color-border);padding:10px 14px;font-size:0.875rem;color:var(--rebill-color-text-primary);outline:none;transition:border-color 0.2s;background:var(--rebill-color-background);height:38.33px;box-sizing:border-box}.input-element.input-error{border-color:var(--rebill-color-error)}.input-element:disabled{background-color:var(--rebill-color-background);border-color:var(--rebill-color-disabled);color:var(--rebill-color-text-secondary);cursor:not-allowed;opacity:0.7}select.input-element{padding:10px 30px 10px 14px;appearance:none;cursor:pointer}select.input-element:disabled{cursor:not-allowed}.input-element:focus{border-color:var(--rebill-color-primary)}.input-element:disabled:focus{border-color:var(--rebill-color-disabled)}.input-element::placeholder{color:var(--rebill-color-text-secondary-light);font-size:0.875rem;opacity:1}.select-wrapper.disabled .select-icon{color:var(--rebill-color-disabled)}.error-message{color:var(--rebill-color-error);font-size:0.75rem;margin-top:0.375rem}:host{display:block;width:100%;box-sizing:border-box}.select-wrapper{position:relative;width:100%;box-sizing:border-box}.select-trigger{width:100%;height:38.33px;border-radius:var(--input-group-inner-border-radius, 8px);border:1.5px solid var(--rebill-color-border);padding:10px 14px;padding-right:30px;font-size:0.875rem;font-weight:normal;color:var(--rebill-color-text-primary);outline:none;transition:border-color 0.2s;background:var(--rebill-color-background);cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none;box-sizing:border-box;min-width:0;}.select-trigger:focus{outline:none;border-color:var(--rebill-color-primary);box-shadow:0 0 0 2px var(--rebill-color-primary-light)}.select-trigger:hover:not(.disabled){border-color:var(--rebill-color-primary)}.select-trigger.input-error{border-color:var(--rebill-color-error) !important}.select-trigger.placeholder .select-value{color:var(--rebill-color-text-secondary-light);font-size:0.875rem}.select-wrapper.disabled .select-trigger{background-color:var(--rebill-color-background);color:var(--rebill-color-text-secondary);cursor:not-allowed;opacity:0.7}.select-value{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.icon-wrapper{position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;height:20px;width:20px}.select-icon{color:var(--rebill-color-text-secondary);transition:transform 0.2s ease;transform-origin:50% 50%;display:block}.select-icon.rotated{transform:rotateX(180deg)}.select-wrapper.disabled .select-icon{color:var(--rebill-color-disabled)}.select-trigger.underlined{width:100%;height:38.33px;padding:10px 14px;padding-right:40px;font-size:0.875rem;font-weight:normal;color:var(--rebill-color-text-primary);outline:none;background:var(--rebill-color-background);cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none;min-width:0;border:none}.select-trigger.underlined:focus{border:none;box-shadow:none}.select-dropPosition.open-down{position:absolute;top:100%;left:0;right:0;z-index:1000;background-color:var(--rebill-color-background);border:1px solid var(--rebill-color-border);border-radius:0.375rem;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1),\n    0 2px 4px -1px rgba(0, 0, 0, 0.06);margin-top:0.25rem;max-height:200px;overflow-y:auto;animation:slideDown 0.15s ease-out;box-sizing:border-box;width:100%}.select-dropPosition.open-up{position:absolute;bottom:100%;left:0;right:0;z-index:1000;background-color:var(--rebill-color-background);border:1px solid var(--rebill-color-border);border-radius:0.375rem;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1),\n    0 2px 4px -1px rgba(0, 0, 0, 0.06);margin-bottom:0.25rem;margin-top:0;max-height:200px;overflow-y:auto;animation:slideUp 0.15s ease-out;box-sizing:border-box;width:100%}@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.select-option{padding:0.75rem;font-size:0.875rem;color:var(--rebill-color-text-primary);cursor:pointer;border-bottom:1px solid var(--rebill-color-border);transition:background-color 0.15s ease}.select-option:last-child{border-bottom:none}.select-option:hover,.select-option.highlighted{background-color:#f0f9ff}.select-option.selected{background-color:var(--rebill-color-primary);color:white}.select-option.selected:hover,.select-option.selected.highlighted{background-color:var(--rebill-color-primary)}.select-dropdown::-webkit-scrollbar{width:6px}.select-dropdown::-webkit-scrollbar-track{background:transparent}.select-dropdown::-webkit-scrollbar-thumb{background-color:var(--rebill-color-border);border-radius:3px}.select-dropdown::-webkit-scrollbar-thumb:hover{background-color:var(--rebill-color-text-secondary)}.search-container{padding:0.75rem;border-bottom:1px solid var(--rebill-color-border);background-color:var(--rebill-color-background)}.search-input-wrapper{position:relative;display:flex;align-items:center;width:100%}.search-icon{position:absolute;left:0.75rem;color:var(--rebill-color-text-secondary);z-index:1;pointer-events:none}.search-input{width:100%;padding:0.5rem 0.75rem 0.5rem 2.5rem;border:1px solid var(--rebill-color-border);border-radius:0.375rem;font-size:0.875rem;color:var(--rebill-color-text-primary);background-color:var(--rebill-color-background);outline:none;transition:border-color 0.2s ease;box-sizing:border-box}.search-input:focus{border-color:var(--rebill-color-primary);box-shadow:0 0 0 2px var(--rebill-color-primary-light)}.search-input::placeholder{color:var(--rebill-color-text-secondary-light);font-size:0.875rem}.clear-search{position:absolute;right:0.75rem;background:none;border:none;cursor:pointer;padding:0.25rem;border-radius:0.25rem;display:flex;align-items:center;justify-content:center;color:var(--rebill-color-text-secondary);transition:background-color 0.2s ease}.clear-search:hover{background-color:var(--rebill-color-background-hover);color:var(--rebill-color-text-primary)}.no-results{padding:0.75rem;text-align:center;color:var(--rebill-color-text-secondary);font-style:italic;border-bottom:1px solid var(--rebill-color-border)}.loading-message{padding:0.75rem;text-align:center;color:var(--rebill-color-text-secondary);display:flex;align-items:center;justify-content:center;gap:0.5rem;border-bottom:1px solid var(--rebill-color-border)}.loading-message .spinner{width:14px;height:14px;border:2px solid rgba(0, 0, 0, 0.1);border-radius:50%;border-top-color:var(--rebill-color-primary, #007bff);animation:spin 1s linear infinite}.spinner{width:16px;height:16px;border:2px solid rgba(0, 0, 0, 0.1);border-radius:50%;border-top-color:var(--rebill-color-primary, #007bff);animation:spin 1s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}";
+const inputSelectCss = ".input-container{display:flex;flex-direction:column}.input-label{font-size:0.875rem;color:var(--rebill-color-text-primary);font-weight:500;margin-bottom:0.375rem}.input-label.disabled{cursor:not-allowed}.input-element{border-radius:var(--input-group-inner-border-radius, 8px);border:1.5px solid var(--rebill-color-border);padding:10px 14px;font-size:0.875rem;color:var(--rebill-color-text-primary);outline:none;transition:border-color 0.2s;background:var(--rebill-color-background);height:38.33px;box-sizing:border-box}.input-element.input-error{border-color:var(--rebill-color-error)}.input-element:disabled{background-color:var(--rebill-color-background);border-color:var(--rebill-color-disabled);color:var(--rebill-color-text-secondary);cursor:not-allowed;opacity:0.7}select.input-element{padding:10px 30px 10px 14px;appearance:none;cursor:pointer}select.input-element:disabled{cursor:not-allowed}.input-element:focus{border-color:var(--rebill-color-primary)}.input-element:disabled:focus{border-color:var(--rebill-color-disabled)}.input-element::placeholder{color:var(--rebill-color-text-secondary-light);font-size:0.875rem;opacity:1}.select-wrapper.disabled .select-icon{color:var(--rebill-color-disabled)}.error-message{color:var(--rebill-color-error);font-size:0.75rem;margin-top:0.375rem}@media screen and (max-width: 768px){.input-element{font-size:1rem}.input-element::placeholder{font-size:1rem}}:host{display:block;width:100%;box-sizing:border-box}.select-wrapper{position:relative;width:100%;box-sizing:border-box}.select-trigger{width:100%;height:38.33px;border-radius:var(--input-group-inner-border-radius, 8px);border:1.5px solid var(--rebill-color-border);padding:10px 14px;padding-right:30px;font-size:0.875rem;font-weight:normal;color:var(--rebill-color-text-primary);outline:none;transition:border-color 0.2s;background:var(--rebill-color-background);cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none;box-sizing:border-box;min-width:0;}.select-trigger:focus{outline:none;border-color:var(--rebill-color-primary);box-shadow:0 0 0 2px var(--rebill-color-primary-light)}.select-trigger:hover:not(.disabled){border-color:var(--rebill-color-primary)}.select-trigger.input-error{border-color:var(--rebill-color-error) !important}.select-trigger.placeholder .select-value{color:var(--rebill-color-text-secondary-light);font-size:0.875rem}.select-wrapper.disabled .select-trigger{background-color:var(--rebill-color-background);color:var(--rebill-color-text-secondary);cursor:not-allowed;opacity:0.7}.select-value{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.icon-wrapper{position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;height:20px;width:20px}.select-icon{color:var(--rebill-color-text-secondary);transition:transform 0.2s ease;transform-origin:50% 50%;display:block}.select-icon.rotated{transform:rotateX(180deg)}.select-wrapper.disabled .select-icon{color:var(--rebill-color-disabled)}.select-trigger.underlined{width:100%;height:38.33px;padding:10px 14px;padding-right:40px;font-size:0.875rem;font-weight:normal;color:var(--rebill-color-text-primary);outline:none;background:var(--rebill-color-background);cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none;min-width:0;border:none}.select-trigger.underlined:focus{border:none;box-shadow:none}.select-dropPosition.open-down{position:absolute;top:100%;left:0;right:0;z-index:1000;background-color:var(--rebill-color-background);border:1px solid var(--rebill-color-border);border-radius:0.375rem;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1),\n    0 2px 4px -1px rgba(0, 0, 0, 0.06);margin-top:0.25rem;max-height:200px;overflow-y:auto;animation:slideDown 0.15s ease-out;box-sizing:border-box;width:100%}.select-dropPosition.open-up{position:absolute;bottom:100%;left:0;right:0;z-index:1000;background-color:var(--rebill-color-background);border:1px solid var(--rebill-color-border);border-radius:0.375rem;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1),\n    0 2px 4px -1px rgba(0, 0, 0, 0.06);margin-bottom:0.25rem;margin-top:0;max-height:200px;overflow-y:auto;animation:slideUp 0.15s ease-out;box-sizing:border-box;width:100%}@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.select-option{padding:0.75rem;font-size:0.875rem;color:var(--rebill-color-text-primary);cursor:pointer;border-bottom:1px solid var(--rebill-color-border);transition:background-color 0.15s ease}.select-option:last-child{border-bottom:none}.select-option:hover,.select-option.highlighted{background-color:#f0f9ff}.select-option.selected{background-color:var(--rebill-color-primary);color:white}.select-option.selected:hover,.select-option.selected.highlighted{background-color:var(--rebill-color-primary)}.select-dropdown::-webkit-scrollbar{width:6px}.select-dropdown::-webkit-scrollbar-track{background:transparent}.select-dropdown::-webkit-scrollbar-thumb{background-color:var(--rebill-color-border);border-radius:3px}.select-dropdown::-webkit-scrollbar-thumb:hover{background-color:var(--rebill-color-text-secondary)}.search-container{padding:0.75rem;border-bottom:1px solid var(--rebill-color-border);background-color:var(--rebill-color-background)}.search-input-wrapper{position:relative;display:flex;align-items:center;width:100%}.search-icon{position:absolute;left:0.75rem;color:var(--rebill-color-text-secondary);z-index:1;pointer-events:none}.search-input{width:100%;padding:0.5rem 0.75rem 0.5rem 2.5rem;border:1px solid var(--rebill-color-border);border-radius:0.375rem;font-size:0.875rem;color:var(--rebill-color-text-primary);background-color:var(--rebill-color-background);outline:none;transition:border-color 0.2s ease;box-sizing:border-box}.search-input:focus{border-color:var(--rebill-color-primary);box-shadow:0 0 0 2px var(--rebill-color-primary-light)}.search-input::placeholder{color:var(--rebill-color-text-secondary-light);font-size:0.875rem}.clear-search{position:absolute;right:0.75rem;background:none;border:none;cursor:pointer;padding:0.25rem;border-radius:0.25rem;display:flex;align-items:center;justify-content:center;color:var(--rebill-color-text-secondary);transition:background-color 0.2s ease}.clear-search:hover{background-color:var(--rebill-color-background-hover);color:var(--rebill-color-text-primary)}.no-results{padding:0.75rem;text-align:center;color:var(--rebill-color-text-secondary);font-style:italic;border-bottom:1px solid var(--rebill-color-border)}.loading-message{padding:0.75rem;text-align:center;color:var(--rebill-color-text-secondary);display:flex;align-items:center;justify-content:center;gap:0.5rem;border-bottom:1px solid var(--rebill-color-border)}.loading-message .spinner{width:14px;height:14px;border:2px solid rgba(0, 0, 0, 0.1);border-radius:50%;border-top-color:var(--rebill-color-primary, #007bff);animation:spin 1s linear infinite}.spinner{width:16px;height:16px;border:2px solid rgba(0, 0, 0, 0.1);border-radius:50%;border-top-color:var(--rebill-color-primary, #007bff);animation:spin 1s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}@media screen and (max-width: 768px){.select-trigger{font-size:1rem}.select-trigger.placeholder .select-value{font-size:1rem}.select-option{font-size:1rem}.search-input{font-size:1rem}.search-input::placeholder{font-size:1rem}.loading-message{font-size:1rem}.no-results{font-size:1rem}}";
 
 const InputSelect = class {
     constructor(hostRef) {

package/dist/cjs/rebill-input-select.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"rebill-input-select.entry.cjs.js","sources":["src/components/shared/inputs/input-select/input-select.css?tag=rebill-input-select","src/components/shared/inputs/input-select/input-select.tsx"],"sourcesContent":["@import '../shared-input.css';\n\n:host {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.select-wrapper {\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.select-trigger {\n  width: 100%;\n  height: 38.33px;\n  border-radius: var(--input-group-inner-border-radius, 8px);\n  border: 1.5px solid var(--rebill-color-border);\n  padding: 10px 14px;\n  padding-right: 30px; /* Espacio para el icono */\n  font-size: 0.875rem;\n  font-weight: normal;\n  color: var(--rebill-color-text-primary);\n  outline: none;\n  transition: border-color 0.2s;\n  background: var(--rebill-color-background);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  user-select: none;\n  box-sizing: border-box;\n  min-width: 0; /* Allow the element to shrink below its content size */\n}\n\n.select-trigger:focus {\n  outline: none;\n  border-color: var(--rebill-color-primary);\n  box-shadow: 0 0 0 2px var(--rebill-color-primary-light);\n}\n\n.select-trigger:hover:not(.disabled) {\n  border-color: var(--rebill-color-primary);\n}\n\n.select-trigger.input-error {\n  border-color: var(--rebill-color-error) !important;\n}\n\n.select-trigger.placeholder .select-value {\n  color: var(--rebill-color-text-secondary-light);\n  font-size: 0.875rem;\n}\n\n.select-wrapper.disabled .select-trigger {\n  background-color: var(--rebill-color-background);\n  /* border-color: var(--rebill-color-disabled); */\n  color: var(--rebill-color-text-secondary);\n  cursor: not-allowed;\n  opacity: 0.7;\n}\n\n.select-value {\n  flex: 1;\n  text-align: left;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.icon-wrapper {\n  position: absolute;\n  right: 0.75rem;\n  top: 50%;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  width: 20px;\n}\n\n.select-icon {\n  color: var(--rebill-color-text-secondary);\n  transition: transform 0.2s ease;\n  transform-origin: 50% 50%;\n  display: block;\n}\n\n.select-icon.rotated {\n  transform: rotateX(180deg);\n}\n\n.select-wrapper.disabled .select-icon {\n  color: var(--rebill-color-disabled);\n}\n\n/* Variante undelineated - sin borde */\n.select-trigger.underlined {\n  width: 100%;\n  height: 38.33px;\n  padding: 10px 14px;\n  padding-right: 40px;\n  font-size: 0.875rem;\n  font-weight: normal;\n  color: var(--rebill-color-text-primary);\n  outline: none;\n  background: var(--rebill-color-background);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  user-select: none;\n  min-width: 0;\n  border: none;\n}\n\n.select-trigger.underlined:focus {\n  border: none;\n  box-shadow: none;\n}\n\n.select-dropPosition.open-down {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n  background-color: var(--rebill-color-background);\n  border: 1px solid var(--rebill-color-border);\n  border-radius: 0.375rem;\n  box-shadow:\n    0 4px 6px -1px rgba(0, 0, 0, 0.1),\n    0 2px 4px -1px rgba(0, 0, 0, 0.06);\n  margin-top: 0.25rem;\n  max-height: 200px;\n  overflow-y: auto;\n  animation: slideDown 0.15s ease-out;\n  box-sizing: border-box;\n  width: 100%;\n}\n\n.select-dropPosition.open-up {\n  position: absolute;\n  bottom: 100%;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n  background-color: var(--rebill-color-background);\n  border: 1px solid var(--rebill-color-border);\n  border-radius: 0.375rem;\n  box-shadow:\n    0 4px 6px -1px rgba(0, 0, 0, 0.1),\n    0 2px 4px -1px rgba(0, 0, 0, 0.06);\n  margin-bottom: 0.25rem;\n  margin-top: 0;\n  max-height: 200px;\n  overflow-y: auto;\n  animation: slideUp 0.15s ease-out;\n  box-sizing: border-box;\n  width: 100%;\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.select-option {\n  padding: 0.75rem;\n  font-size: 0.875rem;\n  color: var(--rebill-color-text-primary);\n  cursor: pointer;\n  border-bottom: 1px solid var(--rebill-color-border);\n  transition: background-color 0.15s ease;\n}\n\n.select-option:last-child {\n  border-bottom: none;\n}\n\n.select-option:hover,\n.select-option.highlighted {\n  background-color: #f0f9ff;\n}\n\n.select-option.selected {\n  background-color: var(--rebill-color-primary);\n  color: white;\n}\n\n.select-option.selected:hover,\n.select-option.selected.highlighted {\n  background-color: var(--rebill-color-primary);\n}\n\n/* Scrollbar styling for the dropdown */\n.select-dropdown::-webkit-scrollbar {\n  width: 6px;\n}\n\n.select-dropdown::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.select-dropdown::-webkit-scrollbar-thumb {\n  background-color: var(--rebill-color-border);\n  border-radius: 3px;\n}\n\n.select-dropdown::-webkit-scrollbar-thumb:hover {\n  background-color: var(--rebill-color-text-secondary);\n}\n\n/* Estilos para la funcionalidad de búsqueda */\n.search-container {\n  padding: 0.75rem;\n  border-bottom: 1px solid var(--rebill-color-border);\n  background-color: var(--rebill-color-background);\n}\n\n.search-input-wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n}\n\n.search-icon {\n  position: absolute;\n  left: 0.75rem;\n  color: var(--rebill-color-text-secondary);\n  z-index: 1;\n  pointer-events: none;\n}\n\n.search-input {\n  width: 100%;\n  padding: 0.5rem 0.75rem 0.5rem 2.5rem;\n  border: 1px solid var(--rebill-color-border);\n  border-radius: 0.375rem;\n  font-size: 0.875rem;\n  color: var(--rebill-color-text-primary);\n  background-color: var(--rebill-color-background);\n  outline: none;\n  transition: border-color 0.2s ease;\n  box-sizing: border-box;\n}\n\n.search-input:focus {\n  border-color: var(--rebill-color-primary);\n  box-shadow: 0 0 0 2px var(--rebill-color-primary-light);\n}\n\n.search-input::placeholder {\n  color: var(--rebill-color-text-secondary-light);\n  font-size: 0.875rem;\n}\n\n.clear-search {\n  position: absolute;\n  right: 0.75rem;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0.25rem;\n  border-radius: 0.25rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--rebill-color-text-secondary);\n  transition: background-color 0.2s ease;\n}\n\n.clear-search:hover {\n  background-color: var(--rebill-color-background-hover);\n  color: var(--rebill-color-text-primary);\n}\n\n.no-results {\n  padding: 0.75rem;\n  text-align: center;\n  color: var(--rebill-color-text-secondary);\n  font-style: italic;\n  border-bottom: 1px solid var(--rebill-color-border);\n}\n\n.loading-message {\n  padding: 0.75rem;\n  text-align: center;\n  color: var(--rebill-color-text-secondary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  border-bottom: 1px solid var(--rebill-color-border);\n}\n\n.loading-message .spinner {\n  width: 14px;\n  height: 14px;\n  border: 2px solid rgba(0, 0, 0, 0.1);\n  border-radius: 50%;\n  border-top-color: var(--rebill-color-primary, #007bff);\n  animation: spin 1s linear infinite;\n}\n\n/* Spinner styles */\n.spinner {\n  width: 16px;\n  height: 16px;\n  border: 2px solid rgba(0, 0, 0, 0.1);\n  border-radius: 50%;\n  border-top-color: var(--rebill-color-primary, #007bff);\n  animation: spin 1s linear infinite;\n  display: inline-block;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n","import { Component, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\nimport { I18nService } from '../../../../i18n/i18n.service';\nimport { SessionStore } from '../../../../store/session.store';\n@Component({\n  tag: 'rebill-input-select',\n  styleUrl: 'input-select.css',\n  shadow: false,\n})\nexport class InputSelect {\n  private dropdownRef?: HTMLDivElement;\n  private triggerRef?: HTMLDivElement;\n  private searchInputRef?: HTMLInputElement;\n  private unsubscribeCurrentLocaleStore?: () => void;\n\n  /** Etiqueta que se muestra arriba del select */\n  @Prop() label: string = '';\n  /** Opciones del select */\n  @Prop() options: { label: string; value: string }[] = [];\n  /** Valor seleccionado */\n  @Prop({ mutable: true, reflect: true }) value: string = '';\n  /** Mensaje de error */\n  @Prop() error: string = '';\n  /** ID del select */\n  @Prop() id: string = '';\n  /** Estado deshabilitado */\n  @Prop() disabled: boolean = false;\n  /** Placeholder text */\n  @Prop() placeholder: string = 'Selecciona una opción';\n  /** Variant input select */\n  @Prop() variant: 'outlined' | 'underlined';\n  /** Icono de flecha hacia abajo */\n  @Prop() arrowIcon: 'up-down' | 'down' = 'up-down';\n  /** Posición del dropdown */\n  @Prop() dropPosition: 'up' | 'down' = 'down';\n  /** Tamaño de la fuente */\n  @Prop() fontSize: string = '14px';\n  /** Estilos personalizados */\n  @Prop() backgroundColor: string = '';\n  /** Habilitar funcionalidad de búsqueda */\n  @Prop() searchable: boolean = false;\n  /** Placeholder del campo de búsqueda */\n  @Prop() searchPlaceholder: string = 'Search for options...';\n  /** Estado de carga */\n  @Prop() loading: boolean = false;\n  /** Estado interno para mostrar/ocultar el dropdown */\n  @State() isOpen: boolean = false;\n  /** ID único del componente */\n  @State() componentId: string = '';\n  /** Índice de la opción resaltada para navegación con teclado */\n  @State() highlightedIndex: number = -1;\n  /** Término de búsqueda */\n  @State() searchTerm: string = '';\n  /** Opciones filtradas */\n  @State() filteredOptions: { label: string; value: string }[] = [];\n  /** Estado para forzar re-render cuando cambia el idioma */\n  @State() languageUpdateTrigger: number = 0;\n  /** Evento al cambiar el valor */\n  @Event() input: EventEmitter<{ id: string; value: string; disabled?: boolean }>;\n\n  componentWillLoad() {\n    this.filteredOptions = [...this.options];\n    this.componentId = this.id || `select-${Math.random().toString(36).substr(2, 9)}`;\n  }\n\n  componentDidLoad() {\n    this.unsubscribeCurrentLocaleStore = SessionStore.onChange('currentLocale', () => {\n      this.languageUpdateTrigger++;\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribeCurrentLocaleStore) {\n      this.unsubscribeCurrentLocaleStore();\n    }\n  }\n\n  componentWillUpdate() {\n    this.filteredOptions = [...this.options];\n\n    if (this.searchable) {\n      this.filterOptions();\n    }\n  }\n\n  @Listen('change', { target: 'document' })\n  handleFormChange(event: CustomEvent) {\n    const formData = event.detail;\n    if (formData && this.id in formData) {\n      const newValue = formData[this.id];\n      // Only update if the new value is different and ensure it's a string\n      if (newValue !== this.value && typeof newValue === 'string') {\n        this.value = newValue;\n        this.input.emit({ id: this.id, value: this.value });\n      }\n    }\n  }\n\n  @Listen('closeAllSelects', { target: 'document' })\n  handleCloseAllSelects(event: CustomEvent) {\n    if (event.detail !== this.componentId) {\n      this.closeDropdown();\n    }\n  }\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: Event) {\n    if (\n      this.dropdownRef &&\n      this.triggerRef &&\n      !this.dropdownRef.contains(event.target as Node) &&\n      !this.triggerRef.contains(event.target as Node)\n    ) {\n      this.closeDropdown();\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) return;\n\n    if (this.searchable && this.searchInputRef && event.target === this.searchInputRef) {\n      return;\n    }\n\n    switch (event.key) {\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        if (this.isOpen && this.highlightedIndex >= 0) {\n          this.selectOption(this.filteredOptions[this.highlightedIndex]);\n        } else {\n          this.toggleDropdown();\n        }\n        break;\n      case 'Escape':\n        event.preventDefault();\n        this.closeDropdown();\n        break;\n      case 'ArrowDown':\n        event.preventDefault();\n        if (!this.isOpen) {\n          this.openDropdown();\n        } else {\n          this.highlightedIndex = Math.min(\n            this.highlightedIndex + 1,\n            this.filteredOptions.length - 1,\n          );\n        }\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        if (this.isOpen) {\n          this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);\n        }\n        break;\n    }\n  }\n\n  private toggleDropdown = () => {\n    if (this.disabled) return;\n\n    const wasOpen = this.isOpen;\n    this.isOpen = !this.isOpen;\n\n    if (this.isOpen) {\n      if (!wasOpen) {\n        document.dispatchEvent(new CustomEvent('closeAllSelects', { detail: this.componentId }));\n      }\n\n      this.highlightedIndex = this.filteredOptions.findIndex(opt => opt.value === this.value);\n      if (this.highlightedIndex === -1) {\n        this.highlightedIndex = 0;\n      }\n\n      if (this.searchable) {\n        this.focusSearchInput();\n      }\n    } else {\n      this.searchTerm = '';\n      this.filterOptions();\n    }\n  };\n\n  private openDropdown = () => {\n    if (this.disabled) return;\n    document.dispatchEvent(new CustomEvent('closeAllSelects', { detail: this.componentId }));\n    this.isOpen = true;\n    this.highlightedIndex = this.filteredOptions.findIndex(opt => opt.value === this.value);\n    if (this.highlightedIndex === -1) {\n      this.highlightedIndex = 0;\n    }\n\n    if (this.searchable) {\n      this.focusSearchInput();\n    }\n  };\n\n  private focusSearchInput = () => {\n    const focusInput = () => {\n      if (this.searchInputRef) {\n        this.searchInputRef.focus();\n        this.searchInputRef.select();\n      }\n    };\n    focusInput();\n\n    requestAnimationFrame(() => {\n      focusInput();\n    });\n    setTimeout(() => {\n      focusInput();\n    }, 10);\n  };\n\n  private closeDropdown = () => {\n    this.isOpen = false;\n    this.highlightedIndex = -1;\n    this.searchTerm = '';\n    this.filterOptions();\n  };\n\n  private selectOption = (option: { label: string; value: string }) => {\n    if (this.disabled) return;\n    this.value = option.value;\n    this.closeDropdown();\n    this.input.emit({ id: this.id, value: this.value, disabled: this.disabled });\n  };\n\n  private getSelectedOptionLabel = (): string => {\n    const selectedOption = this.options.find(opt => opt.value === this.value);\n    return selectedOption ? selectedOption.label : this.placeholder;\n  };\n\n  private getArrowIcon = () => {\n    if (this.arrowIcon === 'up-down') return 'chevron-up-down';\n    return 'chevron-down';\n  };\n\n  private filterOptions = () => {\n    if (!this.searchTerm.trim()) {\n      this.filteredOptions = [...this.options];\n    } else {\n      this.filteredOptions = this.options.filter(option =>\n        option.label.toLowerCase().includes(this.searchTerm.toLowerCase()),\n      );\n    }\n    this.highlightedIndex = -1;\n  };\n\n  private handleSearchInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.searchTerm = target.value;\n    this.filterOptions();\n  };\n\n  private clearSearch = () => {\n    this.searchTerm = '';\n    this.filterOptions();\n  };\n\n  private handleSearchClick = (event: Event) => {\n    event.stopPropagation();\n  };\n\n  render() {\n    const selectedLabel = this.getSelectedOptionLabel();\n    const hasValue = this.value !== '';\n\n    return (\n      <div class=\"input-container\">\n        {this.label && (\n          <label class={`input-label ${this.disabled ? 'disabled' : ''}`}>{this.label}</label>\n        )}\n        <div\n          class={`select-wrapper ${this.disabled ? 'disabled' : ''} ${this.isOpen ? 'open' : ''}`}\n        >\n          <div\n            ref={el => (this.triggerRef = el)}\n            class={`input-element select-trigger ${this.error ? 'input-error' : ''} ${!hasValue ? 'placeholder' : ''} ${this.variant === 'underlined' ? 'underlined' : ''}`}\n            style={{ backgroundColor: this.backgroundColor }}\n            onClick={this.toggleDropdown}\n            tabIndex={this.disabled ? -1 : 0}\n            role=\"combobox\"\n            aria-expanded={this.isOpen.toString()}\n            aria-haspopup=\"listbox\"\n            aria-labelledby={this.label ? `${this.id}-label` : undefined}\n          >\n            <span\n              class=\"select-value\"\n              style={{ fontSize: this.fontSize }}\n              innerHTML={selectedLabel}\n            ></span>\n            <div class=\"icon-wrapper\">\n              {this.loading ? (\n                <div class=\"spinner\"></div>\n              ) : (\n                <rebill-icon\n                  name={this.getArrowIcon()}\n                  size=\"20px\"\n                  class={`select-icon ${this.isOpen && this.arrowIcon === 'down' ? 'rotated' : ''}`}\n                />\n              )}\n            </div>\n          </div>\n\n          {this.isOpen && (\n            <div\n              ref={el => (this.dropdownRef = el)}\n              class={`select-dropPosition ${this.dropPosition === 'up' ? 'open-up' : 'open-down'}`}\n              role=\"listbox\"\n            >\n              {this.searchable && (\n                <div class=\"search-container\" onClick={this.handleSearchClick}>\n                  <div class=\"search-input-wrapper\">\n                    <rebill-icon name=\"search\" size=\"16px\" class=\"search-icon\" />\n                    <input\n                      ref={el => (this.searchInputRef = el)}\n                      type=\"text\"\n                      class=\"search-input\"\n                      placeholder={this.searchPlaceholder}\n                      value={this.searchTerm}\n                      onInput={this.handleSearchInput}\n                      onClick={this.handleSearchClick}\n                      style={{ fontSize: this.fontSize }}\n                    />\n                    {this.searchTerm && (\n                      <button\n                        type=\"button\"\n                        class=\"clear-search\"\n                        onClick={event => {\n                          event.stopPropagation();\n                          this.clearSearch();\n                        }}\n                        aria-label=\"Clear search\"\n                      >\n                        <rebill-icon name=\"x\" size=\"16px\" />\n                      </button>\n                    )}\n                  </div>\n                </div>\n              )}\n              {this.loading && this.filteredOptions.length === 0 ? (\n                <div class=\"loading-message\" style={{ fontSize: this.fontSize }}>\n                  <div class=\"spinner\"></div>\n                  {I18nService.translate('common.loadingOptions')}\n                </div>\n              ) : this.filteredOptions.length > 0 ? (\n                this.filteredOptions.map((option, index) => (\n                  <div\n                    class={`select-option ${this.value === option.value ? 'selected' : ''} ${this.highlightedIndex === index ? 'highlighted' : ''}`}\n                    style={{ fontSize: this.fontSize }}\n                    onClick={() => this.selectOption(option)}\n                    role=\"option\"\n                    aria-selected={this.value === option.value ? 'true' : 'false'}\n                  >\n                    <span innerHTML={option.label}></span>\n                  </div>\n                ))\n              ) : (\n                <div class=\"no-results\" style={{ fontSize: this.fontSize }}>\n                  No se encontraron resultados\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n        {this.error && <span class=\"error-message\">{this.error}</span>}\n      </div>\n    );\n  }\n}\n"],"names":["SessionStore","h","I18nService","index"],"mappings":"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"}
+{"version":3,"file":"rebill-input-select.entry.cjs.js","sources":["src/components/shared/inputs/input-select/input-select.css?tag=rebill-input-select","src/components/shared/inputs/input-select/input-select.tsx"],"sourcesContent":["@import '../shared-input.css';\n\n:host {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.select-wrapper {\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.select-trigger {\n  width: 100%;\n  height: 38.33px;\n  border-radius: var(--input-group-inner-border-radius, 8px);\n  border: 1.5px solid var(--rebill-color-border);\n  padding: 10px 14px;\n  padding-right: 30px; /* Espacio para el icono */\n  font-size: 0.875rem;\n  font-weight: normal;\n  color: var(--rebill-color-text-primary);\n  outline: none;\n  transition: border-color 0.2s;\n  background: var(--rebill-color-background);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  user-select: none;\n  box-sizing: border-box;\n  min-width: 0; /* Allow the element to shrink below its content size */\n}\n\n.select-trigger:focus {\n  outline: none;\n  border-color: var(--rebill-color-primary);\n  box-shadow: 0 0 0 2px var(--rebill-color-primary-light);\n}\n\n.select-trigger:hover:not(.disabled) {\n  border-color: var(--rebill-color-primary);\n}\n\n.select-trigger.input-error {\n  border-color: var(--rebill-color-error) !important;\n}\n\n.select-trigger.placeholder .select-value {\n  color: var(--rebill-color-text-secondary-light);\n  font-size: 0.875rem;\n}\n\n.select-wrapper.disabled .select-trigger {\n  background-color: var(--rebill-color-background);\n  /* border-color: var(--rebill-color-disabled); */\n  color: var(--rebill-color-text-secondary);\n  cursor: not-allowed;\n  opacity: 0.7;\n}\n\n.select-value {\n  flex: 1;\n  text-align: left;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.icon-wrapper {\n  position: absolute;\n  right: 0.75rem;\n  top: 50%;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  width: 20px;\n}\n\n.select-icon {\n  color: var(--rebill-color-text-secondary);\n  transition: transform 0.2s ease;\n  transform-origin: 50% 50%;\n  display: block;\n}\n\n.select-icon.rotated {\n  transform: rotateX(180deg);\n}\n\n.select-wrapper.disabled .select-icon {\n  color: var(--rebill-color-disabled);\n}\n\n/* Variante undelineated - sin borde */\n.select-trigger.underlined {\n  width: 100%;\n  height: 38.33px;\n  padding: 10px 14px;\n  padding-right: 40px;\n  font-size: 0.875rem;\n  font-weight: normal;\n  color: var(--rebill-color-text-primary);\n  outline: none;\n  background: var(--rebill-color-background);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  user-select: none;\n  min-width: 0;\n  border: none;\n}\n\n.select-trigger.underlined:focus {\n  border: none;\n  box-shadow: none;\n}\n\n.select-dropPosition.open-down {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n  background-color: var(--rebill-color-background);\n  border: 1px solid var(--rebill-color-border);\n  border-radius: 0.375rem;\n  box-shadow:\n    0 4px 6px -1px rgba(0, 0, 0, 0.1),\n    0 2px 4px -1px rgba(0, 0, 0, 0.06);\n  margin-top: 0.25rem;\n  max-height: 200px;\n  overflow-y: auto;\n  animation: slideDown 0.15s ease-out;\n  box-sizing: border-box;\n  width: 100%;\n}\n\n.select-dropPosition.open-up {\n  position: absolute;\n  bottom: 100%;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n  background-color: var(--rebill-color-background);\n  border: 1px solid var(--rebill-color-border);\n  border-radius: 0.375rem;\n  box-shadow:\n    0 4px 6px -1px rgba(0, 0, 0, 0.1),\n    0 2px 4px -1px rgba(0, 0, 0, 0.06);\n  margin-bottom: 0.25rem;\n  margin-top: 0;\n  max-height: 200px;\n  overflow-y: auto;\n  animation: slideUp 0.15s ease-out;\n  box-sizing: border-box;\n  width: 100%;\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.select-option {\n  padding: 0.75rem;\n  font-size: 0.875rem;\n  color: var(--rebill-color-text-primary);\n  cursor: pointer;\n  border-bottom: 1px solid var(--rebill-color-border);\n  transition: background-color 0.15s ease;\n}\n\n.select-option:last-child {\n  border-bottom: none;\n}\n\n.select-option:hover,\n.select-option.highlighted {\n  background-color: #f0f9ff;\n}\n\n.select-option.selected {\n  background-color: var(--rebill-color-primary);\n  color: white;\n}\n\n.select-option.selected:hover,\n.select-option.selected.highlighted {\n  background-color: var(--rebill-color-primary);\n}\n\n/* Scrollbar styling for the dropdown */\n.select-dropdown::-webkit-scrollbar {\n  width: 6px;\n}\n\n.select-dropdown::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.select-dropdown::-webkit-scrollbar-thumb {\n  background-color: var(--rebill-color-border);\n  border-radius: 3px;\n}\n\n.select-dropdown::-webkit-scrollbar-thumb:hover {\n  background-color: var(--rebill-color-text-secondary);\n}\n\n/* Estilos para la funcionalidad de búsqueda */\n.search-container {\n  padding: 0.75rem;\n  border-bottom: 1px solid var(--rebill-color-border);\n  background-color: var(--rebill-color-background);\n}\n\n.search-input-wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n}\n\n.search-icon {\n  position: absolute;\n  left: 0.75rem;\n  color: var(--rebill-color-text-secondary);\n  z-index: 1;\n  pointer-events: none;\n}\n\n.search-input {\n  width: 100%;\n  padding: 0.5rem 0.75rem 0.5rem 2.5rem;\n  border: 1px solid var(--rebill-color-border);\n  border-radius: 0.375rem;\n  font-size: 0.875rem;\n  color: var(--rebill-color-text-primary);\n  background-color: var(--rebill-color-background);\n  outline: none;\n  transition: border-color 0.2s ease;\n  box-sizing: border-box;\n}\n\n.search-input:focus {\n  border-color: var(--rebill-color-primary);\n  box-shadow: 0 0 0 2px var(--rebill-color-primary-light);\n}\n\n.search-input::placeholder {\n  color: var(--rebill-color-text-secondary-light);\n  font-size: 0.875rem;\n}\n\n.clear-search {\n  position: absolute;\n  right: 0.75rem;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0.25rem;\n  border-radius: 0.25rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--rebill-color-text-secondary);\n  transition: background-color 0.2s ease;\n}\n\n.clear-search:hover {\n  background-color: var(--rebill-color-background-hover);\n  color: var(--rebill-color-text-primary);\n}\n\n.no-results {\n  padding: 0.75rem;\n  text-align: center;\n  color: var(--rebill-color-text-secondary);\n  font-style: italic;\n  border-bottom: 1px solid var(--rebill-color-border);\n}\n\n.loading-message {\n  padding: 0.75rem;\n  text-align: center;\n  color: var(--rebill-color-text-secondary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  border-bottom: 1px solid var(--rebill-color-border);\n}\n\n.loading-message .spinner {\n  width: 14px;\n  height: 14px;\n  border: 2px solid rgba(0, 0, 0, 0.1);\n  border-radius: 50%;\n  border-top-color: var(--rebill-color-primary, #007bff);\n  animation: spin 1s linear infinite;\n}\n\n/* Spinner styles */\n.spinner {\n  width: 16px;\n  height: 16px;\n  border: 2px solid rgba(0, 0, 0, 0.1);\n  border-radius: 50%;\n  border-top-color: var(--rebill-color-primary, #007bff);\n  animation: spin 1s linear infinite;\n  display: inline-block;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Fix para evitar zoom en dispositivos móviles */\n@media screen and (max-width: 768px) {\n  .select-trigger {\n    font-size: 1rem;\n  }\n\n  .select-trigger.placeholder .select-value {\n    font-size: 1rem;\n  }\n\n  .select-option {\n    font-size: 1rem;\n  }\n\n  .search-input {\n    font-size: 1rem;\n  }\n\n  .search-input::placeholder {\n    font-size: 1rem;\n  }\n\n  .loading-message {\n    font-size: 1rem;\n  }\n\n  .no-results {\n    font-size: 1rem;\n  }\n}\n","import { Component, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\nimport { I18nService } from '../../../../i18n/i18n.service';\nimport { SessionStore } from '../../../../store/session.store';\n@Component({\n  tag: 'rebill-input-select',\n  styleUrl: 'input-select.css',\n  shadow: false,\n})\nexport class InputSelect {\n  private dropdownRef?: HTMLDivElement;\n  private triggerRef?: HTMLDivElement;\n  private searchInputRef?: HTMLInputElement;\n  private unsubscribeCurrentLocaleStore?: () => void;\n\n  /** Etiqueta que se muestra arriba del select */\n  @Prop() label: string = '';\n  /** Opciones del select */\n  @Prop() options: { label: string; value: string }[] = [];\n  /** Valor seleccionado */\n  @Prop({ mutable: true, reflect: true }) value: string = '';\n  /** Mensaje de error */\n  @Prop() error: string = '';\n  /** ID del select */\n  @Prop() id: string = '';\n  /** Estado deshabilitado */\n  @Prop() disabled: boolean = false;\n  /** Placeholder text */\n  @Prop() placeholder: string = 'Selecciona una opción';\n  /** Variant input select */\n  @Prop() variant: 'outlined' | 'underlined';\n  /** Icono de flecha hacia abajo */\n  @Prop() arrowIcon: 'up-down' | 'down' = 'up-down';\n  /** Posición del dropdown */\n  @Prop() dropPosition: 'up' | 'down' = 'down';\n  /** Tamaño de la fuente */\n  @Prop() fontSize: string = '14px';\n  /** Estilos personalizados */\n  @Prop() backgroundColor: string = '';\n  /** Habilitar funcionalidad de búsqueda */\n  @Prop() searchable: boolean = false;\n  /** Placeholder del campo de búsqueda */\n  @Prop() searchPlaceholder: string = 'Search for options...';\n  /** Estado de carga */\n  @Prop() loading: boolean = false;\n  /** Estado interno para mostrar/ocultar el dropdown */\n  @State() isOpen: boolean = false;\n  /** ID único del componente */\n  @State() componentId: string = '';\n  /** Índice de la opción resaltada para navegación con teclado */\n  @State() highlightedIndex: number = -1;\n  /** Término de búsqueda */\n  @State() searchTerm: string = '';\n  /** Opciones filtradas */\n  @State() filteredOptions: { label: string; value: string }[] = [];\n  /** Estado para forzar re-render cuando cambia el idioma */\n  @State() languageUpdateTrigger: number = 0;\n  /** Evento al cambiar el valor */\n  @Event() input: EventEmitter<{ id: string; value: string; disabled?: boolean }>;\n\n  componentWillLoad() {\n    this.filteredOptions = [...this.options];\n    this.componentId = this.id || `select-${Math.random().toString(36).substr(2, 9)}`;\n  }\n\n  componentDidLoad() {\n    this.unsubscribeCurrentLocaleStore = SessionStore.onChange('currentLocale', () => {\n      this.languageUpdateTrigger++;\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribeCurrentLocaleStore) {\n      this.unsubscribeCurrentLocaleStore();\n    }\n  }\n\n  componentWillUpdate() {\n    this.filteredOptions = [...this.options];\n\n    if (this.searchable) {\n      this.filterOptions();\n    }\n  }\n\n  @Listen('change', { target: 'document' })\n  handleFormChange(event: CustomEvent) {\n    const formData = event.detail;\n    if (formData && this.id in formData) {\n      const newValue = formData[this.id];\n      // Only update if the new value is different and ensure it's a string\n      if (newValue !== this.value && typeof newValue === 'string') {\n        this.value = newValue;\n        this.input.emit({ id: this.id, value: this.value });\n      }\n    }\n  }\n\n  @Listen('closeAllSelects', { target: 'document' })\n  handleCloseAllSelects(event: CustomEvent) {\n    if (event.detail !== this.componentId) {\n      this.closeDropdown();\n    }\n  }\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: Event) {\n    if (\n      this.dropdownRef &&\n      this.triggerRef &&\n      !this.dropdownRef.contains(event.target as Node) &&\n      !this.triggerRef.contains(event.target as Node)\n    ) {\n      this.closeDropdown();\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) return;\n\n    if (this.searchable && this.searchInputRef && event.target === this.searchInputRef) {\n      return;\n    }\n\n    switch (event.key) {\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        if (this.isOpen && this.highlightedIndex >= 0) {\n          this.selectOption(this.filteredOptions[this.highlightedIndex]);\n        } else {\n          this.toggleDropdown();\n        }\n        break;\n      case 'Escape':\n        event.preventDefault();\n        this.closeDropdown();\n        break;\n      case 'ArrowDown':\n        event.preventDefault();\n        if (!this.isOpen) {\n          this.openDropdown();\n        } else {\n          this.highlightedIndex = Math.min(\n            this.highlightedIndex + 1,\n            this.filteredOptions.length - 1,\n          );\n        }\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        if (this.isOpen) {\n          this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);\n        }\n        break;\n    }\n  }\n\n  private toggleDropdown = () => {\n    if (this.disabled) return;\n\n    const wasOpen = this.isOpen;\n    this.isOpen = !this.isOpen;\n\n    if (this.isOpen) {\n      if (!wasOpen) {\n        document.dispatchEvent(new CustomEvent('closeAllSelects', { detail: this.componentId }));\n      }\n\n      this.highlightedIndex = this.filteredOptions.findIndex(opt => opt.value === this.value);\n      if (this.highlightedIndex === -1) {\n        this.highlightedIndex = 0;\n      }\n\n      if (this.searchable) {\n        this.focusSearchInput();\n      }\n    } else {\n      this.searchTerm = '';\n      this.filterOptions();\n    }\n  };\n\n  private openDropdown = () => {\n    if (this.disabled) return;\n    document.dispatchEvent(new CustomEvent('closeAllSelects', { detail: this.componentId }));\n    this.isOpen = true;\n    this.highlightedIndex = this.filteredOptions.findIndex(opt => opt.value === this.value);\n    if (this.highlightedIndex === -1) {\n      this.highlightedIndex = 0;\n    }\n\n    if (this.searchable) {\n      this.focusSearchInput();\n    }\n  };\n\n  private focusSearchInput = () => {\n    const focusInput = () => {\n      if (this.searchInputRef) {\n        this.searchInputRef.focus();\n        this.searchInputRef.select();\n      }\n    };\n    focusInput();\n\n    requestAnimationFrame(() => {\n      focusInput();\n    });\n    setTimeout(() => {\n      focusInput();\n    }, 10);\n  };\n\n  private closeDropdown = () => {\n    this.isOpen = false;\n    this.highlightedIndex = -1;\n    this.searchTerm = '';\n    this.filterOptions();\n  };\n\n  private selectOption = (option: { label: string; value: string }) => {\n    if (this.disabled) return;\n    this.value = option.value;\n    this.closeDropdown();\n    this.input.emit({ id: this.id, value: this.value, disabled: this.disabled });\n  };\n\n  private getSelectedOptionLabel = (): string => {\n    const selectedOption = this.options.find(opt => opt.value === this.value);\n    return selectedOption ? selectedOption.label : this.placeholder;\n  };\n\n  private getArrowIcon = () => {\n    if (this.arrowIcon === 'up-down') return 'chevron-up-down';\n    return 'chevron-down';\n  };\n\n  private filterOptions = () => {\n    if (!this.searchTerm.trim()) {\n      this.filteredOptions = [...this.options];\n    } else {\n      this.filteredOptions = this.options.filter(option =>\n        option.label.toLowerCase().includes(this.searchTerm.toLowerCase()),\n      );\n    }\n    this.highlightedIndex = -1;\n  };\n\n  private handleSearchInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.searchTerm = target.value;\n    this.filterOptions();\n  };\n\n  private clearSearch = () => {\n    this.searchTerm = '';\n    this.filterOptions();\n  };\n\n  private handleSearchClick = (event: Event) => {\n    event.stopPropagation();\n  };\n\n  render() {\n    const selectedLabel = this.getSelectedOptionLabel();\n    const hasValue = this.value !== '';\n\n    return (\n      <div class=\"input-container\">\n        {this.label && (\n          <label class={`input-label ${this.disabled ? 'disabled' : ''}`}>{this.label}</label>\n        )}\n        <div\n          class={`select-wrapper ${this.disabled ? 'disabled' : ''} ${this.isOpen ? 'open' : ''}`}\n        >\n          <div\n            ref={el => (this.triggerRef = el)}\n            class={`input-element select-trigger ${this.error ? 'input-error' : ''} ${!hasValue ? 'placeholder' : ''} ${this.variant === 'underlined' ? 'underlined' : ''}`}\n            style={{ backgroundColor: this.backgroundColor }}\n            onClick={this.toggleDropdown}\n            tabIndex={this.disabled ? -1 : 0}\n            role=\"combobox\"\n            aria-expanded={this.isOpen.toString()}\n            aria-haspopup=\"listbox\"\n            aria-labelledby={this.label ? `${this.id}-label` : undefined}\n          >\n            <span\n              class=\"select-value\"\n              style={{ fontSize: this.fontSize }}\n              innerHTML={selectedLabel}\n            ></span>\n            <div class=\"icon-wrapper\">\n              {this.loading ? (\n                <div class=\"spinner\"></div>\n              ) : (\n                <rebill-icon\n                  name={this.getArrowIcon()}\n                  size=\"20px\"\n                  class={`select-icon ${this.isOpen && this.arrowIcon === 'down' ? 'rotated' : ''}`}\n                />\n              )}\n            </div>\n          </div>\n\n          {this.isOpen && (\n            <div\n              ref={el => (this.dropdownRef = el)}\n              class={`select-dropPosition ${this.dropPosition === 'up' ? 'open-up' : 'open-down'}`}\n              role=\"listbox\"\n            >\n              {this.searchable && (\n                <div class=\"search-container\" onClick={this.handleSearchClick}>\n                  <div class=\"search-input-wrapper\">\n                    <rebill-icon name=\"search\" size=\"16px\" class=\"search-icon\" />\n                    <input\n                      ref={el => (this.searchInputRef = el)}\n                      type=\"text\"\n                      class=\"search-input\"\n                      placeholder={this.searchPlaceholder}\n                      value={this.searchTerm}\n                      onInput={this.handleSearchInput}\n                      onClick={this.handleSearchClick}\n                      style={{ fontSize: this.fontSize }}\n                    />\n                    {this.searchTerm && (\n                      <button\n                        type=\"button\"\n                        class=\"clear-search\"\n                        onClick={event => {\n                          event.stopPropagation();\n                          this.clearSearch();\n                        }}\n                        aria-label=\"Clear search\"\n                      >\n                        <rebill-icon name=\"x\" size=\"16px\" />\n                      </button>\n                    )}\n                  </div>\n                </div>\n              )}\n              {this.loading && this.filteredOptions.length === 0 ? (\n                <div class=\"loading-message\" style={{ fontSize: this.fontSize }}>\n                  <div class=\"spinner\"></div>\n                  {I18nService.translate('common.loadingOptions')}\n                </div>\n              ) : this.filteredOptions.length > 0 ? (\n                this.filteredOptions.map((option, index) => (\n                  <div\n                    class={`select-option ${this.value === option.value ? 'selected' : ''} ${this.highlightedIndex === index ? 'highlighted' : ''}`}\n                    style={{ fontSize: this.fontSize }}\n                    onClick={() => this.selectOption(option)}\n                    role=\"option\"\n                    aria-selected={this.value === option.value ? 'true' : 'false'}\n                  >\n                    <span innerHTML={option.label}></span>\n                  </div>\n                ))\n              ) : (\n                <div class=\"no-results\" style={{ fontSize: this.fontSize }}>\n                  No se encontraron resultados\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n        {this.error && <span class=\"error-message\">{this.error}</span>}\n      </div>\n    );\n  }\n}\n"],"names":["SessionStore","h","I18nService","index"],"mappings":"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"}

package/dist/cjs/rebill-input-text.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-C-VTnc0I.js');
 
-const inputTextCss = ".input-container{display:flex;flex-direction:column}.input-label{font-size:0.875rem;color:var(--rebill-color-text-primary);font-weight:500;margin-bottom:0.375rem}.input-label.disabled{cursor:not-allowed}.input-element{border-radius:var(--input-group-inner-border-radius, 8px);border:1.5px solid var(--rebill-color-border);padding:10px 14px;font-size:0.875rem;color:var(--rebill-color-text-primary);outline:none;transition:border-color 0.2s;background:var(--rebill-color-background);height:38.33px;box-sizing:border-box}.input-element.input-error{border-color:var(--rebill-color-error)}.input-element:disabled{background-color:var(--rebill-color-background);border-color:var(--rebill-color-disabled);color:var(--rebill-color-text-secondary);cursor:not-allowed;opacity:0.7}select.input-element{padding:10px 30px 10px 14px;appearance:none;cursor:pointer}select.input-element:disabled{cursor:not-allowed}.input-element:focus{border-color:var(--rebill-color-primary)}.input-element:disabled:focus{border-color:var(--rebill-color-disabled)}.input-element::placeholder{color:var(--rebill-color-text-secondary-light);font-size:0.875rem;opacity:1}.select-wrapper.disabled .select-icon{color:var(--rebill-color-disabled)}.error-message{color:var(--rebill-color-error);font-size:0.75rem;margin-top:0.375rem}.input-wrapper{position:relative;display:flex;align-items:center}.input-element{width:100%;box-sizing:border-box}.icon-left,.icon-right{position:absolute;display:flex;align-items:center;justify-content:center;top:50%;transform:translateY(-50%)}.icon-left{left:0.75rem;color:var(--rebill-color-text-secondary-light)}.icon-right{right:0.75rem;cursor:pointer;color:var(--rebill-color-text-secondary-light)}.input-element.input-error:focus{flex-direction:column;box-shadow:0 0 0 2px var(--rebill-color-error-light)}.floating-label{position:relative}.floating-label .input-text__input-label{position:absolute;top:50%;left:0.75rem;transform:translateY(-50%);color:var(--rebill-color-text-secondary-light);transition:all 0.1s ease-in-out;pointer-events:none}.floating-label .input-element::placeholder{color:transparent}.floating-label .input-element:focus~.input-text__input-label,.floating-label .input-element:not(:placeholder-shown)~.input-text__input-label{top:0;font-size:0.62rem;color:var(--rebill-color-text-secondary);background-color:var(--rebill-color-background);padding:0 4px;left:0.75rem}.floating-label.has-left-icon .input-text__input-label{left:2.5rem}.input-element:disabled{color:var(--rebill-color-neutrals-500)}.input-wrapper:has(.input-element:disabled) .icon-left,.input-wrapper:has(.input-element:disabled) .icon-right{color:var(--rebill-color-text-secondary-light) !important}";
+const inputTextCss = ".input-container{display:flex;flex-direction:column}.input-label{font-size:0.875rem;color:var(--rebill-color-text-primary);font-weight:500;margin-bottom:0.375rem}.input-label.disabled{cursor:not-allowed}.input-element{border-radius:var(--input-group-inner-border-radius, 8px);border:1.5px solid var(--rebill-color-border);padding:10px 14px;font-size:0.875rem;color:var(--rebill-color-text-primary);outline:none;transition:border-color 0.2s;background:var(--rebill-color-background);height:38.33px;box-sizing:border-box}.input-element.input-error{border-color:var(--rebill-color-error)}.input-element:disabled{background-color:var(--rebill-color-background);border-color:var(--rebill-color-disabled);color:var(--rebill-color-text-secondary);cursor:not-allowed;opacity:0.7}select.input-element{padding:10px 30px 10px 14px;appearance:none;cursor:pointer}select.input-element:disabled{cursor:not-allowed}.input-element:focus{border-color:var(--rebill-color-primary)}.input-element:disabled:focus{border-color:var(--rebill-color-disabled)}.input-element::placeholder{color:var(--rebill-color-text-secondary-light);font-size:0.875rem;opacity:1}.select-wrapper.disabled .select-icon{color:var(--rebill-color-disabled)}.error-message{color:var(--rebill-color-error);font-size:0.75rem;margin-top:0.375rem}@media screen and (max-width: 768px){.input-element{font-size:1rem}.input-element::placeholder{font-size:1rem}}.input-wrapper{position:relative;display:flex;align-items:center}.input-element{width:100%;box-sizing:border-box}.icon-left,.icon-right{position:absolute;display:flex;align-items:center;justify-content:center;top:50%;transform:translateY(-50%)}.icon-left{left:0.75rem;color:var(--rebill-color-text-secondary-light)}.icon-right{right:0.75rem;cursor:pointer;color:var(--rebill-color-text-secondary-light)}.input-element.input-error:focus{flex-direction:column;box-shadow:0 0 0 2px var(--rebill-color-error-light)}.floating-label{position:relative}.floating-label .input-text__input-label{position:absolute;top:50%;left:0.75rem;transform:translateY(-50%);color:var(--rebill-color-text-secondary-light);transition:all 0.1s ease-in-out;pointer-events:none}.floating-label .input-element::placeholder{color:transparent}.floating-label .input-element:focus~.input-text__input-label,.floating-label .input-element:not(:placeholder-shown)~.input-text__input-label{top:0;font-size:0.62rem;color:var(--rebill-color-text-secondary);background-color:var(--rebill-color-background);padding:0 4px;left:0.75rem}.floating-label.has-left-icon .input-text__input-label{left:2.5rem}.input-element:disabled{color:var(--rebill-color-neutrals-500)}.input-wrapper:has(.input-element:disabled) .icon-left,.input-wrapper:has(.input-element:disabled) .icon-right{color:var(--rebill-color-text-secondary-light) !important}";
 
 const InputText = class {
     constructor(hostRef) {

package/dist/cjs/rebill-input-text.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"rebill-input-text.entry.cjs.js","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"],"names":["h"],"mappings":"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"}
+{"version":3,"file":"rebill-input-text.entry.cjs.js","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"],"names":["h"],"mappings":"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"}

package/dist/collection/components/checkout/address/address.js

@@ -48,9 +48,10 @@ export class Address {
                 .toLowerCase()
                 .normalize('NFD')
                 .replace(/[\u0300-\u036f]/g, '') // Remove accents
+                .replace(/\./g, '') // Remove dots
+                .replace(/\s+/g, ' ') // Normalize spaces
                 .trim();
         };
-        SessionStore.setBillingAddress(address);
         this.billingView = 'form';
         if (address.country) {
             await this.loadStatesForCountry(address.country);
@@ -80,15 +81,20 @@ export class Address {
                 else if (normalizedMatch) {
                     address.state = normalizedMatch.value;
                 }
-                else
+                else if (partialMatch) {
                     address.state = partialMatch.value;
+                }
+                else {
+                    address.state = undefined;
+                }
             }
         }
+        SessionStore.setBillingAddress(address);
         this.addressUpdated.emit({
             country: address.country || '',
             address: address.address || '',
             city: address.city || '',
-            state: address.state || '',
+            state: address.state || undefined,
             zip: address.zip || '',
         });
         // Use requestAnimationFrame to ensure the form is rendered with the new state options
@@ -176,7 +182,7 @@ export class Address {
         return (h("div", null, this.renderAddressHeader(), h("rebill-address-form", { countryOptions: this.countryOptions, stateOptions: this.currentBillingStateOptions, errors: errorsToShow, disabled: this.disabled, onFieldChanged: e => this.handleInput(e.detail.field, e.detail.value), onSearchRequested: () => this.handleSearchEntry() })));
     }
     render() {
-        return (h("div", { key: '9bab5a0a737b99dd7d0966f6543b9e7a0d03753b' }, this.renderAddressForm()));
+        return (h("div", { key: 'f8078c9118473f6316e43558237a489de8e7e8bf' }, this.renderAddressForm()));
     }
     static get is() { return "rebill-address"; }
     static get originalStyleUrls() {

package/dist/collection/components/checkout/address/address.js.map

@@ -1 +1 @@
-{"version":3,"file":"address.js","sourceRoot":"","sources":["../../../../src/components/checkout/address/address.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, State } from '@stencil/core';\nimport { api } from '../../../api';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { onChange, sessionState, SessionStore } from '../../../store/session.store';\nimport { AddressComponents } from '../../../utils';\n\n@Component({\n  tag: 'rebill-address',\n  styleUrl: 'address.css',\n  shadow: false,\n})\nexport class Address {\n  @Element() el: HTMLElement;\n  @Prop({ mutable: true, reflect: true }) billingView: 'search' | 'form' = 'search';\n  @State() currentBillingStateOptions: { label: string; value: string }[] = [];\n  @State() isLoadingAddress: boolean = false;\n  @Prop() disabled: boolean = false;\n\n  @Prop() countryOptions: { label: string; value: string }[] = [];\n\n  @Prop() errors?: {\n    'billing-country': string;\n    'billing-state': string;\n    'billing-address': string;\n    'billing-city': string;\n    'billing-zip': string;\n  } | null = null;\n\n  private unsubscribeAddressStore?: () => void;\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  @Event() addressUpdated: EventEmitter<{\n    country: string;\n    state: string;\n    address: string;\n    city: string;\n    zip: string;\n  }>;\n\n  componentDidLoad() {\n    this.unsubscribeAddressStore = onChange('data', () => {\n      const billingAddress = sessionState.data.userInformation.address?.billingAddress;\n\n      if (billingAddress) {\n        const addressData: AddressComponents = {\n          country: billingAddress.country || '',\n          state: billingAddress.state || '',\n          address: billingAddress.address || '',\n          city: billingAddress.city || '',\n          zip: billingAddress.zip || '',\n        };\n\n        this.emitInputEventsForAddress(addressData);\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribeAddressStore) {\n      this.unsubscribeAddressStore();\n    }\n  }\n\n  private async handleAddressSelected(address: AddressComponents) {\n    this.isLoadingAddress = true;\n\n    // Normalize text function for handling accents and special characters\n    const normalizeText = (text: string) => {\n      return text\n        .toLowerCase()\n        .normalize('NFD')\n        .replace(/[\\u0300-\\u036f]/g, '') // Remove accents\n        .trim();\n    };\n\n    SessionStore.setBillingAddress(address);\n    this.billingView = 'form';\n\n    if (address.country) {\n      await this.loadStatesForCountry(address.country);\n\n      // Compare Google state with API states\n      if (address.state && this.currentBillingStateOptions.length > 0) {\n        const exactMatch = this.currentBillingStateOptions.find(\n          option => option.value.toLowerCase() === address.state.toLowerCase(),\n        );\n\n        const partialMatch = this.currentBillingStateOptions.find(\n          option =>\n            option.value.toLowerCase().includes(address.state.toLowerCase()) ||\n            address.state.toLowerCase().includes(option.value.toLowerCase()),\n        );\n\n        // Try to find matches with common variations\n        const normalizedGoogleState = normalizeText(address.state)\n          .replace('ciudad de ', '')\n          .replace('estado de ', '')\n          .replace('provincia de ', '');\n\n        const normalizedMatch = this.currentBillingStateOptions.find(option => {\n          const normalizedOption = normalizeText(option.value)\n            .replace('ciudad de ', '')\n            .replace('estado de ', '')\n            .replace('provincia de ', '');\n\n          const matches =\n            normalizedOption === normalizedGoogleState ||\n            normalizedOption.startsWith(normalizedGoogleState + ' ') ||\n            normalizedGoogleState.startsWith(normalizedOption + ' ');\n          return matches;\n        });\n\n        if (exactMatch) {\n          address.state = exactMatch.value;\n        } else if (normalizedMatch) {\n          address.state = normalizedMatch.value;\n        } else address.state = partialMatch.value;\n      }\n    }\n    this.addressUpdated.emit({\n      country: address.country || '',\n      address: address.address || '',\n      city: address.city || '',\n      state: address.state || '',\n      zip: address.zip || '',\n    });\n\n    // Use requestAnimationFrame to ensure the form is rendered with the new state options\n    // before emitting events. This ensures the state field can be properly populated.\n    requestAnimationFrame(() => {\n      this.emitInputEventsForAddress(address);\n      setTimeout(() => {\n        this.isLoadingAddress = false;\n      }, 500);\n    });\n  }\n\n  private emitInputEventsForAddress(address: AddressComponents) {\n    // Emit input events for each address field that has a value\n    // This mimics user input to properly clear validation errors\n    const fields = [\n      { id: `billing-country`, value: address.country },\n      { id: `billing-address`, value: address.address },\n      { id: `billing-city`, value: address.city },\n      { id: `billing-state`, value: address.state },\n      { id: `billing-zip`, value: address.zip },\n    ];\n\n    fields.forEach(field => {\n      if (field.value) {\n        this.emitInputEvent(field.id, field.value);\n      }\n    });\n  }\n\n  private emitInputEvent(id: string, value: string) {\n    if (value) {\n      // Create and dispatch a custom input event that the form component can listen to\n      const inputEvent = new CustomEvent('input', {\n        detail: { id, value },\n        bubbles: true,\n        composed: true,\n      });\n      this.el.dispatchEvent(inputEvent);\n    }\n  }\n\n  private async loadStatesForCountry(countryCode: string) {\n    try {\n      const response = await api.data.getStates(countryCode);\n      const statesResponse = response.data;\n      const stateOptions =\n        statesResponse && statesResponse.states\n          ? statesResponse.states.map(state => ({ label: state, value: state }))\n          : [];\n\n      this.currentBillingStateOptions = stateOptions;\n    } catch (error) {\n      this.currentBillingStateOptions = [];\n    }\n  }\n\n  private handleManualEntry = () => {\n    this.billingView = 'form';\n  };\n\n  private handleSearchEntry = () => {\n    this.billingView = 'search';\n  };\n\n  private async handleInput(field: string, value: string) {\n    if (value === undefined) return;\n    SessionStore.setBillingAddress({ [field]: value } as any);\n    // Emit input event to form to sync with form data\n    this.emitInputEvent(`billing-${field}`, value);\n\n    // If country changes, load states for the new country\n    if (field === 'country') {\n      await this.loadStatesForCountry(value);\n      // Clear the current state selection since the country changed\n      SessionStore.setBillingAddress({ state: '' } as any);\n    }\n  }\n\n  private renderAddressHeader() {\n    return (\n      <div class=\"billing-header-row\">\n        <rebill-typography variant=\"body2\">\n          {I18nService.translate('billingAddress.title')}\n        </rebill-typography>\n      </div>\n    );\n  }\n\n  private renderAddressForm() {\n    if (this.billingView === 'search') {\n      const addressError =\n        this.translateError(this.errors?.['billing-address']) ||\n        this.translateError(this.errors?.['billing-country']) ||\n        this.translateError(this.errors?.['billing-state']) ||\n        this.translateError(this.errors?.['billing-city']) ||\n        this.translateError(this.errors?.['billing-zip']) ||\n        '';\n      return (\n        <div>\n          {this.renderAddressHeader()}\n          <rebill-address-search\n            onAddressSelected={e => this.handleAddressSelected(e.detail)}\n            onManualEntryRequested={() => this.handleManualEntry()}\n            error={addressError}\n            disabled={this.disabled}\n          />\n        </div>\n      );\n    }\n\n    const errorsToShow = this.isLoadingAddress ? null : this.errors;\n\n    return (\n      <div>\n        {this.renderAddressHeader()}\n        <rebill-address-form\n          countryOptions={this.countryOptions}\n          stateOptions={this.currentBillingStateOptions}\n          errors={errorsToShow}\n          disabled={this.disabled}\n          onFieldChanged={e => this.handleInput(e.detail.field, e.detail.value)}\n          onSearchRequested={() => this.handleSearchEntry()}\n        />\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <div>\n        {/* Billing Address */}\n        {this.renderAddressForm()}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"address.js","sourceRoot":"","sources":["../../../../src/components/checkout/address/address.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, State } from '@stencil/core';\nimport { api } from '../../../api';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { onChange, sessionState, SessionStore } from '../../../store/session.store';\nimport { AddressComponents } from '../../../utils';\n\n@Component({\n  tag: 'rebill-address',\n  styleUrl: 'address.css',\n  shadow: false,\n})\nexport class Address {\n  @Element() el: HTMLElement;\n  @Prop({ mutable: true, reflect: true }) billingView: 'search' | 'form' = 'search';\n  @State() currentBillingStateOptions: { label: string; value: string }[] = [];\n  @State() isLoadingAddress: boolean = false;\n  @Prop() disabled: boolean = false;\n\n  @Prop() countryOptions: { label: string; value: string }[] = [];\n\n  @Prop() errors?: {\n    'billing-country': string;\n    'billing-state': string;\n    'billing-address': string;\n    'billing-city': string;\n    'billing-zip': string;\n  } | null = null;\n\n  private unsubscribeAddressStore?: () => void;\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  @Event() addressUpdated: EventEmitter<{\n    country: string;\n    state: string;\n    address: string;\n    city: string;\n    zip: string;\n  }>;\n\n  componentDidLoad() {\n    this.unsubscribeAddressStore = onChange('data', () => {\n      const billingAddress = sessionState.data.userInformation.address?.billingAddress;\n\n      if (billingAddress) {\n        const addressData: AddressComponents = {\n          country: billingAddress.country || '',\n          state: billingAddress.state || '',\n          address: billingAddress.address || '',\n          city: billingAddress.city || '',\n          zip: billingAddress.zip || '',\n        };\n\n        this.emitInputEventsForAddress(addressData);\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribeAddressStore) {\n      this.unsubscribeAddressStore();\n    }\n  }\n\n  private async handleAddressSelected(address: AddressComponents) {\n    this.isLoadingAddress = true;\n\n    // Normalize text function for handling accents and special characters\n    const normalizeText = (text: string) => {\n      return text\n        .toLowerCase()\n        .normalize('NFD')\n        .replace(/[\\u0300-\\u036f]/g, '') // Remove accents\n        .replace(/\\./g, '') // Remove dots\n        .replace(/\\s+/g, ' ') // Normalize spaces\n        .trim();\n    };\n    this.billingView = 'form';\n\n    if (address.country) {\n      await this.loadStatesForCountry(address.country);\n\n      // Compare Google state with API states\n      if (address.state && this.currentBillingStateOptions.length > 0) {\n        const exactMatch = this.currentBillingStateOptions.find(\n          option => option.value.toLowerCase() === address.state.toLowerCase(),\n        );\n\n        const partialMatch = this.currentBillingStateOptions.find(\n          option =>\n            option.value.toLowerCase().includes(address.state.toLowerCase()) ||\n            address.state.toLowerCase().includes(option.value.toLowerCase()),\n        );\n\n        // Try to find matches with common variations\n        const normalizedGoogleState = normalizeText(address.state)\n          .replace('ciudad de ', '')\n          .replace('estado de ', '')\n          .replace('provincia de ', '');\n\n        const normalizedMatch = this.currentBillingStateOptions.find(option => {\n          const normalizedOption = normalizeText(option.value)\n            .replace('ciudad de ', '')\n            .replace('estado de ', '')\n            .replace('provincia de ', '');\n\n          const matches =\n            normalizedOption === normalizedGoogleState ||\n            normalizedOption.startsWith(normalizedGoogleState + ' ') ||\n            normalizedGoogleState.startsWith(normalizedOption + ' ');\n          return matches;\n        });\n\n        if (exactMatch) {\n          address.state = exactMatch.value;\n        } else if (normalizedMatch) {\n          address.state = normalizedMatch.value;\n        } else if (partialMatch) {\n          address.state = partialMatch.value;\n        } else {\n          address.state = undefined;\n        }\n      }\n    }\n    SessionStore.setBillingAddress(address);\n\n    this.addressUpdated.emit({\n      country: address.country || '',\n      address: address.address || '',\n      city: address.city || '',\n      state: address.state || undefined,\n      zip: address.zip || '',\n    });\n\n    // Use requestAnimationFrame to ensure the form is rendered with the new state options\n    // before emitting events. This ensures the state field can be properly populated.\n    requestAnimationFrame(() => {\n      this.emitInputEventsForAddress(address);\n      setTimeout(() => {\n        this.isLoadingAddress = false;\n      }, 500);\n    });\n  }\n\n  private emitInputEventsForAddress(address: AddressComponents) {\n    // Emit input events for each address field that has a value\n    // This mimics user input to properly clear validation errors\n    const fields = [\n      { id: `billing-country`, value: address.country },\n      { id: `billing-address`, value: address.address },\n      { id: `billing-city`, value: address.city },\n      { id: `billing-state`, value: address.state },\n      { id: `billing-zip`, value: address.zip },\n    ];\n\n    fields.forEach(field => {\n      if (field.value) {\n        this.emitInputEvent(field.id, field.value);\n      }\n    });\n  }\n\n  private emitInputEvent(id: string, value: string) {\n    if (value) {\n      // Create and dispatch a custom input event that the form component can listen to\n      const inputEvent = new CustomEvent('input', {\n        detail: { id, value },\n        bubbles: true,\n        composed: true,\n      });\n      this.el.dispatchEvent(inputEvent);\n    }\n  }\n\n  private async loadStatesForCountry(countryCode: string) {\n    try {\n      const response = await api.data.getStates(countryCode);\n      const statesResponse = response.data;\n      const stateOptions =\n        statesResponse && statesResponse.states\n          ? statesResponse.states.map(state => ({ label: state, value: state }))\n          : [];\n\n      this.currentBillingStateOptions = stateOptions;\n    } catch (error) {\n      this.currentBillingStateOptions = [];\n    }\n  }\n\n  private handleManualEntry = () => {\n    this.billingView = 'form';\n  };\n\n  private handleSearchEntry = () => {\n    this.billingView = 'search';\n  };\n\n  private async handleInput(field: string, value: string) {\n    if (value === undefined) return;\n    SessionStore.setBillingAddress({ [field]: value } as any);\n    // Emit input event to form to sync with form data\n    this.emitInputEvent(`billing-${field}`, value);\n\n    // If country changes, load states for the new country\n    if (field === 'country') {\n      await this.loadStatesForCountry(value);\n      // Clear the current state selection since the country changed\n      SessionStore.setBillingAddress({ state: '' } as any);\n    }\n  }\n\n  private renderAddressHeader() {\n    return (\n      <div class=\"billing-header-row\">\n        <rebill-typography variant=\"body2\">\n          {I18nService.translate('billingAddress.title')}\n        </rebill-typography>\n      </div>\n    );\n  }\n\n  private renderAddressForm() {\n    if (this.billingView === 'search') {\n      const addressError =\n        this.translateError(this.errors?.['billing-address']) ||\n        this.translateError(this.errors?.['billing-country']) ||\n        this.translateError(this.errors?.['billing-state']) ||\n        this.translateError(this.errors?.['billing-city']) ||\n        this.translateError(this.errors?.['billing-zip']) ||\n        '';\n      return (\n        <div>\n          {this.renderAddressHeader()}\n          <rebill-address-search\n            onAddressSelected={e => this.handleAddressSelected(e.detail)}\n            onManualEntryRequested={() => this.handleManualEntry()}\n            error={addressError}\n            disabled={this.disabled}\n          />\n        </div>\n      );\n    }\n\n    const errorsToShow = this.isLoadingAddress ? null : this.errors;\n\n    return (\n      <div>\n        {this.renderAddressHeader()}\n        <rebill-address-form\n          countryOptions={this.countryOptions}\n          stateOptions={this.currentBillingStateOptions}\n          errors={errorsToShow}\n          disabled={this.disabled}\n          onFieldChanged={e => this.handleInput(e.detail.field, e.detail.value)}\n          onSearchRequested={() => this.handleSearchEntry()}\n        />\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <div>\n        {/* Billing Address */}\n        {this.renderAddressForm()}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/shared/inputs/input-checkbox/input-checkbox.css

@@ -73,6 +73,17 @@ select.input-element:disabled {
   margin-top: 0.375rem;
 }
 
+/* Fix para evitar zoom en dispositivos móviles */
+@media screen and (max-width: 768px) {
+  .input-element {
+    font-size: 1rem;
+  }
+
+  .input-element::placeholder {
+    font-size: 1rem;
+  }
+}
+
 
 .checkbox-container {
   display: flex;

package/dist/collection/components/shared/inputs/input-combo/input-combo.css

@@ -73,6 +73,17 @@ select.input-element:disabled {
   margin-top: 0.375rem;
 }
 
+/* Fix para evitar zoom en dispositivos móviles */
+@media screen and (max-width: 768px) {
+  .input-element {
+    font-size: 1rem;
+  }
+
+  .input-element::placeholder {
+    font-size: 1rem;
+  }
+}
+
 
 :host {
   display: block;
@@ -341,3 +352,22 @@ select.input-element:disabled {
 .select-dropdown::-webkit-scrollbar-thumb:hover {
   background-color: var(--rebill-color-text-secondary);
 }
+
+/* Fix para evitar zoom en dispositivos móviles */
+@media screen and (max-width: 768px) {
+  .select-combo-trigger {
+    font-size: 1rem;
+  }
+
+  .select-option {
+    font-size: 1rem;
+  }
+
+  .combo-input {
+    font-size: 1rem;
+  }
+
+  .combo-input::placeholder {
+    font-size: 1rem;
+  }
+}

package/dist/collection/components/shared/inputs/input-phone/input-phone.css

@@ -73,6 +73,17 @@ select.input-element:disabled {
   margin-top: 0.375rem;
 }
 
+/* Fix para evitar zoom en dispositivos móviles */
+@media screen and (max-width: 768px) {
+  .input-element {
+    font-size: 1rem;
+  }
+
+  .input-element::placeholder {
+    font-size: 1rem;
+  }
+}
+
 
 :host {
   display: block;
@@ -134,7 +145,7 @@ select.input-element:disabled {
 }
 
 .flag {
-  font-size: 1rem;
+  font-size: 0.875rem;
   margin-right: 4px;
 }
 
@@ -334,3 +345,30 @@ select.input-element:disabled {
   font-style: italic;
   border-bottom: 1px solid var(--rebill-color-border);
 }
+
+/* Fix para evitar zoom en dispositivos móviles */
+@media screen and (max-width: 768px) {
+  .phone-number-input {
+    font-size: 1rem;
+  }
+
+  .phone-number-input::placeholder {
+    font-size: 1rem;
+  }
+
+  .dial-code {
+    font-size: 1rem;
+  }
+
+  .country-option .country-name {
+    font-size: 1rem;
+  }
+
+  .country-option .dial-code {
+    font-size: 1rem;
+  }
+
+  .search-input {
+    font-size: 1rem;
+  }
+}