()
| 800 | } |
| 801 | |
| 802 | render() { |
| 803 | const { |
| 804 | autocapitalize, |
| 805 | color, |
| 806 | disabled, |
| 807 | el, |
| 808 | fill, |
| 809 | hasFocus, |
| 810 | inheritedAttributes, |
| 811 | inputId, |
| 812 | inputRefs, |
| 813 | inputValues, |
| 814 | length, |
| 815 | readonly, |
| 816 | shape, |
| 817 | size, |
| 818 | } = this; |
| 819 | const mode = getIonMode(this); |
| 820 | const inputmode = this.getInputmode(); |
| 821 | const tabbableIndex = this.getTabbableIndex(); |
| 822 | const pattern = this.getPattern(); |
| 823 | const hasDescription = el.querySelector('.input-otp-description')?.textContent?.trim() !== ''; |
| 824 | |
| 825 | return ( |
| 826 | <Host |
| 827 | class={createColorClasses(color, { |
| 828 | [mode]: true, |
| 829 | 'has-focus': hasFocus, |
| 830 | [`input-otp-size-${size}`]: true, |
| 831 | [`input-otp-shape-${shape}`]: true, |
| 832 | [`input-otp-fill-${fill}`]: true, |
| 833 | 'input-otp-disabled': disabled, |
| 834 | 'input-otp-readonly': readonly, |
| 835 | })} |
| 836 | > |
| 837 | <div role="group" aria-label="One-time password input" class="input-otp-group" {...inheritedAttributes}> |
| 838 | {Array.from({ length }).map((_, index) => ( |
| 839 | <> |
| 840 | <div class="native-wrapper"> |
| 841 | <input |
| 842 | class="native-input" |
| 843 | id={`${inputId}-${index}`} |
| 844 | aria-label={`Input ${index + 1} of ${length}`} |
| 845 | type="text" |
| 846 | autoCapitalize={autocapitalize} |
| 847 | inputmode={inputmode} |
| 848 | pattern={pattern} |
| 849 | disabled={disabled} |
| 850 | readOnly={readonly} |
| 851 | tabIndex={index === tabbableIndex ? 0 : -1} |
| 852 | value={inputValues[index] || ''} |
| 853 | autocomplete="one-time-code" |
| 854 | ref={(el) => (inputRefs[index] = el as HTMLInputElement)} |
| 855 | onInput={this.onInput(index)} |
| 856 | onBlur={this.onBlur} |
| 857 | onFocus={this.onFocus(index)} |
| 858 | onKeyDown={this.onKeyDown(index)} |
| 859 | onPaste={this.onPaste} |
nothing calls this directly
no test coverage detected