@dropi/ui 0.1.43 → 0.1.44

package/dist/dropi-ui/dropi-input.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-input.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-input/dropi-input.css?tag=dropi-input&encapsulation=shadow","src/components/dropi-input/dropi-input.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n/* ── Fixed label layout ────────────────────────────────────── */\n.fixed-label-container {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 8px;\n}\n\n.input-label {\n  color: var(--Gray-Gray-600, #475066);\n  font-size: var(--font-size-xs, 10px);\n  font-weight: var(--font-weight-regular, 400);\n  text-align: left;\n}\n\n.asterisk {\n  color: var(--Error-Error-500, #f46a6b);\n}\n\n/* ── Form group / container ────────────────────────────────── */\n.form-group {\n  position: relative;\n  width: 100%;\n}\n\n.input-container {\n  position: relative;\n}\n\n/* ── Icons ─────────────────────────────────────────────────── */\n.icon-input {\n  position: absolute;\n  top: 50%;\n  left: 12px;\n  transform: translateY(-50%);\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.icon-input-password {\n  position: absolute;\n  top: 50%;\n  right: 13px;\n  transform: translateY(-50%);\n  cursor: pointer;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* ── Base input ─────────────────────────────────────────────── */\n.form-control {\n  box-sizing: border-box;\n  width: 100%;\n  padding: var(--Size-2, 8px);\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  background: var(--Neutral-White, #ffffff);\n  font-size: var(--font-size-s, 12px);\n  font-family: inherit;\n  color: var(--Gray-Gray-700, #32394d);\n  transition: border-color 0.3s ease-in-out;\n  height: 40px;\n  outline: none;\n  appearance: none;\n  text-align: left;\n}\n\n.form-control::placeholder {\n  color: transparent;\n  transition: color 0.2s ease-in-out;\n}\n\n/* Show placeholder only on focus or in fixedLabel mode */\n.form-control:focus::placeholder,\n.fixed-label-input::placeholder {\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\n.form-control:focus {\n  border-color: var(--Info-Info-500, #50a5f1);\n}\n\n.form-control-valid {\n  border-color: var(--Gray-Gray-400, #858ea6) !important;\n  color: var(--Gray-Gray-600, #475066);\n}\n\n.form-control-invalid {\n  border-color: var(--Error-Error-500, #f46a6b) !important;\n  color: var(--Gray-Gray-600, #475066);\n}\n\n.form-control:disabled {\n  border-color: var(--Gray-Gray-200, #c3c9d9) !important;\n  color: var(--Gray-Gray-400, #858ea6);\n  background-color: var(--Gray-Gray-50, #f7f8fa);\n  cursor: not-allowed;\n}\n\n.padding-icon {\n  padding-left: 40px;\n}\n\n/* When icon is always visible, shift the floating label right to avoid overlap */\n.input-container--has-icon label.label-bottom {\n  left: 40px;\n}\n\n/* When focused or has value, float up to left: 0 regardless */\n.input-container--has-icon .form-control:focus + label.label-bottom,\n.input-container--has-icon .form-control:not(:placeholder-shown) + label.label-bottom {\n  left: 0;\n}\n\n/* Password: hide characters via CSS (no type=password needed for font trick) */\n.text-password {\n  -webkit-text-security: disc;\n  text-security: disc;\n}\n\n/* ── Floating label ─────────────────────────────────────────── */\nlabel.label-bottom {\n  position: absolute;\n  font-weight: var(--font-weight-regular, 400);\n  top: 10px;\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-500, #69738c);\n  left: 10px;\n  transition: all 0.2s ease-in-out;\n  pointer-events: none;\n  overflow: hidden;\n  width: 90%;\n  white-space: nowrap;\n}\n\n/* Float up when focused or has value */\n.form-control:focus+label.label-bottom,\n.form-control:not(:placeholder-shown)+label.label-bottom {\n  top: -22px;\n  left: 0;\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Gray-Gray-600, #475066);\n  width: unset;\n}\n\n.form-control:disabled+label.label-bottom {\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\n/* ── Helper text ────────────────────────────────────────────── */\n.form-control-helper {\n  display: flex;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  gap: 4px;\n  align-items: center;\n  margin-top: 4px;\n}\n\n.form-control-helper span {\n  display: block;\n  color: var(--Gray-Gray-600, #475066);\n  font-size: var(--font-size-xs, 10px);\n}\n\n.invalid-color {\n  color: var(--Error-Error-500, #f46a6b) !important;\n}\n\n.disabled-helper {\n  color: var(--Gray-Gray-400, #858ea6) !important;\n}\n\n.disabled-helper {\n  color: var(--Gray-Gray-400, #858ea6) !important;\n}","import { Component, Prop, State, Event, EventEmitter, AttachInternals, Watch, h } from '@stencil/core';\n\nexport type InputMode = 'text' | 'numeric' | 'decimal' | 'tel' | 'email' | 'url' | 'search';\n\n/**\n * @component dropi-input\n * Text input with floating label, validation states, password toggle,\n * number/letter restrictions, thousand separator, and native form association.\n *\n * ## Form usage (native HTML form)\n * ```html\n * <form>\n *   <dropi-input name=\"email\" label=\"Email\" required></dropi-input>\n * </form>\n * ```\n *\n * ## Controlled usage (React / Vue / Angular)\n * Pass `value` and listen to `dropiInput` to update.\n */\n@Component({\n  tag: 'dropi-input',\n  styleUrl: 'dropi-input.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DropiInput {\n  @AttachInternals() internals: ElementInternals;\n\n  // ── Identification ──────────────────────────────────────────\n  /** Input id. Defaults to label label. */\n  @Prop({ mutable: true }) inputId: string = '';\n  /** Name attribute for native form submission */\n  @Prop() name: string = '';\n\n  // ── Content ─────────────────────────────────────────────────\n  /** Floating or fixed label text */\n  @Prop({ mutable: true }) label: string = '';\n  /** Placeholder text (visible in fixedLabel mode or on focus) */\n  @Prop({ mutable: true }) placeholder: string = ' ';\n  /** Current value (controlled) */\n  @Prop({ mutable: true }) value: string = '';\n  /** Max character length */\n  @Prop({ mutable: true }) maxLength: number;\n\n  // ── Behavior ────────────────────────────────────────────────\n  /** Disable the input */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Mark as required (shows asterisk when showObligatoryAsterisk is true) */\n  @Prop({ reflect: true }) required: boolean = false;\n  /** Show the required asterisk on the label */\n  @Prop({ mutable: true }) showObligatoryAsterisk: boolean = true;\n  /** Show label above the input (fixed), instead of floating inside */\n  @Prop() fixedLabel: boolean = false;\n  /** Keyboard input mode hint */\n  @Prop({ mutable: true }) inputMode: InputMode = 'text';\n\n  // ── Input type modifiers ────────────────────────────────────\n  /** Show password visibility toggle (renders as password field) */\n  @Prop({ mutable: true }) passwordInput: boolean = false;\n  /** Apply thousand separator formatting (e.g. 1,000,000) */\n  @Prop({ mutable: true }) isMoneyInput: boolean = false;\n  /** Apply thousand separator without currency symbol */\n  @Prop({ mutable: true }) isThousandSeparator: boolean = false;\n  /** Only allow numeric characters */\n  @Prop({ mutable: true }) isNumericInput: boolean = false;\n  /** Allow decimal point when isNumericInput is true */\n  @Prop({ mutable: true }) allowDecimals: boolean = false;\n  /** Only allow letter characters */\n  @Prop({ mutable: true }) isLettersOnly: boolean = false;\n\n  // ── Icon ────────────────────────────────────────────────────\n  /** Icon name shown inside the input (only visible when value is not empty) */\n  @Prop({ mutable: true }) icon: string = '';\n  /** Color token for the icon */\n  @Prop({ mutable: true }) iconColor: string = 'Gray-Gray-400';\n\n  // ── Validation ──────────────────────────────────────────────\n  /** Mark the field as invalid (consumer-controlled) */\n  @Prop({ mutable: true }) hasError: boolean = false;\n  /** Helper / error text shown below the field */\n  @Prop({ mutable: true }) textHelper: string = '';\n  /** Only show textHelper when the field is invalid */\n  @Prop({ mutable: true }) showHelperOnlyOnError: boolean = false;\n\n  // ── Angular-parity ──────────────────────────────────────────\n  /**\n   * Convenience object prop — matches Angular `inputProperties: InputProperties`.\n   * Fields: id, label, placeholder, maxLength, textHelper, passwordInput,\n   * icon, iconColor, isMoneyInput, showObligatoryAsterisk, isNumericInput,\n   * allowDecimals, isThousandSeparator, showHelperOnlyOnError,\n   * isLettersOnly, inputMode.\n   * Note: `formControl` is not supported; use `value` + onInput event instead.\n   */\n  @Prop() inputProperties: any = null;\n\n  // ── Internal state ──────────────────────────────────────────\n  @State() private showPassword: boolean = false;\n  @State() private touched: boolean = false;\n\n  // ── Events ──────────────────────────────────────────────────\n  /** Emitted on every keystroke with the current value */\n  @Event() dropiInput: EventEmitter<string>;\n  /** Emitted on blur with the final value */\n  @Event() dropiChange: EventEmitter<string>;\n  /** Emitted on focus */\n  @Event() dropiFocus: EventEmitter<void>;\n  /** Emitted on blur */\n  @Event() dropiBlur: EventEmitter<void>;\n\n  @Watch('inputProperties')\n  inputPropertiesChanged(val: any) {\n    if (!val) return;\n    if (val.id !== undefined) this.inputId = val.id;\n    if (val.inputId !== undefined) this.inputId = val.inputId;\n    if (val.label !== undefined) this.label = val.label;\n    if (val.placeholder !== undefined) this.placeholder = val.placeholder;\n    if (val.maxLength !== undefined) this.maxLength = val.maxLength;\n    if (val.textHelper !== undefined) this.textHelper = val.textHelper;\n    if (val.passwordInput !== undefined) this.passwordInput = val.passwordInput;\n    if (val.isPasswordInput !== undefined) this.passwordInput = val.isPasswordInput; // Fallback\n    if (val.icon !== undefined) this.icon = val.icon;\n    if (val.iconColor !== undefined) this.iconColor = val.iconColor;\n    if (val.isMoneyInput !== undefined) this.isMoneyInput = val.isMoneyInput;\n    if (val.showObligatoryAsterisk !== undefined) this.showObligatoryAsterisk = val.showObligatoryAsterisk;\n    if (val.isNumericInput !== undefined) this.isNumericInput = val.isNumericInput;\n    if (val.allowDecimals !== undefined) this.allowDecimals = val.allowDecimals;\n    if (val.isThousandSeparator !== undefined) this.isThousandSeparator = val.isThousandSeparator;\n    if (val.showHelperOnlyOnError !== undefined) this.showHelperOnlyOnError = val.showHelperOnlyOnError;\n    if (val.isLettersOnly !== undefined) this.isLettersOnly = val.isLettersOnly;\n    if (val.inputMode !== undefined) this.inputMode = val.inputMode;\n  }\n\n  @Watch('value')\n  valueChanged(val: string) {\n    this.internals.setFormValue(val);\n  }\n\n  @Watch('disabled')\n  disabledChanged(val: boolean) {\n    this.internals.setValidity(val ? { customError: true } : {}, val ? 'Field is disabled' : '');\n  }\n\n  componentWillLoad() {\n    this.internals.setFormValue(this.value ?? '');\n    if (this.inputProperties) this.inputPropertiesChanged(this.inputProperties);\n  }\n\n  // ── Handlers ────────────────────────────────────────────────\n\n  private handleInput(e: InputEvent) {\n    let val = (e.target as HTMLInputElement).value;\n\n    if (this.isNumericInput) val = this.filterNumbers(val);\n    if (this.isLettersOnly) val = this.filterLetters(val);\n    if (this.isMoneyInput || this.isThousandSeparator) val = this.formatThousands(val, this.isMoneyInput);\n\n    this.value = val;\n    this.internals.setFormValue(val);\n    this.dropiInput.emit(val);\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if ((this.isNumericInput || this.isMoneyInput || this.isThousandSeparator) && !this.isAllowedNumberKey(e)) {\n      e.preventDefault();\n    }\n    if (this.isLettersOnly && !this.isAllowedLetterKey(e)) {\n      e.preventDefault();\n    }\n  }\n\n  private handleFocus() {\n    this.dropiFocus.emit();\n  }\n\n  private handleBlur() {\n    this.touched = true;\n    this.dropiChange.emit(this.value);\n    this.dropiBlur.emit();\n  }\n\n  private togglePassword() {\n    if (this.disabled) return;\n    this.showPassword = !this.showPassword;\n  }\n\n  // ── Helpers ─────────────────────────────────────────────────\n\n  private filterNumbers(val: string): string {\n    const pattern = this.allowDecimals ? /[^0-9.]/g : /[^0-9]/g;\n    return val.replace(pattern, '');\n  }\n\n  private filterLetters(val: string): string {\n    return val.replace(/[^a-zA-ZáéíóúÁÉÍÓÚñÑüÜ\\s]/g, '');\n  }\n\n  private isAllowedNumberKey(e: KeyboardEvent): boolean {\n    const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End'];\n    if (allowed.includes(e.key)) return true;\n    if (e.ctrlKey || e.metaKey) return true; // copy/paste/select-all\n    if (/^[0-9]$/.test(e.key)) return true;\n    if (this.allowDecimals && e.key === '.') return true;\n    return false;\n  }\n\n  private isAllowedLetterKey(e: KeyboardEvent): boolean {\n    const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End', ' '];\n    if (allowed.includes(e.key)) return true;\n    if (e.ctrlKey || e.metaKey) return true;\n    return /^[a-zA-ZáéíóúÁÉÍÓÚñÑüÜ]$/.test(e.key);\n  }\n\n  private formatThousands(val: string, withCurrency: boolean): string {\n    const raw = val.replace(/[^0-9.]/g, '');\n    const [integer, decimal] = raw.split('.');\n    const formatted = integer.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\n    const result = decimal !== undefined ? `${formatted}.${decimal}` : formatted;\n    return withCurrency ? `$${result}` : result;\n  }\n\n  // ── Computed ─────────────────────────────────────────────────\n\n  private get resolvedId(): string {\n    return this.inputId || this.label;\n  }\n\n  private get inputType(): string {\n    if (this.passwordInput) return this.showPassword ? 'text' : 'password';\n    return 'text';\n  }\n\n  private get showHelper(): boolean {\n    if (!this.textHelper) return false;\n    if (this.showHelperOnlyOnError) return this.hasError && this.touched;\n    return true;\n  }\n\n  private get isInvalid(): boolean {\n    return this.hasError && this.touched;\n  }\n\n  // ── Render ───────────────────────────────────────────────────\n\n  render() {\n    const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;\n    const showIconInline = !!this.icon;\n\n    return (\n      <div class={{ 'fixed-label-container': this.fixedLabel }}>\n        {/* Fixed label above input */}\n        {this.fixedLabel && (\n          <div class=\"input-label Body-S-Regular\">\n            {this.label}\n            {showObligatoryAsterisk && <span class=\"asterisk\"> *</span>}\n          </div>\n        )}\n\n        <div class=\"form-group\">\n          <div class={{ 'input-container': true, 'input-container--has-icon': showIconInline }}>\n            {/* Inline icon (left) */}\n            {showIconInline && (\n              <dropi-icon\n                class=\"icon-input\"\n                name={this.icon}\n                color={this.iconColor}\n                iconWidth=\"20px\"\n                iconHeight=\"20px\"\n                style={{ width: '20px', height: '20px' }}\n              />\n            )}\n\n            {/* Password toggle (right) */}\n            {this.passwordInput && (\n              <dropi-icon\n                class=\"icon-input-password\"\n                name={this.showPassword ? 'Eye' : 'Eye-crossed'}\n                iconWidth=\"20px\"\n                iconHeight=\"20px\"\n                style={{ width: '20px', height: '20px' }}\n                color=\"Gray-Gray-500\"\n                onClick={() => this.togglePassword()}\n              />\n            )}\n\n            {/* Native input */}\n            <input\n              id={this.resolvedId}\n              class={{\n                'form-control': true,\n                'form-control-valid': !this.isInvalid && this.touched && !!this.value,\n                'form-control-invalid': this.isInvalid,\n                'padding-icon': showIconInline,\n                'text-password': this.passwordInput && !this.showPassword,\n                'fixed-label-input': this.fixedLabel,\n              }}\n              type={this.inputType}\n              value={this.value}\n              placeholder={this.fixedLabel ? this.placeholder : ' '}\n              disabled={this.disabled}\n              required={this.required}\n              maxLength={this.maxLength}\n              inputMode={this.inputMode}\n              data-cy={undefined}\n              onInput={e => this.handleInput(e as InputEvent)}\n              onKeyDown={e => this.handleKeyDown(e as KeyboardEvent)}\n              onFocus={() => this.handleFocus()}\n              onBlur={() => this.handleBlur()}\n            />\n\n            {/* Floating label (only when not fixedLabel) */}\n            {!this.fixedLabel && (\n              <label class=\"Body-S-Regular label-bottom\" htmlFor={this.resolvedId}>\n                {this.label}\n                {showObligatoryAsterisk && <span class=\"asterisk\"> *</span>}\n              </label>\n            )}\n\n            {/* Helper / error text */}\n            {this.showHelper && (\n              <div class=\"form-control-helper\">\n                {this.isInvalid && <dropi-icon name=\"Warning-circle\" iconWidth=\"12px\" iconHeight=\"12px\" color=\"Error-Error-500\" />}\n                <span\n                  class={{\n                    'disabled-helper': this.disabled,\n                    'invalid-color': this.isInvalid,\n                  }}\n                >\n                  {this.textHelper}\n                </span>\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-input.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-input/dropi-input.css?tag=dropi-input&encapsulation=shadow","src/components/dropi-input/dropi-input.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n/* ── Fixed label layout ────────────────────────────────────── */\n.fixed-label-container {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 8px;\n}\n\n.input-label {\n  color: var(--Gray-Gray-600, #475066);\n  font-size: var(--font-size-xs, 10px);\n  font-weight: var(--font-weight-regular, 400);\n  text-align: left;\n}\n\n.asterisk {\n  color: var(--Error-Error-500, #f46a6b);\n}\n\n/* ── Form group / container ────────────────────────────────── */\n.form-group {\n  position: relative;\n  width: 100%;\n}\n\n.input-container {\n  position: relative;\n}\n\n/* ── Icons ─────────────────────────────────────────────────── */\n.icon-input {\n  position: absolute;\n  top: 50%;\n  left: 12px;\n  transform: translateY(-50%);\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.icon-input-password {\n  position: absolute;\n  top: 50%;\n  right: 13px;\n  transform: translateY(-50%);\n  cursor: pointer;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* ── Base input ─────────────────────────────────────────────── */\n.form-control {\n  box-sizing: border-box;\n  width: 100%;\n  padding: var(--Size-2, 8px);\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  background: var(--Neutral-White, #ffffff);\n  font-size: var(--font-size-s, 12px);\n  font-family: inherit;\n  color: var(--Gray-Gray-700, #32394d);\n  transition: border-color 0.3s ease-in-out;\n  height: 40px;\n  outline: none;\n  appearance: none;\n  text-align: left;\n}\n\n.form-control::placeholder {\n  color: transparent;\n  transition: color 0.2s ease-in-out;\n}\n\n/* Show placeholder only on focus or in fixedLabel mode */\n.form-control:focus::placeholder,\n.fixed-label-input::placeholder {\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\n.form-control:focus {\n  border-color: var(--Info-Info-500, #50a5f1);\n}\n\n.form-control-valid {\n  border-color: var(--Gray-Gray-400, #858ea6) !important;\n  color: var(--Gray-Gray-600, #475066);\n}\n\n.form-control-invalid {\n  border-color: var(--Error-Error-500, #f46a6b) !important;\n  color: var(--Gray-Gray-600, #475066);\n}\n\n.form-control:disabled {\n  border-color: var(--Gray-Gray-200, #c3c9d9) !important;\n  color: var(--Gray-Gray-400, #858ea6);\n  background-color: var(--Gray-Gray-50, #f7f8fa);\n  cursor: not-allowed;\n}\n\n.padding-icon {\n  padding-left: 40px;\n}\n\n/* When icon is always visible, shift the floating label right to avoid overlap */\n.input-container--has-icon label.label-bottom {\n  left: 40px;\n}\n\n/* When focused or has value, float up to left: 0 regardless */\n.input-container--has-icon .form-control:focus + label.label-bottom,\n.input-container--has-icon .form-control:not(:placeholder-shown) + label.label-bottom {\n  left: 0;\n}\n\n/* Password: hide characters via CSS (no type=password needed for font trick) */\n.text-password {\n  -webkit-text-security: disc;\n  text-security: disc;\n}\n\n/* ── Floating label ─────────────────────────────────────────── */\nlabel.label-bottom {\n  position: absolute;\n  font-weight: var(--font-weight-regular, 400);\n  top: 10px;\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-500, #69738c);\n  left: 10px;\n  transition: all 0.2s ease-in-out;\n  pointer-events: none;\n  overflow: hidden;\n  width: 90%;\n  white-space: nowrap;\n}\n\n/* Float up when focused or has value */\n.form-control:focus+label.label-bottom,\n.form-control:not(:placeholder-shown)+label.label-bottom {\n  top: -22px;\n  left: 0;\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Gray-Gray-600, #475066);\n  width: unset;\n}\n\n.form-control:disabled+label.label-bottom {\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\n/* ── Helper text ────────────────────────────────────────────── */\n.form-control-helper {\n  display: flex;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  gap: 4px;\n  align-items: center;\n  margin-top: 4px;\n}\n\n.form-control-helper span {\n  display: block;\n  color: var(--Gray-Gray-600, #475066);\n  font-size: var(--font-size-xs, 10px);\n}\n\n.invalid-color {\n  color: var(--Error-Error-500, #f46a6b) !important;\n}\n\n.disabled-helper {\n  color: var(--Gray-Gray-400, #858ea6) !important;\n}\n\n.disabled-helper {\n  color: var(--Gray-Gray-400, #858ea6) !important;\n}","import { Component, Prop, State, Event, EventEmitter, AttachInternals, Watch, h } from '@stencil/core';\n\nexport type InputMode = 'text' | 'numeric' | 'decimal' | 'tel' | 'email' | 'url' | 'search';\n\n/**\n * @component dropi-input\n * Text input with floating label, validation states, password toggle,\n * number/letter restrictions, thousand separator, and native form association.\n *\n * ## Form usage (native HTML form)\n * ```html\n * <form>\n *   <dropi-input name=\"email\" label=\"Email\" required></dropi-input>\n * </form>\n * ```\n *\n * ## Controlled usage (React / Vue / Angular)\n * Pass `value` and listen to `dropiInput` to update.\n */\n@Component({\n  tag: 'dropi-input',\n  styleUrl: 'dropi-input.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DropiInput {\n  @AttachInternals() internals: ElementInternals;\n\n  // ── Identification ──────────────────────────────────────────\n  /** Input id. Defaults to label label. */\n  @Prop({ mutable: true }) inputId: string = '';\n  /** Name attribute for native form submission */\n  @Prop({ reflect: true }) name: string = '';\n\n  // ── Content ─────────────────────────────────────────────────\n  /** Floating or fixed label text */\n  @Prop({ mutable: true }) label: string = '';\n  /** Placeholder text (visible in fixedLabel mode or on focus) */\n  @Prop({ mutable: true }) placeholder: string = ' ';\n  /** Current value (controlled) */\n  @Prop({ mutable: true }) value: string = '';\n  /** Max character length */\n  @Prop({ mutable: true }) maxLength: number;\n\n  // ── Behavior ────────────────────────────────────────────────\n  /** Disable the input */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Mark as required (shows asterisk when showObligatoryAsterisk is true) */\n  @Prop({ reflect: true }) required: boolean = false;\n  /** Show the required asterisk on the label */\n  @Prop({ mutable: true }) showObligatoryAsterisk: boolean = true;\n  /** Show label above the input (fixed), instead of floating inside */\n  @Prop() fixedLabel: boolean = false;\n  /** Keyboard input mode hint */\n  @Prop({ mutable: true }) inputMode: InputMode = 'text';\n\n  // ── Input type modifiers ────────────────────────────────────\n  /** Show password visibility toggle (renders as password field) */\n  @Prop({ mutable: true }) passwordInput: boolean = false;\n  /** Apply thousand separator formatting (e.g. 1,000,000) */\n  @Prop({ mutable: true }) isMoneyInput: boolean = false;\n  /** Apply thousand separator without currency symbol */\n  @Prop({ mutable: true }) isThousandSeparator: boolean = false;\n  /** Only allow numeric characters */\n  @Prop({ mutable: true }) isNumericInput: boolean = false;\n  /** Allow decimal point when isNumericInput is true */\n  @Prop({ mutable: true }) allowDecimals: boolean = false;\n  /** Only allow letter characters */\n  @Prop({ mutable: true }) isLettersOnly: boolean = false;\n\n  // ── Icon ────────────────────────────────────────────────────\n  /** Icon name shown inside the input (only visible when value is not empty) */\n  @Prop({ mutable: true }) icon: string = '';\n  /** Color token for the icon */\n  @Prop({ mutable: true }) iconColor: string = 'Gray-Gray-400';\n\n  // ── Validation ──────────────────────────────────────────────\n  /** Mark the field as invalid (consumer-controlled) */\n  @Prop({ mutable: true }) hasError: boolean = false;\n  /** Helper / error text shown below the field */\n  @Prop({ mutable: true }) textHelper: string = '';\n  /** Only show textHelper when the field is invalid */\n  @Prop({ mutable: true }) showHelperOnlyOnError: boolean = false;\n\n  // ── Angular-parity ──────────────────────────────────────────\n  /**\n   * Convenience object prop — matches Angular `inputProperties: InputProperties`.\n   * Fields: id, label, placeholder, maxLength, textHelper, passwordInput,\n   * icon, iconColor, isMoneyInput, showObligatoryAsterisk, isNumericInput,\n   * allowDecimals, isThousandSeparator, showHelperOnlyOnError,\n   * isLettersOnly, inputMode.\n   * Note: `formControl` is not supported; use `value` + onInput event instead.\n   */\n  @Prop() inputProperties: any = null;\n\n  // ── Internal state ──────────────────────────────────────────\n  @State() private showPassword: boolean = false;\n  @State() private touched: boolean = false;\n\n  // ── Events ──────────────────────────────────────────────────\n  /** Emitted on every keystroke with the current value */\n  @Event() dropiInput: EventEmitter<string>;\n  /** Emitted on blur with the final value */\n  @Event() dropiChange: EventEmitter<string>;\n  /** Emitted on focus */\n  @Event() dropiFocus: EventEmitter<void>;\n  /** Emitted on blur */\n  @Event() dropiBlur: EventEmitter<void>;\n\n  @Watch('inputProperties')\n  inputPropertiesChanged(val: any) {\n    if (!val) return;\n    if (val.id !== undefined) this.inputId = val.id;\n    if (val.inputId !== undefined) this.inputId = val.inputId;\n    if (val.label !== undefined) this.label = val.label;\n    if (val.placeholder !== undefined) this.placeholder = val.placeholder;\n    if (val.maxLength !== undefined) this.maxLength = val.maxLength;\n    if (val.textHelper !== undefined) this.textHelper = val.textHelper;\n    if (val.passwordInput !== undefined) this.passwordInput = val.passwordInput;\n    if (val.isPasswordInput !== undefined) this.passwordInput = val.isPasswordInput; // Fallback\n    if (val.icon !== undefined) this.icon = val.icon;\n    if (val.iconColor !== undefined) this.iconColor = val.iconColor;\n    if (val.isMoneyInput !== undefined) this.isMoneyInput = val.isMoneyInput;\n    if (val.showObligatoryAsterisk !== undefined) this.showObligatoryAsterisk = val.showObligatoryAsterisk;\n    if (val.isNumericInput !== undefined) this.isNumericInput = val.isNumericInput;\n    if (val.allowDecimals !== undefined) this.allowDecimals = val.allowDecimals;\n    if (val.isThousandSeparator !== undefined) this.isThousandSeparator = val.isThousandSeparator;\n    if (val.showHelperOnlyOnError !== undefined) this.showHelperOnlyOnError = val.showHelperOnlyOnError;\n    if (val.isLettersOnly !== undefined) this.isLettersOnly = val.isLettersOnly;\n    if (val.inputMode !== undefined) this.inputMode = val.inputMode;\n  }\n\n  @Watch('value')\n  valueChanged(val: string) {\n    this.internals.setFormValue(val);\n  }\n\n  @Watch('disabled')\n  disabledChanged(val: boolean) {\n    this.internals.setValidity(val ? { customError: true } : {}, val ? 'Field is disabled' : '');\n  }\n\n  componentWillLoad() {\n    this.internals.setFormValue(this.value ?? '');\n    if (this.inputProperties) this.inputPropertiesChanged(this.inputProperties);\n  }\n\n  // ── Handlers ────────────────────────────────────────────────\n\n  private handleInput(e: InputEvent) {\n    let val = (e.target as HTMLInputElement).value;\n\n    if (this.isNumericInput) val = this.filterNumbers(val);\n    if (this.isLettersOnly) val = this.filterLetters(val);\n    if (this.isMoneyInput || this.isThousandSeparator) val = this.formatThousands(val, this.isMoneyInput);\n\n    this.value = val;\n    this.internals.setFormValue(val);\n    this.dropiInput.emit(val);\n    this.dropiChange.emit(val);\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if ((this.isNumericInput || this.isMoneyInput || this.isThousandSeparator) && !this.isAllowedNumberKey(e)) {\n      e.preventDefault();\n    }\n    if (this.isLettersOnly && !this.isAllowedLetterKey(e)) {\n      e.preventDefault();\n    }\n  }\n\n  private handleFocus() {\n    this.dropiFocus.emit();\n  }\n\n  private handleBlur() {\n    this.touched = true;\n    this.dropiBlur.emit();\n  }\n\n  private togglePassword() {\n    if (this.disabled) return;\n    this.showPassword = !this.showPassword;\n  }\n\n  // ── Helpers ─────────────────────────────────────────────────\n\n  private filterNumbers(val: string): string {\n    const pattern = this.allowDecimals ? /[^0-9.]/g : /[^0-9]/g;\n    return val.replace(pattern, '');\n  }\n\n  private filterLetters(val: string): string {\n    return val.replace(/[^a-zA-ZáéíóúÁÉÍÓÚñÑüÜ\\s]/g, '');\n  }\n\n  private isAllowedNumberKey(e: KeyboardEvent): boolean {\n    const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End'];\n    if (allowed.includes(e.key)) return true;\n    if (e.ctrlKey || e.metaKey) return true; // copy/paste/select-all\n    if (/^[0-9]$/.test(e.key)) return true;\n    if (this.allowDecimals && e.key === '.') return true;\n    return false;\n  }\n\n  private isAllowedLetterKey(e: KeyboardEvent): boolean {\n    const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End', ' '];\n    if (allowed.includes(e.key)) return true;\n    if (e.ctrlKey || e.metaKey) return true;\n    return /^[a-zA-ZáéíóúÁÉÍÓÚñÑüÜ]$/.test(e.key);\n  }\n\n  private formatThousands(val: string, withCurrency: boolean): string {\n    const raw = val.replace(/[^0-9.]/g, '');\n    const [integer, decimal] = raw.split('.');\n    const formatted = integer.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\n    const result = decimal !== undefined ? `${formatted}.${decimal}` : formatted;\n    return withCurrency ? `$${result}` : result;\n  }\n\n  // ── Computed ─────────────────────────────────────────────────\n\n  private get resolvedId(): string {\n    return this.inputId || this.label;\n  }\n\n  private get inputType(): string {\n    if (this.passwordInput) return this.showPassword ? 'text' : 'password';\n    return 'text';\n  }\n\n  private get showHelper(): boolean {\n    if (!this.textHelper) return false;\n    if (this.showHelperOnlyOnError) return this.hasError && this.touched;\n    return true;\n  }\n\n  private get isInvalid(): boolean {\n    return this.hasError && this.touched;\n  }\n\n  // ── Render ───────────────────────────────────────────────────\n\n  render() {\n    const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;\n    const showIconInline = !!this.icon;\n\n    return (\n      <div class={{ 'fixed-label-container': this.fixedLabel }}>\n        {/* Fixed label above input */}\n        {this.fixedLabel && (\n          <div class=\"input-label Body-S-Regular\">\n            {this.label}\n            {showObligatoryAsterisk && <span class=\"asterisk\"> *</span>}\n          </div>\n        )}\n\n        <div class=\"form-group\">\n          <div class={{ 'input-container': true, 'input-container--has-icon': showIconInline }}>\n            {/* Inline icon (left) */}\n            {showIconInline && (\n              <dropi-icon\n                class=\"icon-input\"\n                name={this.icon}\n                color={this.iconColor}\n                iconWidth=\"20px\"\n                iconHeight=\"20px\"\n                style={{ width: '20px', height: '20px' }}\n              />\n            )}\n\n            {/* Password toggle (right) */}\n            {this.passwordInput && (\n              <dropi-icon\n                class=\"icon-input-password\"\n                name={this.showPassword ? 'Eye' : 'Eye-crossed'}\n                iconWidth=\"20px\"\n                iconHeight=\"20px\"\n                style={{ width: '20px', height: '20px' }}\n                color=\"Gray-Gray-500\"\n                onClick={() => this.togglePassword()}\n              />\n            )}\n\n            {/* Native input */}\n            <input\n              id={this.resolvedId}\n              class={{\n                'form-control': true,\n                'form-control-valid': !this.isInvalid && this.touched && !!this.value,\n                'form-control-invalid': this.isInvalid,\n                'padding-icon': showIconInline,\n                'text-password': this.passwordInput && !this.showPassword,\n                'fixed-label-input': this.fixedLabel,\n              }}\n              type={this.inputType}\n              value={this.value}\n              placeholder={this.fixedLabel ? this.placeholder : ' '}\n              disabled={this.disabled}\n              required={this.required}\n              maxLength={this.maxLength}\n              inputMode={this.inputMode}\n              data-cy={undefined}\n              onInput={e => this.handleInput(e as InputEvent)}\n              onKeyDown={e => this.handleKeyDown(e as KeyboardEvent)}\n              onFocus={() => this.handleFocus()}\n              onBlur={() => this.handleBlur()}\n            />\n\n            {/* Floating label (only when not fixedLabel) */}\n            {!this.fixedLabel && (\n              <label class=\"Body-S-Regular label-bottom\" htmlFor={this.resolvedId}>\n                {this.label}\n                {showObligatoryAsterisk && <span class=\"asterisk\"> *</span>}\n              </label>\n            )}\n\n            {/* Helper / error text */}\n            {this.showHelper && (\n              <div class=\"form-control-helper\">\n                {this.isInvalid && <dropi-icon name=\"Warning-circle\" iconWidth=\"12px\" iconHeight=\"12px\" color=\"Error-Error-500\" />}\n                <span\n                  class={{\n                    'disabled-helper': this.disabled,\n                    'invalid-color': this.isInvalid,\n                  }}\n                >\n                  {this.textHelper}\n                </span>\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-otp-send-code.entry.js

@@ -9,7 +9,17 @@ const DropiOtpSendCode = class {
         this.codeCompleted = createEvent(this, "codeCompleted", 7);
         this.codeAccepted = createEvent(this, "codeAccepted", 7);
         this.dropiResend = createEvent(this, "dropiResend", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
     }
+    internals;
+    /** Name for native form submission */
+    name = '';
     /** Delivery method label */
     engine = 'email';
     /** Contact info (email/phone to show in label) */
@@ -41,6 +51,7 @@ const DropiOtpSendCode = class {
     componentWillLoad() {
         this.digits = Array(this.digitsCount).fill('');
         this.digitStates = Array(this.digitsCount).fill('idle');
+        this.internals.setFormValue('');
     }
     componentDidLoad() { this.startCountdown(); }
     disconnectedCallback() { clearInterval(this.timer); }
@@ -68,9 +79,13 @@ const DropiOtpSendCode = class {
             this.inputs[index + 1]?.focus();
         if (newDigits.every(d => d !== '')) {
             const finalCode = newDigits.join('');
+            this.internals.setFormValue(finalCode);
             this.codeCompleted.emit(finalCode);
             this.codeAccepted.emit(finalCode);
         }
+        else {
+            this.internals.setFormValue(newDigits.join(''));
+        }
     }
     handleKeyDown(e, index) {
         if (e.key === 'Backspace' && !this.digits[index] && index > 0) {
@@ -87,21 +102,26 @@ const DropiOtpSendCode = class {
         this.inputs[Math.min(text.length, this.digitsCount - 1)]?.focus();
         if (newDigits.every(d => d !== '')) {
             const finalCode = newDigits.join('');
+            this.internals.setFormValue(finalCode);
             this.codeCompleted.emit(finalCode);
             this.codeAccepted.emit(finalCode);
         }
+        else {
+            this.internals.setFormValue(newDigits.join(''));
+        }
     }
     render() {
         const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
-        return (h("div", { key: 'c9c6c3387cec2371049c547d87742563268bf28d', class: "otp" }, this.showLabelContact && (h("p", { key: 'c3f36c62d7502eff8f86ef8202c3dfc65d846ba1', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: '25c05d8f0773bf6f2af83f6154ac76638499e4d7' }, " ", this.labelContact))), h("div", { key: '3ca2687723735b3eb6ada997f622a4a50c2d7ee9', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, this.digits.map((_, i) => (h("input", { key: i, ref: (el) => {
+        return (h("div", { key: 'ee2e6766c4b220a1a12b8734747138cf2351a0d8', class: "otp" }, this.showLabelContact && (h("p", { key: '87f34e3b13c0e16e584cc03ea8c5a35e462784b1', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: '6c9d0c73340ff8dab1730b5d6c9cc0431f3ff21c' }, " ", this.labelContact))), h("div", { key: 'd82904db02da1da5f863bb86cef65b0da166ff0c', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, this.digits.map((_, i) => (h("input", { key: i, ref: (el) => {
                 if (el)
                     this.inputs[i] = el;
             }, class: {
                 'otp__digit': true,
                 'otp__digit--filled': this.digitStates[i] === 'filled',
                 'otp__digit--error': this.error,
-            }, type: "text", inputMode: "numeric", maxLength: 1, value: this.digits[i] ?? '', onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (h("p", { key: 'ddcdd5dacc533b73e6353c2670f762168c2803d3', class: "otp__error" }, this.errorMessage)), h("div", { key: 'a21650c43d7a62f9e187bd9f4eb307d275ff37be', class: "otp__resend" }, this.canResend ? (h("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (h("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
+            }, type: "text", inputMode: "numeric", maxLength: 1, value: this.digits[i] ?? '', onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (h("p", { key: '7629619d5b2c4e8f38e2c2bc93ab134242b8e079', class: "otp__error" }, this.errorMessage)), h("div", { key: 'ea5472d4c55f1cdc30304e9e9bcaacf303ba4501', class: "otp__resend" }, this.canResend ? (h("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (h("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
     }
+    static get formAssociated() { return true; }
     static get watchers() { return {
         "digitsCount": [{
                 "handleDigitsCountChange": 0

package/dist/dropi-ui/dropi-otp-send-code.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-otp-send-code.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-otp-send-code/dropi-otp-send-code.css?tag=dropi-otp-send-code&encapsulation=shadow","src/components/dropi-otp-send-code/dropi-otp-send-code.tsx"],"sourcesContent":[":host { display: block; width: 100%; }\n*, *::before, *::after { box-sizing: border-box; }\n\n.otp { display: flex; flex-direction: column; align-items: center; gap: var(--Size-4, 16px); }\n\n.otp__label {\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-600, #475066);\n  text-align: center;\n  margin: 0;\n}\n\n.otp__inputs {\n  display: flex;\n  gap: var(--Size-4, 16px);\n}\n\n.otp__digit {\n  width: 56px;\n  height: 56px;\n  border: 1.5px solid var(--Gray-Gray-200, #d3d7de);\n  border-radius: var(--Border-2, 8px);\n  text-align: center;\n  font-size: 22px;\n  font-weight: var(--font-weight-bold, 700);\n  font-family: inherit;\n  color: var(--Gray-Gray-800, #1f2433);\n  outline: none;\n  transition: border-color 0.15s ease;\n  background: var(--Neutral-White, #ffffff);\n}\n\n.otp__digit:focus { \n  border: 2px solid var(--Primary-Primary-500, #f49a3d);\n}\n.otp__digit--filled { \n  border: 1px solid var(--Success-Success-500, #0abb87); \n  color: var(--Neutral-Neutral-900, #0e111a); \n}\n.otp__digit--error { \n  border: 1px solid var(--Error-Error-500, #f46a6b);\n}\n\n.otp__error {\n  margin: 0;\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Error-Error-500, #f46a6b);\n  text-align: center;\n}\n\n.otp__resend { text-align: center; }\n\n.otp__countdown {\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\n.otp__resend-btn {\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: var(--font-size-s, 12px);\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Primary-Primary-500, #f49a3d);\n  cursor: pointer;\n  text-decoration: underline;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Watch } from '@stencil/core';\n\nconst RESEND_SECONDS = 30;\n\n/**\n * @component dropi-otp-send-code\n * OTP input with configurable length, countdown timer and resend capability.\n */\n@Component({\n  tag: 'dropi-otp-send-code',\n  styleUrl: 'dropi-otp-send-code.css',\n  shadow: true,\n})\nexport class DropiOtpSendCode {\n  /** Delivery method label */\n  @Prop() engine: 'email' | 'sms' | '2fa' = 'email';\n  /** Contact info (email/phone to show in label) */\n  @Prop() labelContact: string = '';\n  /** Show contact label */\n  @Prop() showLabelContact: boolean = false;\n  /** Error message to display */\n  @Prop() errorMessage: string = '';\n  /** Number of digits for the OTP */\n  @Prop() digitsCount: number = 6;\n\n  @State() private digits: string[] = [];\n  @State() private digitStates: ('idle' | 'filled' | 'error')[] = [];\n  @State() private countdown: number = RESEND_SECONDS;\n  @State() private canResend: boolean = false;\n  @State() private error: boolean = false;\n\n  private inputs: HTMLInputElement[] = [];\n  private timer: any;\n\n  @Watch('digitsCount')\n  handleDigitsCountChange(newValue: number) {\n    this.digits = Array(newValue).fill('');\n    this.digitStates = Array(newValue).fill('idle');\n    this.inputs = [];\n  }\n\n  /** Emitted when all digits are entered. */\n  @Event() codeCompleted: EventEmitter<string>;\n  /** Emitted when all digits are entered (alternative event). */\n  @Event() codeAccepted: EventEmitter<string>;\n  /** Emitted when resend is requested */\n  @Event() dropiResend: EventEmitter<void>;\n\n  componentWillLoad() {\n    this.digits = Array(this.digitsCount).fill('');\n    this.digitStates = Array(this.digitsCount).fill('idle');\n  }\n\n  componentDidLoad() { this.startCountdown(); }\n  disconnectedCallback() { clearInterval(this.timer); }\n\n  private startCountdown() {\n    this.countdown = RESEND_SECONDS;\n    this.canResend = false;\n    clearInterval(this.timer);\n    this.timer = setInterval(() => {\n      this.countdown--;\n      if (this.countdown <= 0) { clearInterval(this.timer); this.canResend = true; }\n    }, 1000);\n  }\n\n  private handleInput(e: InputEvent, index: number) {\n    const val = (e.target as HTMLInputElement).value.replace(/\\D/g, '').slice(-1);\n    const newDigits = [...this.digits];\n    newDigits[index] = val;\n    this.digits = newDigits;\n\n    const newStates = [...this.digitStates];\n    newStates[index] = val ? 'filled' : 'idle';\n    this.digitStates = newStates;\n\n    if (val && index < this.digitsCount - 1) this.inputs[index + 1]?.focus();\n\n    if (newDigits.every(d => d !== '')) {\n      const finalCode = newDigits.join('');\n      this.codeCompleted.emit(finalCode);\n      this.codeAccepted.emit(finalCode);\n    }\n  }\n\n  private handleKeyDown(e: KeyboardEvent, index: number) {\n    if (e.key === 'Backspace' && !this.digits[index] && index > 0) {\n      this.inputs[index - 1]?.focus();\n    }\n  }\n\n  private handlePaste(e: ClipboardEvent) {\n    e.preventDefault();\n    const text = e.clipboardData?.getData('text')?.replace(/\\D/g, '').slice(0, this.digitsCount) || '';\n    const newDigits = Array(this.digitsCount).fill('');\n    text.split('').forEach((c, i) => { newDigits[i] = c; });\n    this.digits = newDigits;\n    this.digitStates = newDigits.map(d => d ? 'filled' : 'idle');\n    this.inputs[Math.min(text.length, this.digitsCount - 1)]?.focus();\n    \n    if (newDigits.every(d => d !== '')) {\n      const finalCode = newDigits.join('');\n      this.codeCompleted.emit(finalCode);\n      this.codeAccepted.emit(finalCode);\n    }\n  }\n\n  render() {\n    const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';\n\n    return (\n      <div class=\"otp\">\n        {this.showLabelContact && (\n          <p class=\"otp__label\">\n            Ingresa el código enviado a tu {engineLabel}\n            {this.labelContact && <strong> {this.labelContact}</strong>}\n          </p>\n        )}\n\n        <div class=\"otp__inputs\" onPaste={(e) => this.handlePaste(e)}>\n          {this.digits.map((_, i) => (\n            <input\n              key={i}\n              ref={(el) => { if (el) this.inputs[i] = el as HTMLInputElement; }}\n              class={{\n                'otp__digit': true,\n                'otp__digit--filled': this.digitStates[i] === 'filled',\n                'otp__digit--error': this.error,\n              }}\n              type=\"text\"\n              inputMode=\"numeric\"\n              maxLength={1}\n              value={this.digits[i] ?? ''}\n              onInput={(e) => this.handleInput(e as InputEvent, i)}\n              onKeyDown={(e) => this.handleKeyDown(e as KeyboardEvent, i)}\n            />\n          ))}\n        </div>\n\n        {this.error && this.errorMessage && (\n          <p class=\"otp__error\">{this.errorMessage}</p>\n        )}\n\n        <div class=\"otp__resend\">\n          {this.canResend ? (\n            <button class=\"otp__resend-btn\" onClick={() => { this.startCountdown(); this.dropiResend.emit(); }}>\n              Reenviar código\n            </button>\n          ) : (\n            <span class=\"otp__countdown\">Reenviar en {this.countdown}s</span>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-otp-send-code.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-otp-send-code/dropi-otp-send-code.css?tag=dropi-otp-send-code&encapsulation=shadow","src/components/dropi-otp-send-code/dropi-otp-send-code.tsx"],"sourcesContent":[":host { display: block; width: 100%; }\n*, *::before, *::after { box-sizing: border-box; }\n\n.otp { display: flex; flex-direction: column; align-items: center; gap: var(--Size-4, 16px); }\n\n.otp__label {\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-600, #475066);\n  text-align: center;\n  margin: 0;\n}\n\n.otp__inputs {\n  display: flex;\n  gap: var(--Size-4, 16px);\n}\n\n.otp__digit {\n  width: 56px;\n  height: 56px;\n  border: 1.5px solid var(--Gray-Gray-200, #d3d7de);\n  border-radius: var(--Border-2, 8px);\n  text-align: center;\n  font-size: 22px;\n  font-weight: var(--font-weight-bold, 700);\n  font-family: inherit;\n  color: var(--Gray-Gray-800, #1f2433);\n  outline: none;\n  transition: border-color 0.15s ease;\n  background: var(--Neutral-White, #ffffff);\n}\n\n.otp__digit:focus { \n  border: 2px solid var(--Primary-Primary-500, #f49a3d);\n}\n.otp__digit--filled { \n  border: 1px solid var(--Success-Success-500, #0abb87); \n  color: var(--Neutral-Neutral-900, #0e111a); \n}\n.otp__digit--error { \n  border: 1px solid var(--Error-Error-500, #f46a6b);\n}\n\n.otp__error {\n  margin: 0;\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Error-Error-500, #f46a6b);\n  text-align: center;\n}\n\n.otp__resend { text-align: center; }\n\n.otp__countdown {\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\n.otp__resend-btn {\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: var(--font-size-s, 12px);\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Primary-Primary-500, #f49a3d);\n  cursor: pointer;\n  text-decoration: underline;\n}\n","import { Component, Prop, State, Event, EventEmitter, AttachInternals, h, Watch } from '@stencil/core';\n\nconst RESEND_SECONDS = 30;\n\n/**\n * @component dropi-otp-send-code\n * OTP input with configurable length, countdown timer and resend capability.\n */\n@Component({\n  tag: 'dropi-otp-send-code',\n  styleUrl: 'dropi-otp-send-code.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DropiOtpSendCode {\n  @AttachInternals() internals: ElementInternals;\n\n  /** Name for native form submission */\n  @Prop({ reflect: true }) name: string = '';\n\n  /** Delivery method label */\n  @Prop() engine: 'email' | 'sms' | '2fa' = 'email';\n  /** Contact info (email/phone to show in label) */\n  @Prop() labelContact: string = '';\n  /** Show contact label */\n  @Prop() showLabelContact: boolean = false;\n  /** Error message to display */\n  @Prop() errorMessage: string = '';\n  /** Number of digits for the OTP */\n  @Prop() digitsCount: number = 6;\n\n  @State() private digits: string[] = [];\n  @State() private digitStates: ('idle' | 'filled' | 'error')[] = [];\n  @State() private countdown: number = RESEND_SECONDS;\n  @State() private canResend: boolean = false;\n  @State() private error: boolean = false;\n\n  private inputs: HTMLInputElement[] = [];\n  private timer: any;\n\n  @Watch('digitsCount')\n  handleDigitsCountChange(newValue: number) {\n    this.digits = Array(newValue).fill('');\n    this.digitStates = Array(newValue).fill('idle');\n    this.inputs = [];\n  }\n\n  /** Emitted when all digits are entered. */\n  @Event() codeCompleted: EventEmitter<string>;\n  /** Emitted when all digits are entered (alternative event). */\n  @Event() codeAccepted: EventEmitter<string>;\n  /** Emitted when resend is requested */\n  @Event() dropiResend: EventEmitter<void>;\n\n  componentWillLoad() {\n    this.digits = Array(this.digitsCount).fill('');\n    this.digitStates = Array(this.digitsCount).fill('idle');\n    this.internals.setFormValue('');\n  }\n\n\n  componentDidLoad() { this.startCountdown(); }\n  disconnectedCallback() { clearInterval(this.timer); }\n\n  private startCountdown() {\n    this.countdown = RESEND_SECONDS;\n    this.canResend = false;\n    clearInterval(this.timer);\n    this.timer = setInterval(() => {\n      this.countdown--;\n      if (this.countdown <= 0) { clearInterval(this.timer); this.canResend = true; }\n    }, 1000);\n  }\n\n  private handleInput(e: InputEvent, index: number) {\n    const val = (e.target as HTMLInputElement).value.replace(/\\D/g, '').slice(-1);\n    const newDigits = [...this.digits];\n    newDigits[index] = val;\n    this.digits = newDigits;\n\n    const newStates = [...this.digitStates];\n    newStates[index] = val ? 'filled' : 'idle';\n    this.digitStates = newStates;\n\n    if (val && index < this.digitsCount - 1) this.inputs[index + 1]?.focus();\n\n    if (newDigits.every(d => d !== '')) {\n      const finalCode = newDigits.join('');\n      this.internals.setFormValue(finalCode);\n      this.codeCompleted.emit(finalCode);\n      this.codeAccepted.emit(finalCode);\n    } else {\n      this.internals.setFormValue(newDigits.join(''));\n    }\n\n  }\n\n  private handleKeyDown(e: KeyboardEvent, index: number) {\n    if (e.key === 'Backspace' && !this.digits[index] && index > 0) {\n      this.inputs[index - 1]?.focus();\n    }\n  }\n\n  private handlePaste(e: ClipboardEvent) {\n    e.preventDefault();\n    const text = e.clipboardData?.getData('text')?.replace(/\\D/g, '').slice(0, this.digitsCount) || '';\n    const newDigits = Array(this.digitsCount).fill('');\n    text.split('').forEach((c, i) => { newDigits[i] = c; });\n    this.digits = newDigits;\n    this.digitStates = newDigits.map(d => d ? 'filled' : 'idle');\n    this.inputs[Math.min(text.length, this.digitsCount - 1)]?.focus();\n    \n    if (newDigits.every(d => d !== '')) {\n      const finalCode = newDigits.join('');\n      this.internals.setFormValue(finalCode);\n      this.codeCompleted.emit(finalCode);\n      this.codeAccepted.emit(finalCode);\n    } else {\n      this.internals.setFormValue(newDigits.join(''));\n    }\n\n  }\n\n  render() {\n    const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';\n\n    return (\n      <div class=\"otp\">\n        {this.showLabelContact && (\n          <p class=\"otp__label\">\n            Ingresa el código enviado a tu {engineLabel}\n            {this.labelContact && <strong> {this.labelContact}</strong>}\n          </p>\n        )}\n\n        <div class=\"otp__inputs\" onPaste={(e) => this.handlePaste(e)}>\n          {this.digits.map((_, i) => (\n            <input\n              key={i}\n              ref={(el) => { if (el) this.inputs[i] = el as HTMLInputElement; }}\n              class={{\n                'otp__digit': true,\n                'otp__digit--filled': this.digitStates[i] === 'filled',\n                'otp__digit--error': this.error,\n              }}\n              type=\"text\"\n              inputMode=\"numeric\"\n              maxLength={1}\n              value={this.digits[i] ?? ''}\n              onInput={(e) => this.handleInput(e as InputEvent, i)}\n              onKeyDown={(e) => this.handleKeyDown(e as KeyboardEvent, i)}\n            />\n          ))}\n        </div>\n\n        {this.error && this.errorMessage && (\n          <p class=\"otp__error\">{this.errorMessage}</p>\n        )}\n\n        <div class=\"otp__resend\">\n          {this.canResend ? (\n            <button class=\"otp__resend-btn\" onClick={() => { this.startCountdown(); this.dropiResend.emit(); }}>\n              Reenviar código\n            </button>\n          ) : (\n            <span class=\"otp__countdown\">Reenviar en {this.countdown}s</span>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-phone-input.entry.js

@@ -103,8 +103,18 @@ const DropiPhoneInput = class {
         this.dropiPhoneChange = createEvent(this, "dropiPhoneChange", 7);
         this.dropiVerify = createEvent(this, "dropiVerify", 7);
         this.dropiChangeSelect = createEvent(this, "dropiChangeSelect", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
     }
     get el() { return getElement(this); }
+    internals;
+    /** Name for native form submission */
+    name = '';
     /** Initial country dial code (e.g. "57") — matches Angular 'CodArea' setter */
     codArea = '57';
     /** Phone number value — matches Angular 'ngModelPhone' */
@@ -139,6 +149,10 @@ const DropiPhoneInput = class {
     dropiChangeSelect;
     codAreaChanged() {
         this.ngModelPhone = '';
+        this.updateFormValue();
+    }
+    ngModelPhoneChanged() {
+        this.updateFormValue();
     }
     selectedOptionChanged(val) {
         if (!val)
@@ -150,6 +164,11 @@ const DropiPhoneInput = class {
     componentWillLoad() {
         if (this.selectedOption)
             this.selectedOptionChanged(this.selectedOption);
+        this.updateFormValue();
+    }
+    updateFormValue() {
+        const fullValue = this.ngModelPhone ? `+${this.codArea}${this.ngModelPhone}` : '';
+        this.internals.setFormValue(fullValue);
     }
     get selectedCountry() {
         const cleanCodArea = (this.codArea ?? '57').replace('+', '');
@@ -176,15 +195,19 @@ const DropiPhoneInput = class {
     render() {
         const country = this.selectedCountry;
         const isInvalid = this.isValidPhone === false;
-        return (h("div", { key: 'a377fcfcfdb239d79f319f0e058f5d54cbcfac02', class: "phone-wrap" }, h("div", { key: '83719d2b76b491f1f7a9f3e202eb61c61abb2c31', class: "phone-input-container" }, h("div", { key: 'c92ff5d9f260b80ad4e7b8f7e290b7b4e1f595f0', class: "custom-select" }, h("button", { key: '35c56642c1828d86b7f211face2845dc79878fd4', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
+        return (h("div", { key: '1634a703f734cd5db7b5d7acf83f403ea07962a3', class: "phone-wrap" }, h("div", { key: 'a9ed4a17b4a01893fc22d051241dcd494fa2e66d', class: "phone-input-container" }, h("div", { key: '6a50121fbb8939eac54035a314c340137aae63d5', class: "custom-select" }, h("button", { key: '0157b468dab13e23f83b9528ec235bc61be91733', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
                 if (!this.disabledInput)
                     this.open = !this.open;
-            } }, h("span", { key: 'e39cdac451df1c9a47c6552e7f133cb7662cae7f', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, h("img", { key: '620c8efc2695ee26fed0c2bcd7f6132af05cdbed', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), h("dropi-icon", { key: 'cf57cc1ef06e12b0112fdbbb063fb8f045c17e39', name: this.open ? 'Dropdown-up' : 'Dropdown-down', iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-500" })), h("ul", { key: '1009d2e4212267bbfaf4aa26c0c2152606a8d092', class: { 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open } }, COUNTRIES.map(option => (h("li", null, h("button", { type: "button", class: "option", onMouseDown: (e) => { e.preventDefault(); this.selectCountry(option); } }, h("img", { src: `https://flagsapi.com/${option.flag}/flat/24.png`, alt: option.flag }), option.code)))))), h("input", { key: '87be58fc820c63741b076b04d807b7410e292344', id: "phone-input", type: "tel", inputmode: "numeric", class: { 'form-control': true, 'is-invalid': isInvalid }, placeholder: this.phoneNumberPlaceholder, value: this.ngModelPhone, disabled: this.disabledInput, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) }))));
+            } }, h("span", { key: 'b174ec714c415964d09f4661f58a1a62e8c80653', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, h("img", { key: 'f4c62db877a54bd395b756926918b8ff16511a2a', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), h("dropi-icon", { key: '809f64bed4cccd911110c9e8e52752554b0d8a86', name: this.open ? 'Dropdown-up' : 'Dropdown-down', iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-500" })), h("ul", { key: 'b4dea28807780b086ba15161cee3e417efb2f2a1', class: { 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open } }, COUNTRIES.map(option => (h("li", null, h("button", { type: "button", class: "option", onMouseDown: (e) => { e.preventDefault(); this.selectCountry(option); } }, h("img", { src: `https://flagsapi.com/${option.flag}/flat/24.png`, alt: option.flag }), option.code)))))), h("input", { key: '4e1113fedf25b9c91d2aff815d6c862a7d47d072', id: "phone-input", type: "tel", inputmode: "numeric", class: { 'form-control': true, 'is-invalid': isInvalid }, placeholder: this.phoneNumberPlaceholder, value: this.ngModelPhone, disabled: this.disabledInput, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) }))));
     }
+    static get formAssociated() { return true; }
     static get watchers() { return {
         "codArea": [{
                 "codAreaChanged": 0
             }],
+        "ngModelPhone": [{
+                "ngModelPhoneChanged": 0
+            }],
         "selectedOption": [{
                 "selectedOptionChanged": 0
             }]

package/dist/dropi-ui/dropi-phone-input.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-phone-input.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,MAAM,CAAC,qwHAAqwH,CAAC;;ACSxyH,MAAM,SAAS,GAAkB;AAC/B,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AAC3D,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AACzD,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AACzD,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AACvD,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AAC3D,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AACtD,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AACxD,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AAC3D,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AAC5D,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AAC5D,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AACzD,IAAA,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AAC/D,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AAC5D,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AAC1D,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AACzD,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AACxD,IAAA,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AACvD,IAAA,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AAC5D,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AACzD,IAAA,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,oBAAoB,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AACvE,IAAA,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,oBAAoB,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AACvE,IAAA,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,oBAAoB,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AACvE,IAAA,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AAC1E,IAAA,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,kCAAkC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AACrF,IAAA,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AAChE,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AAC5D,IAAA,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,qBAAqB,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AACxE,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AAC5D,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AAC7D,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AAC1D,IAAA,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AACxD,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AACvD,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AAC/D,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AACzD,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AAC7D,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AACzD,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AACxD,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AACzD,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AACzD,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AACxD,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AAC7D,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AACjE,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AACzD,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AACxD,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AACxD,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AACxD,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AAC1D,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AACvD,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AAC1D,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AAC3D,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AAC5D,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AAC9D,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AAC9D,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AAC3D,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AAC1D,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AAC7D,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AAC1D,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AACxD,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AACzD,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AACxD,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AAC1D,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AAC9D,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AAC3D,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AACzD,IAAA,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AACvD,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AAC/D,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AAC1D,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AAC1D,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AAC1D,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AACxD,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AACzD,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AAC1D,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AAC7D,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AACvD,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AACzD,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AAC/D,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AAChE,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AACxD,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AACvD,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AACxD,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AAC7D,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AAC1D,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AAChE,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AACxD,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AAC3D,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AACvD,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,0BAA0B,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AAC5E,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AAC5D,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;AAC7D,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AACzE,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;AACrE,IAAA,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE;CACzD;MAYY,eAAe,GAAA,MAAA;;;;;;;;;;IAID,OAAO,GAAW,IAAI;;IAEtB,YAAY,GAAW,EAAE;;IAE1C,sBAAsB,GAAkB,IAAI;;IAE5C,aAAa,GAAY,KAAK;;IAE9B,YAAY,GAAY,SAAS;;IAEjC,cAAc,GAAY,IAAI;AACtC;;;AAGG;IACsB,cAAc,GAAQ,IAAI;AACnD;;;;AAIG;IACK,gBAAgB,GAAQ,IAAI;IAEnB,IAAI,GAAY,KAAK;;AAG7B,IAAA,cAAc;;AAEd,IAAA,gBAAgB;;AAEhB,IAAA,WAAW;;AAEX,IAAA,iBAAiB;IAG1B,cAAc,GAAA;AACZ,QAAA,IAAI,CAAC,YAAY,GAAG,EAAE;;AAIxB,IAAA,qBAAqB,CAAC,GAAQ,EAAA;AAC5B,QAAA,IAAI,CAAC,GAAG;YAAE;;AAEV,QAAA,MAAM,IAAI,GAAG,GAAG,CAAC,QAAQ,IAAI,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO;AACrD,QAAA,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC;;IAG9C,iBAAiB,GAAA;QACf,IAAI,IAAI,CAAC,cAAc;AAAE,YAAA,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,cAAc,CAAC;;AAG1E,IAAA,IAAY,eAAe,GAAA;AACzB,QAAA,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,EAAE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC;AAC5D,QAAA,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC;;AAG7D,IAAA,aAAa,CAAC,CAAc,EAAA;AAClC,QAAA,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI;AACrB,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK;QACjB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;AAChC,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC;;AAGxB,IAAA,WAAW,CAAC,CAAa,EAAA;AAC/B,QAAA,MAAM,GAAG,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;AACnE,QAAA,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC;QAC/D,CAAC,CAAC,MAA2B,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY;QACxD,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;;AAI/C,IAAA,iBAAiB,CAAC,EAAS,EAAA;AACzB,QAAA,MAAM,IAAI,GAAG,EAAE,CAAC,YAAY,EAAE;QAC9B,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AAC3B,YAAA,IAAI,CAAC,IAAI,GAAG,KAAK;;;IAIrB,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe;AACpC,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,KAAK,KAAK;AAE7C,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,uBAAuB,EAAA,EAEhC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,gBAAgB,EAAE,SAAS,EAAE,EAC7D,QAAQ,EAAE,IAAI,CAAC,aAAa,EAC5B,OAAO,EAAE,MAAK;gBAAG,IAAI,CAAC,IAAI,CAAC,aAAa;AAAE,oBAAA,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI;AAAE,aAAC,EAAA,EAEnE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,EACnE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,wBAAwB,OAAO,CAAC,IAAI,CAAA,YAAA,CAAc,EAAE,GAAG,EAAC,MAAM,EAAA,CAAG,EAC1E,OAAO,CAAC,IAAI,CACR,EACP,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,aAAa,GAAG,eAAe,EAAE,SAAS,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,EAAA,CAAG,CACnH,EAET,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,CAAC,IAAI,EAAE,kBAAkB,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAAA,EACjG,SAAS,CAAC,GAAG,CAAC,MAAM,KACnB,CAAA,CAAA,IAAA,EAAA,IAAA,EACE,CAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,CAAC,CAAC,KAAI,EAAG,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,EAAA,EAEvE,CAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,CAAA,qBAAA,EAAwB,MAAM,CAAC,IAAI,CAAA,YAAA,CAAc,EAAE,GAAG,EAAE,MAAM,CAAC,IAAI,EAAA,CAAI,EAChF,MAAM,CAAC,IAAI,CACL,CACN,CACN,CAAC,CACC,CACD,EAEN,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAC,aAAa,EAChB,IAAI,EAAC,KAAK,EACV,SAAS,EAAC,SAAS,EACnB,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,EACxD,WAAW,EAAE,IAAI,CAAC,sBAAsB,EACxC,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,QAAQ,EAAE,IAAI,CAAC,aAAa,EAC5B,SAAS,EAAE,OAAO,CAAC,SAAS,EAC5B,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAe,CAAC,EAAA,CACjD,CACE,CACF;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dropi-phone-input/dropi-phone-input.css?tag=dropi-phone-input&encapsulation=shadow","src/components/dropi-phone-input/dropi-phone-input.tsx"],"sourcesContent":[":host { display: block; width: 100%; position: relative; font-family: 'Inter', sans-serif; }\n*, *::before, *::after { box-sizing: border-box; }\n\n/* Ocultar spin buttons en inputs numéricos */\ninput::-webkit-inner-spin-button,\ninput::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  appearance: none;\n  margin: 0;\n}\ninput[type='number'] {\n  -moz-appearance: textfield;\n  appearance: textfield;\n}\n\n.phone-wrap {\n  width: 100%;\n}\n\n.phone-label {\n  display: block;\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Gray-Gray-600, #475066);\n  margin-bottom: 4px;\n}\n\n.phone-input-container {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.custom-select {\n  position: relative;\n  width: 50%;\n}\n\n.form-control {\n  flex: 1;\n  width: 100%;\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: 5px;\n  font-size: 14px;\n  font-family: inherit;\n  transition: border-color 0.3s ease-in-out;\n  height: 40px;\n  padding: 0 12px;\n  outline: none;\n  color: var(--Gray-Gray-700, #32394d);\n  background-color: var(--Neutral-White, #ffffff);\n}\n\n.form-control::placeholder {\n  color: var(--Gray-Gray-500, #69738c);\n}\n\n.form-control:focus::placeholder {\n  color: var(--Gray-Gray-500, #69738c);\n}\n\n.form-control:focus {\n  border-color: var(--Info-Info-500, #50a5f1);\n  outline: none;\n}\n\n.form-control:disabled {\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9) !important;\n  color: var(--Gray-Gray-400, #858ea6);\n  background-color: var(--Gray-Gray-50, #f7f8fa);\n  outline: none;\n}\n\n.form-control.is-invalid {\n  background: #fffbfb;\n  border-color: var(--Error-Error-500, #f46a6b) !important;\n}\n\n.select-button {\n  width: 100%;\n  height: 40px;\n  padding: 0.47rem 0.75rem;\n  padding-right: 7px;\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  background: var(--Neutral-White, #ffffff);\n  color: var(--Gray-Gray-500, #69738c);\n  font-size: var(--font-size-s, 12px);\n  font-family: inherit;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  text-align: left;\n  cursor: pointer;\n}\n\n.select-button img {\n  width: 20px;\n  height: 20px;\n}\n\n.select-button:focus {\n  border-color: var(--Info-Info-500, #50a5f1) !important;\n  outline: none;\n}\n\n.select-button:disabled {\n  border-color: var(--Gray-Gray-200, #c3c9d9);\n  color: var(--Gray-Gray-400, #858ea6);\n  background-color: var(--Gray-Gray-50, #f7f8fa);\n  cursor: unset;\n}\n\n.select-button.select-completed {\n  border-color: var(--Gray-Gray-400, #858ea6);\n  color: var(--Gray-Gray-600, #475066);\n  background: var(--Neutral-White, #ffffff);\n}\n\n.select-button.select-invalid {\n  border-color: var(--Error-Error-500, #f46a6b) !important;\n}\n\n.select-dropdown {\n  position: absolute;\n  width: 100%;\n  overflow: hidden;\n  list-style: none;\n  padding: 0;\n  margin: 4px 0 0 0;\n  border: 1px solid transparent;\n  border-radius: var(--Border-2, 8px);\n  overflow-y: scroll;\n  z-index: var(--dropi-z-index-overlay, 11000);\n}\n\n/* Scrollbar */\n.select-dropdown::-webkit-scrollbar {\n  width: 6px;\n}\n.select-dropdown::-webkit-scrollbar-thumb {\n  background-color: var(--Gray-Gray-300, #d1d6e1);\n  border-radius: 4px;\n}\n\n.expanded-select {\n  max-height: 250px;\n  background: var(--Neutral-White, #ffffff);\n  box-shadow: var(--Shadow-medium, 0 4px 16px rgba(0, 0, 0, 0.08));\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  transition: max-height 0.2s ease-in;\n}\n\n.collapsed-select {\n  max-height: 0;\n  background: transparent;\n  box-shadow: none;\n  border: 1px solid transparent;\n  transition: max-height 0.2s ease-out, background 0.6s ease-out, box-shadow 0.6s ease-out;\n}\n\n.select-dropdown li {\n  margin: 0;\n  padding: 0;\n}\n\n.option {\n  width: 100%;\n  height: 45px;\n  border-radius: var(--Border-2, 8px);\n  padding-top: var(--Size-3, 12px);\n  padding-right: var(--Size-4, 16px);\n  padding-bottom: var(--Size-3, 12px);\n  padding-left: var(--Size-4, 16px);\n  border: none;\n  background: transparent;\n  text-align: left;\n  color: var(--Gray-Gray-600, #475066);\n  font-size: var(--font-size-s, 12px);\n  font-family: inherit;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.option img {\n  width: 20px;\n  height: 20px;\n}\n\n.option:hover {\n  background: var(--Gray-Gray-50, #f7f8fa);\n}\n\n.option:disabled {\n  color: var(--Gray-Gray-400, #858ea6);\n  background-color: var(--Gray-Gray-50, #f7f8fa);\n  cursor: unset;\n}\n\n.invalid-color {\n  color: var(--Error-Error-500, #f46a6b) !important;\n}\n\n.phone-error {\n  margin: 4px 0 0;\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Error-Error-500, #f46a6b);\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, Element, Listen, h } from '@stencil/core';\n\ninterface CountryCode {\n  name: string;\n  code: string;\n  flag: string;\n  maxLength: number;\n}\n\nconst COUNTRIES: CountryCode[] = [\n  { code: '57', name: 'Colombia', flag: 'CO', maxLength: 10 },\n  { code: '52', name: 'Mexico', flag: 'MX', maxLength: 10 },\n  { code: '507', name: 'Panama', flag: 'PA', maxLength: 8 },\n  { code: '56', name: 'Chile', flag: 'CL', maxLength: 9 },\n  { code: '593', name: 'Ecuador', flag: 'EC', maxLength: 10 },\n  { code: '51', name: 'Peru', flag: 'PE', maxLength: 9 },\n  { code: '34', name: 'España', flag: 'ES', maxLength: 9 },\n  { code: '595', name: 'Paraguay', flag: 'PY', maxLength: 9 },\n  { code: '58', name: 'Venezuela', flag: 'VE', maxLength: 11 },\n  { code: '54', name: 'Argentina', flag: 'AR', maxLength: 10 },\n  { code: '55', name: 'Brasil', flag: 'BR', maxLength: 11 },\n  { code: '1', name: 'United States', flag: 'US', maxLength: 10 },\n  { code: '502', name: 'Guatemala', flag: 'GT', maxLength: 8 },\n  { code: '598', name: 'Uruguay', flag: 'UY', maxLength: 9 },\n  { code: '501', name: 'Belize', flag: 'BZ', maxLength: 7 },\n  { code: '81', name: 'Japan', flag: 'JP', maxLength: 10 },\n  { code: '1', name: 'Canada', flag: 'CA', maxLength: 9 },\n  { code: '1473', name: 'Grenada', flag: 'GD', maxLength: 10 },\n  { code: '509', name: 'Haiti', flag: 'HT', maxLength: 10 },\n  { code: '1809', name: 'Dominican Republic', flag: 'DO', maxLength: 10 },\n  { code: '1829', name: 'Dominican Republic', flag: 'DO', maxLength: 10 },\n  { code: '1849', name: 'Dominican Republic', flag: 'DO', maxLength: 10 },\n  { code: '1869', name: 'Saint Kitts And Nevis', flag: 'KN', maxLength: 10 },\n  { code: '1784', name: 'Saint Vincent And The Grenadines', flag: 'VC', maxLength: 10 },\n  { code: '1758', name: 'Saint Lucia', flag: 'LC', maxLength: 10 },\n  { code: '597', name: 'Suriname', flag: 'SR', maxLength: 10 },\n  { code: '1868', name: 'Trinidad and Tobago', flag: 'TT', maxLength: 10 },\n  { code: '505', name: 'Nicaragua', flag: 'NI', maxLength: 8 },\n  { code: '506', name: 'Costa Rica', flag: 'CR', maxLength: 8 },\n  { code: '591', name: 'Bolivia', flag: 'BO', maxLength: 8 },\n  { code: '7', name: 'Russia', flag: 'RU', maxLength: 11 },\n  { code: '20', name: 'Egypt', flag: 'EG', maxLength: 9 },\n  { code: '27', name: 'South Africa', flag: 'ZA', maxLength: 10 },\n  { code: '30', name: 'Greece', flag: 'GR', maxLength: 10 },\n  { code: '31', name: 'Netherlands', flag: 'NL', maxLength: 9 },\n  { code: '32', name: 'Belgium', flag: 'BE', maxLength: 8 },\n  { code: '33', name: 'France', flag: 'FR', maxLength: 9 },\n  { code: '36', name: 'Hungary', flag: 'HU', maxLength: 9 },\n  { code: '40', name: 'Romania', flag: 'RO', maxLength: 9 },\n  { code: '39', name: 'Italy', flag: 'IT', maxLength: 10 },\n  { code: '41', name: 'Switzerland', flag: 'CH', maxLength: 9 },\n  { code: '44', name: 'United Kingdom', flag: 'GB', maxLength: 11 },\n  { code: '45', name: 'Denmark', flag: 'DK', maxLength: 8 },\n  { code: '46', name: 'Sweden', flag: 'SE', maxLength: 8 },\n  { code: '47', name: 'Norway', flag: 'NO', maxLength: 8 },\n  { code: '48', name: 'Poland', flag: 'PL', maxLength: 9 },\n  { code: '49', name: 'Germany', flag: 'DE', maxLength: 11 },\n  { code: '53', name: 'Malta', flag: 'MT', maxLength: 8 },\n  { code: '60', name: 'Malaysia', flag: 'MY', maxLength: 9 },\n  { code: '61', name: 'Australia', flag: 'AU', maxLength: 9 },\n  { code: '62', name: 'Indonesia', flag: 'ID', maxLength: 12 },\n  { code: '63', name: 'Philippines', flag: 'PH', maxLength: 10 },\n  { code: '64', name: 'New Zealand', flag: 'NZ', maxLength: 12 },\n  { code: '65', name: 'Singapore', flag: 'SG', maxLength: 8 },\n  { code: '66', name: 'Thailand', flag: 'TH', maxLength: 9 },\n  { code: '82', name: 'South Korea', flag: 'KR', maxLength: 9 },\n  { code: '84', name: 'Vietnam', flag: 'VN', maxLength: 11 },\n  { code: '86', name: 'China', flag: 'CN', maxLength: 11 },\n  { code: '90', name: 'Turkey', flag: 'TR', maxLength: 10 },\n  { code: '91', name: 'India', flag: 'IN', maxLength: 10 },\n  { code: '92', name: 'Pakistan', flag: 'PK', maxLength: 9 },\n  { code: '93', name: 'Afghanistan', flag: 'AF', maxLength: 10 },\n  { code: '94', name: 'Sri Lanka', flag: 'LK', maxLength: 9 },\n  { code: '95', name: 'Myanmar', flag: 'MM', maxLength: 9 },\n  { code: '98', name: 'Iran', flag: 'IR', maxLength: 10 },\n  { code: '211', name: 'South Sudan', flag: 'SS', maxLength: 10 },\n  { code: '212', name: 'Morocco', flag: 'MA', maxLength: 9 },\n  { code: '213', name: 'Algeria', flag: 'DZ', maxLength: 9 },\n  { code: '216', name: 'Tunisia', flag: 'TN', maxLength: 8 },\n  { code: '218', name: 'Libya', flag: 'LY', maxLength: 9 },\n  { code: '220', name: 'Gambia', flag: 'GM', maxLength: 8 },\n  { code: '221', name: 'Senegal', flag: 'SN', maxLength: 9 },\n  { code: '222', name: 'Mauritania', flag: 'MR', maxLength: 9 },\n  { code: '223', name: 'Mali', flag: 'ML', maxLength: 8 },\n  { code: '224', name: 'Guinea', flag: 'GN', maxLength: 9 },\n  { code: '225', name: 'Ivory Coast', flag: 'CI', maxLength: 10 },\n  { code: '226', name: 'Burkina Faso', flag: 'BF', maxLength: 10 },\n  { code: '227', name: 'Niger', flag: 'NE', maxLength: 8 },\n  { code: '228', name: 'Togo', flag: 'TG', maxLength: 8 },\n  { code: '229', name: 'Benin', flag: 'BJ', maxLength: 8 },\n  { code: '230', name: 'Mauritius', flag: 'MU', maxLength: 10 },\n  { code: '231', name: 'Liberia', flag: 'LR', maxLength: 8 },\n  { code: '232', name: 'Sierra Leone', flag: 'SL', maxLength: 11 },\n  { code: '233', name: 'Ghana', flag: 'GH', maxLength: 9 },\n  { code: '234', name: 'Nigeria', flag: 'NG', maxLength: 11 },\n  { code: '235', name: 'Chad', flag: 'TD', maxLength: 8 },\n  { code: '236', name: 'Central African Republic', flag: 'CF', maxLength: 21 },\n  { code: '237', name: 'Cameroon', flag: 'CM', maxLength: 10 },\n  { code: '238', name: 'Cape Verde', flag: 'CV', maxLength: 9 },\n  { code: '239', name: 'São Tomé and Príncipe', flag: 'ST', maxLength: 14 },\n  { code: '240', name: 'Equatorial Guinea', flag: 'GQ', maxLength: 17 },\n  { code: '241', name: 'Gabon', flag: 'GA', maxLength: 9 },\n];\n\n/**\n * @component dropi-phone-input\n * Phone number input with country code selector.\n * Syncs perfectly with dropi-core_front natively\n */\n@Component({\n  tag: 'dropi-phone-input',\n  styleUrl: 'dropi-phone-input.css',\n  shadow: true,\n})\nexport class DropiPhoneInput {\n  @Element() el: HTMLElement;\n\n  /** Initial country dial code (e.g. \"57\") — matches Angular 'CodArea' setter */\n  @Prop({ mutable: true }) codArea: string = '57';\n  /** Phone number value — matches Angular 'ngModelPhone' */\n  @Prop({ mutable: true }) ngModelPhone: string = '';\n  /** Input placeholder — matches Angular 'phoneNumberPlaceholder' */\n  @Prop() phoneNumberPlaceholder: string | null = null;\n  /** Disabled state — matches Angular 'disabledInput' */\n  @Prop() disabledInput: boolean = false;\n  /** Validation state — matches Angular 'isValidPhone' */\n  @Prop() isValidPhone: boolean = undefined;\n  /** Validate on init — matches Angular 'validateOnInit' */\n  @Prop() validateOnInit: boolean = true;\n  /**\n   * Pre-selected country object (matches Angular `selectedOption: Country`).\n   * Pass `{ dialCode, flag, name, iso2 }`. When set, overrides `codArea`.\n   */\n  @Prop({ mutable: true }) selectedOption: any = null;\n  /**\n   * Country select configuration object (matches Angular `selectProperties: SelectProperties`).\n   * Fields: `label`, `placeholder`, `options` (array of Country objects).\n   * When provided, overrides the internal country list.\n   */\n  @Prop() selectProperties: any = null;\n\n  @State() private open: boolean = false;\n\n  /** Emitted when country dial code changes — matches Angular 'ngModelChangeCod' */\n  @Event() dropiCodChange: EventEmitter<string>;\n  /** Emitted when phone number changes — matches Angular 'ngModelChangePhone' */\n  @Event() dropiPhoneChange: EventEmitter<string>;\n  /** Emitted on field verification — matches Angular 'verifiedField' */\n  @Event() dropiVerify: EventEmitter<void>;\n  /** Emitted when country selection changes — matches Angular 'onChangeSelect' */\n  @Event() dropiChangeSelect: EventEmitter<any>;\n\n  @Watch('codArea')\n  codAreaChanged() {\n    this.ngModelPhone = '';\n  }\n\n  @Watch('selectedOption')\n  selectedOptionChanged(val: any) {\n    if (!val) return;\n    // Support Angular Country shape: { dialCode, iso2 } or { code }\n    const code = val.dialCode ?? val.code ?? this.codArea;\n    this.codArea = String(code).replace('+', '');\n  }\n\n  componentWillLoad() {\n    if (this.selectedOption) this.selectedOptionChanged(this.selectedOption);\n  }\n\n  private get selectedCountry(): CountryCode {\n    const cleanCodArea = (this.codArea ?? '57').replace('+', '');\n    return COUNTRIES.find(c => c.code === cleanCodArea) ?? COUNTRIES[0];\n  }\n\n  private selectCountry(c: CountryCode) {\n    this.codArea = c.code;\n    this.open = false;\n    this.dropiCodChange.emit(c.code);\n    this.dropiChangeSelect.emit(c);\n  }\n\n  private handleInput(e: InputEvent) {\n    const raw = (e.target as HTMLInputElement).value.replace(/\\D/g, '');\n    this.ngModelPhone = raw.slice(0, this.selectedCountry.maxLength);\n    (e.target as HTMLInputElement).value = this.ngModelPhone;\n    this.dropiPhoneChange.emit(this.ngModelPhone);\n  }\n\n  @Listen('click', { target: 'window' })\n  handleWindowClick(ev: Event) {\n    const path = ev.composedPath();\n    if (!path.includes(this.el)) {\n      this.open = false;\n    }\n  }\n\n  render() {\n    const country = this.selectedCountry;\n    const isInvalid = this.isValidPhone === false;\n\n    return (\n      <div class=\"phone-wrap\">\n        <div class=\"phone-input-container\">\n\n          <div class=\"custom-select\">\n            <button\n              type=\"button\"\n              class={{ 'select-button': true, 'select-invalid': isInvalid }}\n              disabled={this.disabledInput}\n              onClick={() => { if (!this.disabledInput) this.open = !this.open; }}\n            >\n              <span style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>\n                <img src={`https://flagsapi.com/${country.flag}/flat/24.png`} alt=\"flag\" />\n                {country.code}\n              </span>\n              <dropi-icon name={this.open ? 'Dropdown-up' : 'Dropdown-down'} iconWidth=\"14px\" iconHeight=\"14px\" color=\"Gray-Gray-500\" />\n            </button>\n\n            <ul class={{ 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open }}>\n              {COUNTRIES.map(option => (\n                <li>\n                  <button\n                    type=\"button\"\n                    class=\"option\"\n                    onMouseDown={(e) => { e.preventDefault(); this.selectCountry(option); }}\n                  >\n                    <img src={`https://flagsapi.com/${option.flag}/flat/24.png`} alt={option.flag} />\n                    {option.code}\n                  </button>\n                </li>\n              ))}\n            </ul>\n          </div>\n\n          <input\n            id=\"phone-input\"\n            type=\"tel\"\n            inputmode=\"numeric\"\n            class={{ 'form-control': true, 'is-invalid': isInvalid }}\n            placeholder={this.phoneNumberPlaceholder}\n            value={this.ngModelPhone}\n            disabled={this.disabledInput}\n            maxLength={country.maxLength}\n            onInput={(e) => this.handleInput(e as InputEvent)}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-phone-input.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-phone-input/dropi-phone-input.css?tag=dropi-phone-input&encapsulation=shadow","src/components/dropi-phone-input/dropi-phone-input.tsx"],"sourcesContent":[":host { display: block; width: 100%; position: relative; font-family: 'Inter', sans-serif; }\n*, *::before, *::after { box-sizing: border-box; }\n\n/* Ocultar spin buttons en inputs numéricos */\ninput::-webkit-inner-spin-button,\ninput::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  appearance: none;\n  margin: 0;\n}\ninput[type='number'] {\n  -moz-appearance: textfield;\n  appearance: textfield;\n}\n\n.phone-wrap {\n  width: 100%;\n}\n\n.phone-label {\n  display: block;\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Gray-Gray-600, #475066);\n  margin-bottom: 4px;\n}\n\n.phone-input-container {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.custom-select {\n  position: relative;\n  width: 50%;\n}\n\n.form-control {\n  flex: 1;\n  width: 100%;\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: 5px;\n  font-size: 14px;\n  font-family: inherit;\n  transition: border-color 0.3s ease-in-out;\n  height: 40px;\n  padding: 0 12px;\n  outline: none;\n  color: var(--Gray-Gray-700, #32394d);\n  background-color: var(--Neutral-White, #ffffff);\n}\n\n.form-control::placeholder {\n  color: var(--Gray-Gray-500, #69738c);\n}\n\n.form-control:focus::placeholder {\n  color: var(--Gray-Gray-500, #69738c);\n}\n\n.form-control:focus {\n  border-color: var(--Info-Info-500, #50a5f1);\n  outline: none;\n}\n\n.form-control:disabled {\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9) !important;\n  color: var(--Gray-Gray-400, #858ea6);\n  background-color: var(--Gray-Gray-50, #f7f8fa);\n  outline: none;\n}\n\n.form-control.is-invalid {\n  background: #fffbfb;\n  border-color: var(--Error-Error-500, #f46a6b) !important;\n}\n\n.select-button {\n  width: 100%;\n  height: 40px;\n  padding: 0.47rem 0.75rem;\n  padding-right: 7px;\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  background: var(--Neutral-White, #ffffff);\n  color: var(--Gray-Gray-500, #69738c);\n  font-size: var(--font-size-s, 12px);\n  font-family: inherit;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  text-align: left;\n  cursor: pointer;\n}\n\n.select-button img {\n  width: 20px;\n  height: 20px;\n}\n\n.select-button:focus {\n  border-color: var(--Info-Info-500, #50a5f1) !important;\n  outline: none;\n}\n\n.select-button:disabled {\n  border-color: var(--Gray-Gray-200, #c3c9d9);\n  color: var(--Gray-Gray-400, #858ea6);\n  background-color: var(--Gray-Gray-50, #f7f8fa);\n  cursor: unset;\n}\n\n.select-button.select-completed {\n  border-color: var(--Gray-Gray-400, #858ea6);\n  color: var(--Gray-Gray-600, #475066);\n  background: var(--Neutral-White, #ffffff);\n}\n\n.select-button.select-invalid {\n  border-color: var(--Error-Error-500, #f46a6b) !important;\n}\n\n.select-dropdown {\n  position: absolute;\n  width: 100%;\n  overflow: hidden;\n  list-style: none;\n  padding: 0;\n  margin: 4px 0 0 0;\n  border: 1px solid transparent;\n  border-radius: var(--Border-2, 8px);\n  overflow-y: scroll;\n  z-index: var(--dropi-z-index-overlay, 11000);\n}\n\n/* Scrollbar */\n.select-dropdown::-webkit-scrollbar {\n  width: 6px;\n}\n.select-dropdown::-webkit-scrollbar-thumb {\n  background-color: var(--Gray-Gray-300, #d1d6e1);\n  border-radius: 4px;\n}\n\n.expanded-select {\n  max-height: 250px;\n  background: var(--Neutral-White, #ffffff);\n  box-shadow: var(--Shadow-medium, 0 4px 16px rgba(0, 0, 0, 0.08));\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  transition: max-height 0.2s ease-in;\n}\n\n.collapsed-select {\n  max-height: 0;\n  background: transparent;\n  box-shadow: none;\n  border: 1px solid transparent;\n  transition: max-height 0.2s ease-out, background 0.6s ease-out, box-shadow 0.6s ease-out;\n}\n\n.select-dropdown li {\n  margin: 0;\n  padding: 0;\n}\n\n.option {\n  width: 100%;\n  height: 45px;\n  border-radius: var(--Border-2, 8px);\n  padding-top: var(--Size-3, 12px);\n  padding-right: var(--Size-4, 16px);\n  padding-bottom: var(--Size-3, 12px);\n  padding-left: var(--Size-4, 16px);\n  border: none;\n  background: transparent;\n  text-align: left;\n  color: var(--Gray-Gray-600, #475066);\n  font-size: var(--font-size-s, 12px);\n  font-family: inherit;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.option img {\n  width: 20px;\n  height: 20px;\n}\n\n.option:hover {\n  background: var(--Gray-Gray-50, #f7f8fa);\n}\n\n.option:disabled {\n  color: var(--Gray-Gray-400, #858ea6);\n  background-color: var(--Gray-Gray-50, #f7f8fa);\n  cursor: unset;\n}\n\n.invalid-color {\n  color: var(--Error-Error-500, #f46a6b) !important;\n}\n\n.phone-error {\n  margin: 4px 0 0;\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Error-Error-500, #f46a6b);\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, Element, Listen, AttachInternals, h } from '@stencil/core';\n\ninterface CountryCode {\n  name: string;\n  code: string;\n  flag: string;\n  maxLength: number;\n}\n\nconst COUNTRIES: CountryCode[] = [\n  { code: '57', name: 'Colombia', flag: 'CO', maxLength: 10 },\n  { code: '52', name: 'Mexico', flag: 'MX', maxLength: 10 },\n  { code: '507', name: 'Panama', flag: 'PA', maxLength: 8 },\n  { code: '56', name: 'Chile', flag: 'CL', maxLength: 9 },\n  { code: '593', name: 'Ecuador', flag: 'EC', maxLength: 10 },\n  { code: '51', name: 'Peru', flag: 'PE', maxLength: 9 },\n  { code: '34', name: 'España', flag: 'ES', maxLength: 9 },\n  { code: '595', name: 'Paraguay', flag: 'PY', maxLength: 9 },\n  { code: '58', name: 'Venezuela', flag: 'VE', maxLength: 11 },\n  { code: '54', name: 'Argentina', flag: 'AR', maxLength: 10 },\n  { code: '55', name: 'Brasil', flag: 'BR', maxLength: 11 },\n  { code: '1', name: 'United States', flag: 'US', maxLength: 10 },\n  { code: '502', name: 'Guatemala', flag: 'GT', maxLength: 8 },\n  { code: '598', name: 'Uruguay', flag: 'UY', maxLength: 9 },\n  { code: '501', name: 'Belize', flag: 'BZ', maxLength: 7 },\n  { code: '81', name: 'Japan', flag: 'JP', maxLength: 10 },\n  { code: '1', name: 'Canada', flag: 'CA', maxLength: 9 },\n  { code: '1473', name: 'Grenada', flag: 'GD', maxLength: 10 },\n  { code: '509', name: 'Haiti', flag: 'HT', maxLength: 10 },\n  { code: '1809', name: 'Dominican Republic', flag: 'DO', maxLength: 10 },\n  { code: '1829', name: 'Dominican Republic', flag: 'DO', maxLength: 10 },\n  { code: '1849', name: 'Dominican Republic', flag: 'DO', maxLength: 10 },\n  { code: '1869', name: 'Saint Kitts And Nevis', flag: 'KN', maxLength: 10 },\n  { code: '1784', name: 'Saint Vincent And The Grenadines', flag: 'VC', maxLength: 10 },\n  { code: '1758', name: 'Saint Lucia', flag: 'LC', maxLength: 10 },\n  { code: '597', name: 'Suriname', flag: 'SR', maxLength: 10 },\n  { code: '1868', name: 'Trinidad and Tobago', flag: 'TT', maxLength: 10 },\n  { code: '505', name: 'Nicaragua', flag: 'NI', maxLength: 8 },\n  { code: '506', name: 'Costa Rica', flag: 'CR', maxLength: 8 },\n  { code: '591', name: 'Bolivia', flag: 'BO', maxLength: 8 },\n  { code: '7', name: 'Russia', flag: 'RU', maxLength: 11 },\n  { code: '20', name: 'Egypt', flag: 'EG', maxLength: 9 },\n  { code: '27', name: 'South Africa', flag: 'ZA', maxLength: 10 },\n  { code: '30', name: 'Greece', flag: 'GR', maxLength: 10 },\n  { code: '31', name: 'Netherlands', flag: 'NL', maxLength: 9 },\n  { code: '32', name: 'Belgium', flag: 'BE', maxLength: 8 },\n  { code: '33', name: 'France', flag: 'FR', maxLength: 9 },\n  { code: '36', name: 'Hungary', flag: 'HU', maxLength: 9 },\n  { code: '40', name: 'Romania', flag: 'RO', maxLength: 9 },\n  { code: '39', name: 'Italy', flag: 'IT', maxLength: 10 },\n  { code: '41', name: 'Switzerland', flag: 'CH', maxLength: 9 },\n  { code: '44', name: 'United Kingdom', flag: 'GB', maxLength: 11 },\n  { code: '45', name: 'Denmark', flag: 'DK', maxLength: 8 },\n  { code: '46', name: 'Sweden', flag: 'SE', maxLength: 8 },\n  { code: '47', name: 'Norway', flag: 'NO', maxLength: 8 },\n  { code: '48', name: 'Poland', flag: 'PL', maxLength: 9 },\n  { code: '49', name: 'Germany', flag: 'DE', maxLength: 11 },\n  { code: '53', name: 'Malta', flag: 'MT', maxLength: 8 },\n  { code: '60', name: 'Malaysia', flag: 'MY', maxLength: 9 },\n  { code: '61', name: 'Australia', flag: 'AU', maxLength: 9 },\n  { code: '62', name: 'Indonesia', flag: 'ID', maxLength: 12 },\n  { code: '63', name: 'Philippines', flag: 'PH', maxLength: 10 },\n  { code: '64', name: 'New Zealand', flag: 'NZ', maxLength: 12 },\n  { code: '65', name: 'Singapore', flag: 'SG', maxLength: 8 },\n  { code: '66', name: 'Thailand', flag: 'TH', maxLength: 9 },\n  { code: '82', name: 'South Korea', flag: 'KR', maxLength: 9 },\n  { code: '84', name: 'Vietnam', flag: 'VN', maxLength: 11 },\n  { code: '86', name: 'China', flag: 'CN', maxLength: 11 },\n  { code: '90', name: 'Turkey', flag: 'TR', maxLength: 10 },\n  { code: '91', name: 'India', flag: 'IN', maxLength: 10 },\n  { code: '92', name: 'Pakistan', flag: 'PK', maxLength: 9 },\n  { code: '93', name: 'Afghanistan', flag: 'AF', maxLength: 10 },\n  { code: '94', name: 'Sri Lanka', flag: 'LK', maxLength: 9 },\n  { code: '95', name: 'Myanmar', flag: 'MM', maxLength: 9 },\n  { code: '98', name: 'Iran', flag: 'IR', maxLength: 10 },\n  { code: '211', name: 'South Sudan', flag: 'SS', maxLength: 10 },\n  { code: '212', name: 'Morocco', flag: 'MA', maxLength: 9 },\n  { code: '213', name: 'Algeria', flag: 'DZ', maxLength: 9 },\n  { code: '216', name: 'Tunisia', flag: 'TN', maxLength: 8 },\n  { code: '218', name: 'Libya', flag: 'LY', maxLength: 9 },\n  { code: '220', name: 'Gambia', flag: 'GM', maxLength: 8 },\n  { code: '221', name: 'Senegal', flag: 'SN', maxLength: 9 },\n  { code: '222', name: 'Mauritania', flag: 'MR', maxLength: 9 },\n  { code: '223', name: 'Mali', flag: 'ML', maxLength: 8 },\n  { code: '224', name: 'Guinea', flag: 'GN', maxLength: 9 },\n  { code: '225', name: 'Ivory Coast', flag: 'CI', maxLength: 10 },\n  { code: '226', name: 'Burkina Faso', flag: 'BF', maxLength: 10 },\n  { code: '227', name: 'Niger', flag: 'NE', maxLength: 8 },\n  { code: '228', name: 'Togo', flag: 'TG', maxLength: 8 },\n  { code: '229', name: 'Benin', flag: 'BJ', maxLength: 8 },\n  { code: '230', name: 'Mauritius', flag: 'MU', maxLength: 10 },\n  { code: '231', name: 'Liberia', flag: 'LR', maxLength: 8 },\n  { code: '232', name: 'Sierra Leone', flag: 'SL', maxLength: 11 },\n  { code: '233', name: 'Ghana', flag: 'GH', maxLength: 9 },\n  { code: '234', name: 'Nigeria', flag: 'NG', maxLength: 11 },\n  { code: '235', name: 'Chad', flag: 'TD', maxLength: 8 },\n  { code: '236', name: 'Central African Republic', flag: 'CF', maxLength: 21 },\n  { code: '237', name: 'Cameroon', flag: 'CM', maxLength: 10 },\n  { code: '238', name: 'Cape Verde', flag: 'CV', maxLength: 9 },\n  { code: '239', name: 'São Tomé and Príncipe', flag: 'ST', maxLength: 14 },\n  { code: '240', name: 'Equatorial Guinea', flag: 'GQ', maxLength: 17 },\n  { code: '241', name: 'Gabon', flag: 'GA', maxLength: 9 },\n];\n\n/**\n * @component dropi-phone-input\n * Phone number input with country code selector.\n * Syncs perfectly with dropi-core_front natively\n */\n@Component({\n  tag: 'dropi-phone-input',\n  styleUrl: 'dropi-phone-input.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DropiPhoneInput {\n  @Element() el: HTMLElement;\n  @AttachInternals() internals: ElementInternals;\n\n  /** Name for native form submission */\n  @Prop({ reflect: true }) name: string = '';\n\n\n  /** Initial country dial code (e.g. \"57\") — matches Angular 'CodArea' setter */\n  @Prop({ mutable: true }) codArea: string = '57';\n  /** Phone number value — matches Angular 'ngModelPhone' */\n  @Prop({ mutable: true }) ngModelPhone: string = '';\n  /** Input placeholder — matches Angular 'phoneNumberPlaceholder' */\n  @Prop() phoneNumberPlaceholder: string | null = null;\n  /** Disabled state — matches Angular 'disabledInput' */\n  @Prop() disabledInput: boolean = false;\n  /** Validation state — matches Angular 'isValidPhone' */\n  @Prop() isValidPhone: boolean = undefined;\n  /** Validate on init — matches Angular 'validateOnInit' */\n  @Prop() validateOnInit: boolean = true;\n  /**\n   * Pre-selected country object (matches Angular `selectedOption: Country`).\n   * Pass `{ dialCode, flag, name, iso2 }`. When set, overrides `codArea`.\n   */\n  @Prop({ mutable: true }) selectedOption: any = null;\n  /**\n   * Country select configuration object (matches Angular `selectProperties: SelectProperties`).\n   * Fields: `label`, `placeholder`, `options` (array of Country objects).\n   * When provided, overrides the internal country list.\n   */\n  @Prop() selectProperties: any = null;\n\n  @State() private open: boolean = false;\n\n  /** Emitted when country dial code changes — matches Angular 'ngModelChangeCod' */\n  @Event() dropiCodChange: EventEmitter<string>;\n  /** Emitted when phone number changes — matches Angular 'ngModelChangePhone' */\n  @Event() dropiPhoneChange: EventEmitter<string>;\n  /** Emitted on field verification — matches Angular 'verifiedField' */\n  @Event() dropiVerify: EventEmitter<void>;\n  /** Emitted when country selection changes — matches Angular 'onChangeSelect' */\n  @Event() dropiChangeSelect: EventEmitter<any>;\n\n  @Watch('codArea')\n  codAreaChanged() {\n    this.ngModelPhone = '';\n    this.updateFormValue();\n  }\n\n  @Watch('ngModelPhone')\n  ngModelPhoneChanged() {\n    this.updateFormValue();\n  }\n\n\n  @Watch('selectedOption')\n  selectedOptionChanged(val: any) {\n    if (!val) return;\n    // Support Angular Country shape: { dialCode, iso2 } or { code }\n    const code = val.dialCode ?? val.code ?? this.codArea;\n    this.codArea = String(code).replace('+', '');\n  }\n\n  componentWillLoad() {\n    if (this.selectedOption) this.selectedOptionChanged(this.selectedOption);\n    this.updateFormValue();\n  }\n\n  private updateFormValue() {\n    const fullValue = this.ngModelPhone ? `+${this.codArea}${this.ngModelPhone}` : '';\n    this.internals.setFormValue(fullValue);\n  }\n\n\n  private get selectedCountry(): CountryCode {\n    const cleanCodArea = (this.codArea ?? '57').replace('+', '');\n    return COUNTRIES.find(c => c.code === cleanCodArea) ?? COUNTRIES[0];\n  }\n\n  private selectCountry(c: CountryCode) {\n    this.codArea = c.code;\n    this.open = false;\n    this.dropiCodChange.emit(c.code);\n    this.dropiChangeSelect.emit(c);\n  }\n\n  private handleInput(e: InputEvent) {\n    const raw = (e.target as HTMLInputElement).value.replace(/\\D/g, '');\n    this.ngModelPhone = raw.slice(0, this.selectedCountry.maxLength);\n    (e.target as HTMLInputElement).value = this.ngModelPhone;\n    this.dropiPhoneChange.emit(this.ngModelPhone);\n  }\n\n  @Listen('click', { target: 'window' })\n  handleWindowClick(ev: Event) {\n    const path = ev.composedPath();\n    if (!path.includes(this.el)) {\n      this.open = false;\n    }\n  }\n\n  render() {\n    const country = this.selectedCountry;\n    const isInvalid = this.isValidPhone === false;\n\n    return (\n      <div class=\"phone-wrap\">\n        <div class=\"phone-input-container\">\n\n          <div class=\"custom-select\">\n            <button\n              type=\"button\"\n              class={{ 'select-button': true, 'select-invalid': isInvalid }}\n              disabled={this.disabledInput}\n              onClick={() => { if (!this.disabledInput) this.open = !this.open; }}\n            >\n              <span style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>\n                <img src={`https://flagsapi.com/${country.flag}/flat/24.png`} alt=\"flag\" />\n                {country.code}\n              </span>\n              <dropi-icon name={this.open ? 'Dropdown-up' : 'Dropdown-down'} iconWidth=\"14px\" iconHeight=\"14px\" color=\"Gray-Gray-500\" />\n            </button>\n\n            <ul class={{ 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open }}>\n              {COUNTRIES.map(option => (\n                <li>\n                  <button\n                    type=\"button\"\n                    class=\"option\"\n                    onMouseDown={(e) => { e.preventDefault(); this.selectCountry(option); }}\n                  >\n                    <img src={`https://flagsapi.com/${option.flag}/flat/24.png`} alt={option.flag} />\n                    {option.code}\n                  </button>\n                </li>\n              ))}\n            </ul>\n          </div>\n\n          <input\n            id=\"phone-input\"\n            type=\"tel\"\n            inputmode=\"numeric\"\n            class={{ 'form-control': true, 'is-invalid': isInvalid }}\n            placeholder={this.phoneNumberPlaceholder}\n            value={this.ngModelPhone}\n            disabled={this.disabledInput}\n            maxLength={country.maxLength}\n            onInput={(e) => this.handleInput(e as InputEvent)}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-radio-button.entry.js

@@ -6,7 +6,15 @@ const DropiRadioButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.dropiChange = createEvent(this, "dropiChange", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
     }
+    internals;
     /** Label text displayed next to the radio */
     label = '';
     /** Input name (for grouping radio buttons) */
@@ -26,17 +34,26 @@ const DropiRadioButton = class {
         if (val)
             this.checked = false;
     }
+    checkedChanged(val) {
+        this.internals.setFormValue(val ? 'on' : null);
+    }
+    componentWillLoad() {
+        this.internals.setFormValue(this.checked ? 'on' : null);
+    }
     handleChange(e) {
         this.checked = e.target.checked;
         this.dropiChange.emit(e);
     }
     render() {
-        return (h("div", { key: '9f4c4f3be63c0aa0bcd1c48dacb97cec903db98d', class: "dropi-radio-button" }, h("label", { key: 'c29bd1ccc6c468b57fdcb4dd6c15cf541255cb71', htmlFor: this.id }, h("input", { key: '19533ffd5e5eb1b43d7e0f42971aa81652c8c926', id: this.id, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
+        return (h("div", { key: 'e4b54d9bda299b9150ebf9791925e0e7c3b9fb38', class: "dropi-radio-button" }, h("label", { key: '0a4c6443668477a2cb6b2d5a3d8bc1744a0fcffd', htmlFor: this.id }, h("input", { key: '6ba6b5af4bc061664dee0b6554c769613080dbb8', id: this.id, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
         "resetTrigger": [{
                 "onResetTrigger": 0
+            }],
+        "checked": [{
+                "checkedChanged": 0
             }]
     }; }
 };

package/dist/dropi-ui/dropi-radio-button.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-radio-button.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,s9BAAs9B,CAAC;;MCY7+B,gBAAgB,GAAA,MAAA;;;;;;IAEnB,KAAK,GAAW,EAAE;;IAElB,IAAI,GAAW,MAAM;;IAErB,EAAE,GAAW,aAAa;;IAEM,OAAO,GAAY,KAAK;AAChE;;;AAGG;IACK,YAAY,GAAY,KAAK;;AAG5B,IAAA,WAAW;AAGpB,IAAA,cAAc,CAAC,GAAY,EAAA;AACzB,QAAA,IAAI,GAAG;AAAE,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;;AAGvB,IAAA,YAAY,CAAC,CAAQ,EAAA;QAC3B,IAAI,CAAC,OAAO,GAAI,CAAC,CAAC,MAA2B,CAAC,OAAO;AACrD,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;;IAG1B,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,OAAO,EAAE,IAAI,CAAC,EAAE,EAAA,EACrB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAA,CACrC,EACD,IAAI,CAAC,KAAK,CACL,CACJ;;;;;;;;;;;;;","names":[],"sources":["src/components/dropi-radio-button/dropi-radio-button.css?tag=dropi-radio-button&encapsulation=shadow","src/components/dropi-radio-button/dropi-radio-button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.dropi-radio-button {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 20px;\n}\n\nlabel {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  color: var(--Gray-Gray-700, #32394d);\n  font-size: var(--font-size-s, 12px);\n  font-weight: var(--font-weight-regular, 400);\n  line-height: 1.5;\n}\n\ninput[type='radio'] {\n  appearance: none;\n  -webkit-appearance: none;\n  width: 20px;\n  height: 20px;\n  min-width: 20px;\n  border: 2px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: 50%;\n  background-color: transparent;\n  position: relative;\n  cursor: pointer;\n  outline: none;\n  flex-shrink: 0;\n  align-self: center;\n  vertical-align: middle;\n  margin: 0;\n}\n\ninput[type='radio']::before {\n  content: '';\n  position: absolute;\n  top: 3px;\n  left: 3px;\n  width: 10px;\n  height: 10px;\n  background-color: var(--Primary-Primary-400, #f7b46f);\n  border-radius: 50%;\n  display: none;\n}\n\ninput[type='radio']:checked {\n  border: 2px solid var(--Primary-Primary-500, #f49a3d);\n}\n\ninput[type='radio']:checked::before {\n  display: block;\n}\n","import { Component, Prop, Event, EventEmitter, Watch, h } from '@stencil/core';\n\n/**\n * @component dropi-radio-button\n * Styled radio button with label.\n */\n@Component({\n  tag: 'dropi-radio-button',\n  styleUrl: 'dropi-radio-button.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DropiRadioButton {\n  /** Label text displayed next to the radio */\n  @Prop() label: string = '';\n  /** Input name (for grouping radio buttons) */\n  @Prop() name: string = 'name';\n  /** Input id */\n  @Prop() id: string = 'radioButton';\n  /** Whether this radio is selected */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n  /**\n   * Set to true to programmatically reset this radio to unchecked.\n   * Useful when the parent needs to clear a group.\n   */\n  @Prop() resetTrigger: boolean = false;\n\n  /** Emitted when the radio is selected */\n  @Event() dropiChange: EventEmitter<any>;\n\n  @Watch('resetTrigger')\n  onResetTrigger(val: boolean) {\n    if (val) this.checked = false;\n  }\n\n  private handleChange(e: Event) {\n    this.checked = (e.target as HTMLInputElement).checked;\n    this.dropiChange.emit(e);\n  }\n\n  render() {\n    return (\n      <div class=\"dropi-radio-button\">\n        <label htmlFor={this.id}>\n          <input\n            id={this.id}\n            type=\"radio\"\n            name={this.name}\n            checked={this.checked}\n            onChange={(e) => this.handleChange(e)}\n          />\n          {this.label}\n        </label>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-radio-button.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,s9BAAs9B,CAAC;;MCY7+B,gBAAgB,GAAA,MAAA;;;;;;;;;;;;AACR,IAAA,SAAS;;IAGpB,KAAK,GAAW,EAAE;;IAED,IAAI,GAAW,MAAM;;IAGtC,EAAE,GAAW,aAAa;;IAEM,OAAO,GAAY,KAAK;AAEhE;;;AAGG;IACK,YAAY,GAAY,KAAK;;AAG5B,IAAA,WAAW;AAGpB,IAAA,cAAc,CAAC,GAAY,EAAA;AACzB,QAAA,IAAI,GAAG;AAAE,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;;AAI/B,IAAA,cAAc,CAAC,GAAY,EAAA;AACzB,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC;;IAGhD,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;;AAIjD,IAAA,YAAY,CAAC,CAAQ,EAAA;QAC3B,IAAI,CAAC,OAAO,GAAI,CAAC,CAAC,MAA2B,CAAC,OAAO;AACrD,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;;IAG1B,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,OAAO,EAAE,IAAI,CAAC,EAAE,EAAA,EACrB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAA,CACrC,EACD,IAAI,CAAC,KAAK,CACL,CACJ;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dropi-radio-button/dropi-radio-button.css?tag=dropi-radio-button&encapsulation=shadow","src/components/dropi-radio-button/dropi-radio-button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.dropi-radio-button {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 20px;\n}\n\nlabel {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  color: var(--Gray-Gray-700, #32394d);\n  font-size: var(--font-size-s, 12px);\n  font-weight: var(--font-weight-regular, 400);\n  line-height: 1.5;\n}\n\ninput[type='radio'] {\n  appearance: none;\n  -webkit-appearance: none;\n  width: 20px;\n  height: 20px;\n  min-width: 20px;\n  border: 2px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: 50%;\n  background-color: transparent;\n  position: relative;\n  cursor: pointer;\n  outline: none;\n  flex-shrink: 0;\n  align-self: center;\n  vertical-align: middle;\n  margin: 0;\n}\n\ninput[type='radio']::before {\n  content: '';\n  position: absolute;\n  top: 3px;\n  left: 3px;\n  width: 10px;\n  height: 10px;\n  background-color: var(--Primary-Primary-400, #f7b46f);\n  border-radius: 50%;\n  display: none;\n}\n\ninput[type='radio']:checked {\n  border: 2px solid var(--Primary-Primary-500, #f49a3d);\n}\n\ninput[type='radio']:checked::before {\n  display: block;\n}\n","import { Component, Prop, Event, EventEmitter, Watch, AttachInternals, h } from '@stencil/core';\n\n/**\n * @component dropi-radio-button\n * Styled radio button with label.\n */\n@Component({\n  tag: 'dropi-radio-button',\n  styleUrl: 'dropi-radio-button.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DropiRadioButton {\n  @AttachInternals() internals: ElementInternals;\n\n  /** Label text displayed next to the radio */\n  @Prop() label: string = '';\n  /** Input name (for grouping radio buttons) */\n  @Prop({ reflect: true }) name: string = 'name';\n\n  /** Input id */\n  @Prop() id: string = 'radioButton';\n  /** Whether this radio is selected */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /**\n   * Set to true to programmatically reset this radio to unchecked.\n   * Useful when the parent needs to clear a group.\n   */\n  @Prop() resetTrigger: boolean = false;\n\n  /** Emitted when the radio is selected */\n  @Event() dropiChange: EventEmitter<any>;\n\n  @Watch('resetTrigger')\n  onResetTrigger(val: boolean) {\n    if (val) this.checked = false;\n  }\n\n  @Watch('checked')\n  checkedChanged(val: boolean) {\n    this.internals.setFormValue(val ? 'on' : null);\n  }\n\n  componentWillLoad() {\n    this.internals.setFormValue(this.checked ? 'on' : null);\n  }\n\n\n  private handleChange(e: Event) {\n    this.checked = (e.target as HTMLInputElement).checked;\n    this.dropiChange.emit(e);\n  }\n\n  render() {\n    return (\n      <div class=\"dropi-radio-button\">\n        <label htmlFor={this.id}>\n          <input\n            id={this.id}\n            type=\"radio\"\n            name={this.name}\n            checked={this.checked}\n            onChange={(e) => this.handleChange(e)}\n          />\n          {this.label}\n        </label>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-select.entry.js

@@ -385,7 +385,7 @@ const DropiSelect = class {
         ]), !this.isGrouped && this.filteredOptions.map(opt => this.renderOption(opt)), this.filteredOptions.length === 0 && (h("li", { class: "no-results" }, "Sin resultados"))));
     }
     render() {
-        return (h("div", { key: '4f34c329d9993926758230f0e9ca0f8d0e57ef6e', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: '743013592658ee415d4a9e3db8ec648472a3428e', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: '56183248733eb18956664c859c8f7d4057f3fa11', class: "asterisk" }, " *"))), h("div", { key: 'c93f45456478ac5419d542512092e877a04f28b7', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: '0632779b9ba71f1fb91944b54b477999f607a3f5', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (h("div", { key: '3e57fc2b53715abb9800db573119cf77b0333d37', class: "select-helper" }, h("span", { key: 'baf3d1f0ae4d535acae2a08df8d2079996afdcff' }, this.textHelper))), this.hasError && this.errorText && (h("div", { key: '8b25aae92b9370a02fcfd81f50b98df145d3cb0e', class: "select-helper-error" }, h("dropi-icon", { key: '60643f0b7e54f8533dc9fd7dd17715aec59d851c', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '35bcdfd3c9825cbac269b1085d4c552df694f33a' }, this.errorText))), this.renderDropdown()));
+        return (h("div", { key: 'f09113a288d45bb5519503bb78c41e236913c1eb', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: 'c0b59763dc3529d7f9bb5597a2bea0d38070a07b', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: '6c8a47bdfc216231ba72420298b3bc8deeeae435', class: "asterisk" }, " *"))), h("div", { key: '8ec45010af1252effe34bb69d3f40ea277459511', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: 'b3f7f9adacd57b091baac662fc7be6fcd847c3a4', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (h("div", { key: 'a4cce833b50b2bc62cb7142da420f81c0647e97e', class: "select-helper" }, h("span", { key: 'f69375abc2f66b5b1278895b8f313adabfa0f938' }, this.textHelper))), this.hasError && this.errorText && (h("div", { key: '6681bdbb705633d393adab09a889f3f1fb6fbe8a', class: "select-helper-error" }, h("dropi-icon", { key: '09521eeef2cf2a58cb74bea5bfae8a6d58d17682', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '807820bb0a474079627bf12c20f4a034896785cd' }, this.errorText))), this.renderDropdown()));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {