Widget  for confirmation code for Reactive

Functionalities:

- Paste the code functionality.

- Can with keyboard events (Backspace).

- Only accept numbers on type and paste.

- Choose number of fields.

- Choose if confirmation code will trigger event only if all inputs is filled.

Easy to customize with CSS variables

.confirmation-code-container{
text-align: center;
--border-size: 1px;
--border-bottom-size: 3px;
--border-color: var(--color-neutral-6);
--border-color-valid: var(--color-success);
--border-color-focus: var(--color-info);
--border-color-hover: var(--color-info);
--border-color-valid: var(--color-success);
--input-background-color: var(--color-neutral-0);
--input-background-color-valid: var(--color-neutral-0);
--input-height: 60px;
--input-width: 50px;
--input-font-size: 28px;
--input-font-weight: 500;
--input-gap: 5px;
--input-border-radius: 6px;
}

.confirmation-code-wrapper-02 .confirmation-code-container{
--border-color-focus: var(--color-neutral-9);
--border-color-hover: var(--color-neutral-9);
--border-color-valid: var(--color-primary);
}

Release 1.0.1

• New listener to select text on focus.